Html5 синтаксис: Синтаксис HTML5 | htmlbook.ru

Содержание

Синтаксис HTML5 | htmlbook.ru

HTML5 возвращает нас к стилю десятилетней давности, когда практиковалось не закрывать некоторые теги, писать значения без кавычек и по желанию набирать теги в верхнем или нижнем регистре. Такая вольность не означает, что любые правила должны игнорироваться, по-прежнему следует соблюдать корректную вложенность тегов и вставлять обязательные элементы. Отход от жёсткого синтаксиса XHTML позволяет сосредоточиться на содержании сайта, а не на соблюдении пустых формальностей, большинство из которых вызывает раздражение из-за своего несущественного значения и ненужности.

Элементы HTML

Базовым кирпичиком веб-страницы выступает элемент. Они могут делиться по разным критериям, например, по типу или своему назначению.

Элементы по типу

Пустые элементы

К ним относятся элементы, у которых нет закрывающего тега: <area>, <base>, <br>, <col>, <command>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track>, <wbr>.

Необрабатываемые текстовые элементы

Предназначены для вывода скриптов или стилей, имеющих синтаксис отличный от HTML: <script>, <style>.

RCDATA

Эти элементы могут содержать любой текст или спецсимволы, за исключением нестандартных спецсимволов, которые называются сомнительным амперсандом, например: &copi; или &#38T. К этой группе элементов относятся <textarea> и <title>.

Инородные элементы

Элементы, относящиеся к MathML или SVG.

Обычные элементы

Все остальные элементы, которые не входят в предыдущие группы.

Элементы по назначению

Корневой элемент

Элемент <html>.

Метаданные документа

<head>, а также элементы, которые располагаются внутри него.

Скрипты

Скрипты позволяют добавлять интерактивности на веб-страницу, в эту группу входят элементы, управляющие скриптами.

Структурные элементы

Элементы, управляющие основными разделами веб-страницы, вроде <body>, <section>, <nav>, <article>, <aside> и др.

Группирование контента

Элементы, обрамляющие текст, списки, изображения.

Текст

Элементы, изменяющие вид текста, например, делающие его жирным или курсивным, а также выделяющие текст по смыслу — аббревиатура, цитата, переменная, код и т.д.

Рецензирование

Элементы <ins> и <del> показывающие редактирования в документе.

Внедряемый контент

Элементы, вставляемые на страницу в виде разных объектов — изображения, видео, аудио и др.

Табличные данные

Элементы для создания и управления видом таблиц.

Формы

Формы являются одним из важных элементов любого сайта и предназначены для обмена данными между пользователем и сервером. В эту группу входят элементы для создания формы и её полей.

Интерактивные элементы

Специальные виджеты, с помощью которых пользователь может получать дополнительную информацию или управление.

Ссылки

Элементы <a> и <area>.

Подобное группирование условно и может принимать другой вид, потому что одни и те же элементы могут принадлежать разным группам.

Теги

Для обозначения начала и конца элемента применяются теги. Внутри тегов могут быть атрибуты со своими значениями, расширяющими возможности тегов, а также содержимое (рис. 1).

Рис. 1. Тег <a> с атрибутом href

Закрывающий тег похож на открывающий, но содержит слэш (/) внутри угловых скобок.

Пустые элементы не имеют закрывающего тега и содержимого (рис. 2).

Рис. 2. Пустой тег <img>

Атрибуты тегов расширяют возможности самих тегов и позволяют гибко управлять различными настройками отображения элементов веб-страницы. Общее количество атрибутов достаточно велико, но их значения, как правило, можно сгруппировать по разным типам, например, задающих цвет, размер, адрес и др. Например, элемент <img> добавляет на веб-страницу изображение, при этом адрес графического файла мы указываем через атрибут src.

Доктайп

<!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа) для того, чтобы браузер понимал, с какой версией HTML он имеет дело. Если доктайп не указан, браузеры переходят в режим совместимости, в котором не работают многие возможности HTML5, а также возникают ошибки с отображением документа.
Доктайп не чувствителен к регистру и содержит всего два слова:

<!DOCTYPE html>

Это ключевой элемент и обычно он располагается в первой строке кода.

Комментарии

Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.

Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!— и заканчиваются тегом —>. Все, что находится между этими тегами отображаться на веб-странице не будет.

Необязательные теги

Если какой-то тег не указан, это не означает, что он не представлен вообще. Существуют определённые правила, позволяющие не писать некоторые теги. В табл. 1 представлены теги, которые можно не указывать и условие, при котором это происходит.

Табл. 1. Необязательные теги
Тег Условие
<html>  
</html>  
<head> Если внутри имеются другие элементы.
</head>  
<body> Если пустой, а также содержит что-то кроме пробела или комментария.
</body>  
</li> Если после элемента следует <li> или он последний у родителя.
</dt> Если после элемента следует <dt> или <dd>.
</dd> Если после элемента следует <dd>, <dt> или он последний у родителя.
</p> Если после элемента следует <address>, <article>, <aside>, <blockquote>, <dir>, <div>, <dl>, <fieldset>, <footer>, <form>, <h2>,…,<h6>, <header>, <hgroup>, <hr>, <menu>, <nav>, <ol>, <p>, <pre>, <section>, <table>, <ul>.
</rt> Если после элемента следует <rt> или <rp>.
</rp> Если после элемента следует <rt> или <rp>.
</optgroup> Если после элемента следует <optgroup> или он последний у родителя.
</option> Если после элемента следует <option>, <optgroup> или он последний у родителя.
<colgroup> Если первым внутри идёт <col> и не следует перед другим элементом <colgroup>.
</colgroup>  
</thead> Если после элемента следует <tbody> или <tfoot>.
<tbody> Если первым внутри идёт <tr> и не следует перед <tbody>, <thead> или <tfoot> у которых опущен закрывающий тег.
</tbody> Если после элемента следует <tbody> или <tfoot> или он последний у родителя.
</tfoot> Если после элемента следует <tbody> или он последний у родителя.
</tr> Если после элемента следует <tr> или он последний у родителя.
</td> Если после элемента следует <td>  или <th> или он последний у родителя.
</th> Если после элемента следует <td>  или <th> или он последний у родителя.

Если открывающий тег содержит один или несколько атрибутов, то тег должен указываться обязательно.

Из-за того, что многие теги можно не указывать, т.к. они подразумеваются по умолчанию, любой документ сводится к следующим частям.

  1. Необязательная метка порядка байтов (byte order mark, BOM).
  2. <!DOCTYPE html>.
  3. <title>.

До и после доктайпа разрешается вставлять любое количество пробелов или комментариев. Таким образом, доктайп не обязательно должен располагаться в первой строке кода.

В примере 1 показан минимальный код HTML для вывода традиционного приветствия.

Пример 1. Минимальный HTML

HTML5IECrOpSaFx

<!DOCTYPE html>
<title> </title>
Привет, мир!

Метка порядка байтов состоит из кода символа U+FEFF в начале  документа, где она используется для определения кодировки. Рекомендуется убирать этот символ, поскольку его наличие приводит к ошибкам отображения документа в некоторых браузерах. Для этого можно использовать редактор Notepad++, в меню «Кодировки» выбрать пункт «Кодировать в UTF-8 (без BOM)» (рис. 3).

Рис. 3. Выбор кодировки

Полезные ссылки

HTML5 | Разновидности синтаксиса

Разновидности синтаксиса HTML5

Последнее обновление: 18. 11.2019

При создании документа HTML5 мы можем использовать два различных стиля: HTML и XML.

Стиль HTML предполагает следующие моменты:

  • Начальные открывающие теги могут отсутствовать у элементов

  • Конечные закрывающие теги могут отсутствовать у элементов

  • Только пустые элементы (void elements) (например, br, img, link) могут закрываться с помощью слеша />

  • Регистр названий тегов и атрибутов не имеет значения

  • Можно не заключать значения атрибутов в кавычки

  • Некоторые атрибуты могут не иметь значений (checked и disabled)

  • Специальные символы не экранируются

  • Документ должен иметь элемент DOCTYPE

Это так называемый «разрешительный» стиль, основанный на послаблениях при создании документа.

Документ HTML5 также может быть описан с помощью синтаксиса XML. Такой стиль еще называют «XHTML».
Он используется, если заголовок content-type имеет значение application/xml+xhtml. Для данного стиля характерны следующие правила:

  • Каждый элемент должен иметь начальный открывающий тег

  • Непустые элементы (non-void elements) с начальным открывающим тегом также должны иметь конечный закрывающий тег

  • Любой элемент может закрываться с помощью слеша />

  • Названия тегов и атрибутов регистрозависимы, как правило, используются в нижнем регистре

  • Значения атрибутов должны быть заключены в кавычки

  • Атрибуты без значений не допускаются (checked="checked" вместо просто checked)

  • Специальные символы должны быть экранированы

Сравним два подхода. Подход HTML5:


<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>Заголовок</title>
	</head>
	<body>
		<p>Содержание документа HTML5<br>
		<input type=button value=Нажать >
	</body>
</html>

И аналогичный пример с использованием подхода XHTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<title>Заголовок</title>
	</head>
	<body>
		<p>Содержание документа HTML5<br />
		<input type="button" value="Нажать" /></p>
	</body>
</html>

При использовании синтаксиса XHTML нам также надо указать пространство имен для данного документа: <html xmlns="http://www.w3.org/1999/xhtml">

Выбор конкретного стиля при написании html-документов зависит от предпочтений программиста или веб-дизайнера. Нередко используется смешенный стиль,
который заимствует правила из первого, и из второго стилей.

В то же время надо учитывать, что
наличие у элемента закрывающего и открывающего тегов снижает вероятность, что элемент будет неправильно интерпретирован браузером.

Также заключение значений атрибутов в кавычки поможет избежать потенциальных ошибок. Так, атрибут class может принимать несколько
значений подряд. Например: <div>. Но если мы опустим кавычки, то в качестве значения будет использоваться
«navmenu», а «bigdesctop» браузер будет пытаться интерпретировать как отдельный атрибут.

Если же возникают затруднения, насколько правильной является создаваемая разметка html, то ее можно проверить с помощью валидатора по адресу
https://validator.w3.org:

Мы можем вставить в текстовое поле код веб-страницы, и после нажатия на кнопку «Check» внизу валидатор либо отобразит нам ошибки красным цветом, либо зеленым цветом
уведомит, что ошибок нет, и код прошел валидацию.

Синтаксис HTML5 » Энциклопедия HTML5

Синтаксическая структура HTML5

DOM как часть языка

В языке HTML5 впервые было введено понятие DOM (хотя он существовал и до этого, однако он не был частью языка), теперь HTML-документ рассматривается как набор обектов, а не тегов. Поэтому как такого синтаксиса HTML5 не существует. Однако при написании кода вы можете придерживаться правил разметки тегов, которые были установлены в HTML 4.01 или XHTML 1.0

Синтаксис HTML 4.01

В HTML до пятой версии, существовало несколько правил написания кода:

  1. Свободный режим loose, используемый в HTML 4.01
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
  2. Cтрогий режим strict, используемый в HTML 4.01
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
  3. Еще был синтаксис связанный с фреймами. Фреймы в HTML5 считаются устаревшими, но многие разработчики всё равно используют их, поскольку фреймы очень удобны при разработке некоторых веб-приложений.

Синтаксис XHTML 1.0

В XHTML, существовало два правила написания кода:

  1. Переходный режим transitional, используемый в XHTML 1. 0
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. Строгий режим strict, используемый в XHTML 1.0
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Современный синтаксис HTML5

При использовании HTML5, написав в начале HTML-документа, доктайп <!DOCTYPE html>, вы можете использовать любой из перечисленных выше синтаксисов языка (правил написания кода) или даже совмещать HTML 4.01 и XHTML 1.0 друг с другом.

Например не обрамлять кавычками значения атрибутов атрибут=значение (свободный режим HTML 4.01 — loose), но в тоже время ставить слеш в одиночных тегах <br /> (строгий режим ХHTML 1.0 — strict).

XHTML (strict), наиболее предпочтителен

Опытные HTML-верстальщики обычно используют при написании кода на HTML5, строгий синтаксис XHTML strict, поскольку он держит верстальщика в тонусе, не позволяет ему расслабляться и тем самым оберегает его от возможных ошибок в коде. Также использование строгого синтаксиса пригодится при изучении программирования, ибо там строгость синтаксиса, крайне важна.

Читать далее: Синтаксис XHTML

HTML5 — синтаксис — CoderLessons.com

Язык HTML 5 имеет «пользовательский» синтаксис HTML, который совместим с документами HTML 4 и XHTML1, опубликованными в Интернете, но не совместим с более эзотерическими функциями SGML в HTML 4.

HTML 5 не имеет тех же правил синтаксиса, что и XHTML, где нам нужны имена тегов в нижнем регистре, заключая в кавычки наши атрибуты, атрибут должен иметь значение и закрывать все пустые элементы.

HTML5 обладает большой гибкостью и поддерживает следующие функции:

  • Прописные имена тегов.
  • Кавычки необязательны для атрибутов.
  • Значения атрибута являются необязательными.
  • Закрытие пустых элементов не является обязательным.

ДОКТИП

DOCTYPE в более старых версиях HTML были длиннее, потому что язык HTML был основан на SGML и поэтому требовал ссылки на DTD.

Авторы HTML 5 будут использовать простой синтаксис для указания DOCTYPE следующим образом: 

<!DOCTYPE html>

Приведенный выше синтаксис нечувствителен к регистру.

Кодировка символов

Авторы HTML 5 могут использовать простой синтаксис для указания кодировки символов следующим образом: 

<meta charset = "UTF-8">

Приведенный выше синтаксис нечувствителен к регистру.

Тег <script>

Обычной практикой является добавление атрибута типа со значением «text / javascript» к элементам скрипта следующим образом: 

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 удаляет дополнительную информацию, необходимую, и вы можете использовать просто следующий синтаксис — 

<script src = "scriptfile.js"></script>

Тег <link>

Итак, вы написали <link> следующим образом: 

<link rel = "stylesheet" type = "text/css" href = "stylefile. css">

HTML 5 удаляет дополнительную информацию, необходимую, и вы можете просто использовать следующий синтаксис — 

<link rel = "stylesheet" href = "stylefile.css">

Элементы HTML5

Элементы HTML5 размечаются с использованием начальных и конечных тегов. Теги разграничиваются с помощью угловых скобок с именем тега между ними.

Разница между начальными и конечными тегами заключается в том, что последний содержит косую черту перед именем тега.

Ниже приведен пример элемента HTML5: 

<p>...</p>

Имена тегов HTML5 нечувствительны к регистру и могут быть написаны в верхнем или смешанном регистре, хотя наиболее распространенным соглашением является использование строчных.

Большинство элементов содержат некоторый контент, например, <p> … </ p> содержит абзац. Некоторым элементам, однако, запрещено содержать какой-либо контент вообще, и они известны как пустые элементы. Например, br, hr, ссылка, мета и т. Д.

Вот полный список элементов HTML5 .

HTML5 атрибуты

Элементы могут содержать атрибуты, которые используются для установки различных свойств элемента.

Некоторые атрибуты определены глобально и могут использоваться для любого элемента, в то время как другие определены только для определенных элементов. Все атрибуты имеют имя и значение и выглядят так, как показано ниже в примере.

Ниже приведен пример атрибута HTML5, который иллюстрирует, как разметить элемент div с помощью атрибута с именем class, используя значение «example» — 

<div class = "example">...</div>

Атрибуты могут быть указаны только в начальных тегах и никогда не должны использоваться в конечных тегах.

Атрибуты HTML5 нечувствительны к регистру и могут быть записаны в верхнем или смешанном регистре, хотя наиболее распространенное соглашение — придерживаться строчных.

Вот полный список атрибутов HTML5 .

HTML5 документ

Следующие теги были введены для лучшей структуры —

  • раздел — этот тег представляет общий документ или раздел приложения. Он может использоваться вместе с h2-h6 для указания структуры документа.

  • article — этот тег представляет собой независимую часть содержимого документа, такую ​​как запись в блоге или газетная статья.

  • в сторону — этот тег представляет собой фрагмент содержимого, который имеет незначительное отношение к остальной части страницы.

  • header — Этот тег представляет заголовок раздела.

  • Нижний колонтитул — этот тег представляет нижний колонтитул раздела и может содержать информацию об авторе, информацию об авторских правах и так далее.

  • nav — этот тег представляет раздел документа, предназначенный для навигации.

  • диалог — этот тег может быть использован для разметки разговора.

  • figure — этот тег можно использовать для связывания заголовка с некоторым встроенным контентом, например с графикой или видео.

раздел — этот тег представляет общий документ или раздел приложения. Он может использоваться вместе с h2-h6 для указания структуры документа.

article — этот тег представляет собой независимую часть содержимого документа, такую ​​как запись в блоге или газетная статья.

в сторону — этот тег представляет собой фрагмент содержимого, который имеет незначительное отношение к остальной части страницы.

header — Этот тег представляет заголовок раздела.

Нижний колонтитул — этот тег представляет нижний колонтитул раздела и может содержать информацию об авторе, информацию об авторских правах и так далее.

nav — этот тег представляет раздел документа, предназначенный для навигации.

диалог — этот тег может быть использован для разметки разговора.

figure — этот тег можно использовать для связывания заголовка с некоторым встроенным контентом, например с графикой или видео.

Разметка для документа HTML 5 будет выглядеть следующим образом: 

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

Live Demo 

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h2>HTML5 Document Structure Example</h2> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

Это даст следующий результат —

HTML5 Синтаксис. Гид по стилю. Уроки для начинающих. W3Schools на русском


HTML. Как правильно писать код? Соглашение по кодированию

Веб-разработчики часто не уверены в использовании стиля кодирования и синтаксиса в HTML.

Между 2000 и 2010 годами многие веб-разработчики перешли с HTML на XHTML.

Начиная с XHTML разработчики были вынуждены писать валидный и «хорошо сформированный» код.

HTML5 является более небрежным, когда идёт речь о проверке (валидации) кода.

Будьте разумны и будущее это докажет

Последовательное использование определённого стиля облегчает другим понимание вашего HTML.

В будущем программы, такие, как считыватели XML, могут захотеть прочитать ваш HTML.

Использование хорошо сформированного синтаксиса «близкого к XHTML» является разумным выбором.

Держите свой код аккуратным, чистым и хорошо сформированным.

Используйте корректный Doctype

Всегда объявляйте Doctype (тип документа) в первой строке документа:


Если вам необходима согласованность с тегами нижнего регистра, вы можете использовать:


Используйте названия в нижнем регистре

HTML5 позволяет смешивать большие и маленькие буквы в названиях элементов.

Мы рекомендуем использовать названия элементов буквами лишь в нижнем регистре, поскольку:

  • Смешивание названий буквами в верхнем и нижнем регистре плохо для восприятия

  • Разработчики обычно используют названия с помощью букв в нижнем регистре (как в XHTML)

  • Нижний регистр выглядит чище

  • Буквы в нижнем регистре легче и быстрее писать

Плохо:


<SECTION>
  <p>This is a paragraph.</p>
</SECTION>


Очень плохо:


<Section>
  <p>This is a paragraph.</p>
</SECTION>


Хорошо:


<section>
  <p>This is a paragraph.</p>
</section>

Закрывайте все HTML элементы

В HTML5 нет необходимости закрывать все элементы (например, элемент <p>).

W3C рекомендует закрывать все HTML элементы.

Плохо:


<section>
  <p>This is a paragraph.
  <p>This is a paragraph.

</section>

Хорошо:


<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>

</section>

Закрывайте пустые HTML элементы

В HTML5 не обязательно закрывать пустые элементы.

Разрешено:


<meta charset=»utf-8″>

Также разрешено:


<meta charset=»utf-8″ />


При этом закрывающая косая черта (/) НЕОБХОДИМА в XHTML и XML.

Если вы ожидаете, что программное обеспечение XML будет иметь доступ к вашей странице, то стоит сохранить закрытую косую черту (слэш)!

Используйте названия атрибутов в нижнем регистре

HTML5 позволяет смешивать большие и маленькие буквы в названиях атрибутов.

W3C рекомендует использовать названия атрибутов в нижнем регистре, поскольку:

  • Смешивание букв верхнего и нижнего регистров в названиях плохо воспринимается

  • Разработчики обычно используют названия в нижнем регистре (как в XHTML)

  • Нижний регистр выглядит чище

  • Буквы в нижнем регистре легче и быстрее писать

Плохо:


<div>

Хорошо:


<div
>

Значение атрибутов в кавычках

HTML5 позволяет писать значение атрибутов без кавычек.

W3C рекомендует писать значение атрибутов в кавычках, поскольку:

  • Разработчики обычно пишут значение атрибутов в кавычках (как в XHTML)

  • Значение в кавычках легче читать

  • Если значение содержит пробелы, вы ДОЛЖНЫ использовать кавычки

Очень плохо:

Это не будет работать, поскольку значение содержит пробелы:


<table class=table striped>


Плохо:


<table class=striped>

Хорошо:


<table>

Атрибуты изображения

Всегда добавляйте атрибут alt к изображениям. Этот атрибут является важным, когда изображение по какой-то причине не может быть отображено. Также всегда определяйте ширину и высоту изображения. Это уменьшает мерцание, поскольку браузер может резервировать пространство для изображения перед загрузкой.

Плохо:


<img src=»html5.gif»>

Хорошо:


<img src=»html5.gif» alt=»HTML5″>

Пробелы и знаки равенства

HTML5 позволяет размещать пробелы вокруг знаков равенства. Но проще читать, когда объекты сгруппированы вместе.

Плохо:


<link rel = «stylesheet» href = «styles.css»>

Хорошо:


<link rel=»stylesheet» href=»styles.css»>

Избегайте длинных строк кода

Используя редактор HTML, неудобно прокручивать влево и вправо, чтобы читать HTML-код.

Старайтесь избегать строк кода длиной больше 80 символов.

Пустые строки и отступ

Не добавляйте пустые строки без крайней необходимости.

Для удобства чтения добавляйте пустые строки для разделения больших или логических блоков кода.

Для удобства чтения добавьте два пробела отступа. Не используйте клавишу табуляции.

Не используйте ненужные пустые строки и отступы. Нет необходимости делать отступы для каждого элемента:

Не желательно:

  <h2>Famous Cities</h2>

  <h3>Tokyo</h3>

  <p>
    Tokyo is the capital of Japan, the
center of the Greater Tokyo Area,
    and the most
populous metropolitan area in the world.
    It is the
seat of the Japanese government and the Imperial Palace,
   
and the home of the Japanese Imperial Family.
  </p>

</body>

Лучше:

<h2>Famous Cities</h2>

<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>


Пример таблицы:


<table>
  <tr>
    <th>Name</th>

    <th>Description</th>

 
</tr>
  <tr>
    <td>A</td>

    <td>Description of A</td>

 
</tr>
  <tr>
    <td>B</td>

    <td>Description of B</td>
  </tr>
</table>

Пример списка:


<ul>
  <li>London</li>
  <li>Paris</li>

 
<li>Tokyo</li>
</ul>

Опускать ли <html> и <body>?

В HTML5 тег <html> и тег <body> могут быть опущены (не указываться).

Следующий код без указания body будет считаться валидным согласно спецификации HTML5:



Однако мы не рекомендуем опускать теги <html> и <body>.

Элемент <html> указывает загрузку HTML-документа. Также это рекомендуемое место для определения языка страницы:


<!DOCTYPE html>
<html lang=»en-US»>

Объявление языка страницы имеет важное значение для программ с доступностью (программы для чтения с экрана) и поисковых систем.

Опускание <html> или <body> может обрушить DOM и программное обеспечение XML.

Опускание <body> может вызвать ошибки в старых браузерах (например, IE9).

Опускать ли <head>?

В HTML5 тег <head> также может быть опущен.

По умолчанию браузеры будут добавлять все элементы, которые находятся перед <body> до <head> элемента.

Вы можете упростить HTML, опустив тег <head>:


Однако мы не рекомендуем опускать тег <head>.

Опускание тегов неизвестно для веб-разработчиков. Необходимо время, чтобы это стало основным стандартом.

Метаданные

Элемент <title> обязателен в HTML5. Необходимо указывать название страницы как можно более точным и содержательным (в соответствие из содержимым страницы). Это помогает поисковым роботам находить нужную информацию на сайте:


<title>HTML5 Syntax and Coding Style</title>


Для обеспечения надлежащей интерпретации и правильного индексирования поисковыми системами, как язык страницы, так и кодирование символов должны быть определены как можно раньше в документе:


<!DOCTYPE html>
<html
lang=»en-US»>
<head>
  <meta charset=»UTF-8″>
  <title>HTML5 Syntax and Coding Style</title>
</head>

Настройка окна просмотра — Viewport

В HTML5 появился метод, который позволил веб-дизайнерам взять под свой контроль окно просмотра с помощью тега <meta>.

Окно просмотра (viewport) — видимая область пользователя веб-страницы. Она меняется в зависимости от устройства и будет меньше на мобильном телефоне, чем на экране компьютера.

Вам следует включить следующий элемент <meta> на ваших веб-страницах:


<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

Элемент <meta> viewport предоставляет инструкции браузеру, как контролировать размеры и масштабирование страницы.

Часть width=device-width устанавливает ширину страницы, чтобы она соответствовала ширине экрана устройства (которая зависит от устройства).

Часть initial-scale=1.0 устанавливает начальный уровень масштабирования, когда страница сначала загружается браузером. Единица означает масштаб в 100%.

Вот пример веб-страницы без viewport метатега, и той же веб-страницы из viewport метатегом:

Совет: Если вы просматриваете эту страницу с помощью телефона или планшета, можно нажать две ссылки ниже, чтобы увидеть разницу.



HTML Комментарии

Короткие комментарии должны быть написани на одной строке:


<!— Это комментарий —>

Комментарии, которые охватывают более одной строки, должны быть написаны так:


<!—
  Это пример длинных комментариев. Это пример длинных комментариев.
  Это пример длинных комментариев. Это пример длинных комментариев.
—>

Длинные комментарии легче увидеть, если они имеют отступ в два пробела.

Таблица стилей

Используйте простой синтаксис для ссылки на таблицы стилей (атрибут type не является необходимым):


<link rel=»stylesheet» href=»styles.css»>

Короткие правила стиля могут быть написаны кратко:


p.intro {font-family: Verdana; font-size: 16em;}


Длинные правила стиля лучше писать на нескольких строках:


body {
  background-color: lightgrey;
  font-family: «Arial
Black», Helvetica, sans-serif;
  font-size: 16em;
  color:
black;
}


  • Разместите открывающую скобку на той же строке, что и селектор

  • Используйте один пробел перед открывающей скобкой

  • Используйте два пробела для отступа

  • Используйте точку с запятой после каждой пары свойства-значения, включая последнюю

  • Используйте всегда кавычки вокруг значений, если значение содержит пробелы

  • Поместите закрывающую скобку на новую строку, без сопутствующих пробелов

  • Избегайте строк более 80 символов

Подключение JavaScript в HTML

Используйте простой синтаксис для подключения внешних скриптов (атрибут type не нужен):



<script src=»myscript.js»>

Доступ к элементам HTML с помощью JavaScript

Следствием использования «нечистых» стилей HTML может стать ошибка JavaScript.

Эти два оператора JavaScript дадут разные результаты:



Посетите раздел JavaScript Гид по стилю на нашем сайте W3Schools на русском.

Используйте имена файлов в нижнем регистре

Некоторые веб-серверы (Apache, Unix) чувствительны к регистру имен файлов: «london.jpg» не доступен как «London.jpg».

Другие веб-серверы (Microsoft, IIS) не чувствительны к регистру: «london.jpg» доступен как «London.jpg», так и в качестве «london.jpg».

Если вы используете смесь верхнего и нижнего регистра, вы должны быть очень последовательными.

Если вы перейдете с нечувствительного к регистру сервера на чувствительный к регистру сервер, то даже небольшие ошибки сломают вашу сеть!

Чтобы избежать этих проблем, всегда используйте имена файлов в нижнем регистре.

Расширение файлов

HTML файлы всегда должны иметь расширение .html или .htm.

CSS файлы должны иметь расширение .css.

JavaScript файлы должны иметь расширение .js.

Разница между .htm и .html

Нет разницы между расширениями .htm и .html. Оба расширения веб-браузерами или веб-серверами будут рассматриваться как HTML.

Отличия культурные:

.htm «чувствуют» ранние системы DOS, где система ограничивала расширение до 3 символов.

.html «чувствуют» операционные системы Unix, которые не имеют этого ограничения.

Технические отличия

Если URL-адрес не указывает имя файла (например, https://www.w3schools.com/css/), сервер возвращает имя файла по умолчанию. Общие названия файлов по умолчанию — index.html, index.htm, default.html и default.htm.

Если ваш сервер настроен лишь для работы с «index.html» как типичным (стандартным — по умолчанию) именем файла, ваш файл должен быть назван «index.html», а не «index.htm» (или «default.html»).

Однако, серверы могут быть настроены на более чем одно имя файла по умолчанию, и обычно вы можете установить столько названий файлов по умолчанию, сколько необходимо.

Так или иначе, полное расширение для HTML-файлов .html, и нет никаких причин его не использовать.

Краткий курс HTML 5. Теги и элементы — Exlab

2. Теги и элементы

Для структурирования и оформления текста применяются теги — специальные ключевые слова, обрамленные в скобки < и >. Большинство из них имеют закрывающую пару с косой чертой «/» перед именем тега. Это позволяет обозначать определенные части текста. Например:


Код HTML: выделим <i>слово</i> курсивом
В браузере: выделим слово курсивом

Как видно из примера, в браузере теги не отображаются, но могут влиять на отображение текста.


Некоторые теги не предназначены для выделения области текста, а отвечают за какой-либо одиночный элемент документа (например, изображение или кнопку). Такие теги не требуют закрывающей пары, а косая черта «/» ставится перед закрывающей скобкой тега. Например, <br /> (перенос строки) или <hr /> (горизонтальная линия). Такие одиночные теги называют пустыми, в то время как парные — непустыми, или контейнерами.


Элементом (или узлом) называют совокупность открывающего и закрывающего тегов вместе с их содержимым, а также пустые теги. Элементы — это те кирпичики, из которых состоит документ. Для удобства чтения, состоящие из пустых тегов элементы мы будем отображать с косой чертой, а из парных — без нее.


Синтаксис и механизм представлений


Напомним, что одной из функций механизма представлений HTML 5 является обеспечение совместимости нового стандарта с уже существующими HTML/XHTML-документами. Это происходит благодаря наличию трех «режимов» (HTML5, XHTML5, DOM5 HTML) интерпретатора, каждый из которых поддерживает свой синтаксис.


Вообще говоря, стандартом HTML разрешается набирать теги в любом регистре. Кроме того, можно опускать некоторые закрывающие теги (и косую черту в одиночных тегах). В HTML 5 это тоже допустимо (синтаксис представления HTML5), но такой код не будет совместим с синтаксисом XML/XHTML, что делает затруднительным применение XML-совместимых технологий, таких как, например, микроформаты. По этой причине мы рекомендуем писать код, используя синтаксис XHTML (документ интерпретируется в представлении XHTML5). Исходя из этого и будет вестись дальнейшее изложение.


Не рекомендуется: <P>оставлять парный тег открытым.
Рекомендуется: <p>использовать строчные буквы в именах тегов</p>

Для совместимости со старыми браузерами, которые не понимают синтаксис XHTML, в одиночных тегах желательно оставлять пробел между именем и косой чертой «/», хотя это скорее полезная привычка, чем правило:


Не рекомендуется: <BR>
Рекомендуется: <br /> или <br/>

Правило вложенности тегов


Парные теги (контейнеры) могут содержать не только текст, но и другие теги. При этом действует одно правило — теги должны закрываться в порядке, обратном тому, в котором они открывались. Обратите внимание на расположение тегов в следующем примере:


Неправильно: <tag1><tag2><tag3> </tag2><tag/1></tag3>
Правильно: <tag1><tag2><tag3> </tag3><tag/2></tag1>

Чтобы запомнить это правило, представьте, будто теги — это матрешки. Вы можете положить их одну в другую, но нельзя одну половинку поместить внутри, а другую — снаружи. Это правило не относится к пустым тегам, которые попросту не имеют закрывающей пары.


Вложенные элементы называются дочерними, а те, в которые они вложены — родителями. Это относительное свойство, поскольку каждый узел может являться одновременно дочерним для одного и родителем для других. Элемент верхнего уровня (не имеющий родителей) называется корневым.


Атрибуты тегов


Любой открывающий (или пустой) тег может содержать атрибуты, определяющие некоторые дополнительные свойства всего элемента. Атрибуты прописываются сразу после имени тега, отделяясь от него и друг от друга пробелом:


<а href="http://www.example.com/" target="_blank">Ссылка на сайт</a>


В этом примере мы указали тегу <a> (гиперссылка) два атрибута. Первому (href), отвечающему за адрес ссылки, мы присвоили значение http://www.example.com/. Значение _blank атрибута target означает, что при нажатии на ссылку указанная в href страница должна открываться в новой вкладке браузера.


Некоторые атрибуты могут иметь только одно допустимое значение и всего два возможных состояния — когда атрибут присутствует в элементе и, соответственно, когда отсутствует. В этом курсе такие атрибуты, по аналогии с переменными в математике, называются булевыми. Значение булева атрибута обычно совпадает с его названием. Например, disabled="disabled". Вообщя говоря, их можно опускать, указывая только название атрибута (т. н. сокращенные атрибуты). Однако для совместимости с синтаксисом XHTML/XML значения указывать все же обязательно. Кроме того, названия всех атрибутов необходимо набирать в нижнем регистре и заключать их значения в двойные кавычки, хотя HTML 5 и не ставит такого ограничения.


Не рекомендуется: <input TYPE=text disabled>
Рекомендуется: <input type="text" disabled="disabled" />

Специальные символы


Но как быть, если в значении атрибута нужно использовать двойную кавычку? Или в тексте документа — треугольную скобку? Ведь тогда непонятно, какая из кавычек закрывает атрибут, а какая относится к его значению, и является ли скобка началом тега или это математический знак «меньше»? В этом, а также во многих других случаях на помощь приходят специальные символы HTML.


Специальные символы в HTML реализуются с помощью интерпретируемых браузером мнемокодов. Например, двойную кавычку («) можно вывести кодом &quot;, а знак евро (€) — &euro;. Все мнемокоды начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Чтобы обычный амперсанд в тексте не путался с началом мнемокода, его всегда необходимо выводить кодом &amp;. С помощью мнемокодов можно отображать даже символы UTF-8. Такие мнемокоды имеют вид &#xxxx;, где вместо xxxx указывается десятичный код символа в кодировке UTF-8. Например, &#169; отобразится как «©». Многие из символов UTF-8 имеют аналоги в виде текстовых мнемокодов. Тот же символ «©» можно обозначить вот так: &copy;.


Ниже приведены четыре наиболее важных мнемокода, которые необходимо запомнить. Остальные при необходимости можно посмотреть в таблице специальных символов HTML.


&quot;  — двойная кавычка («)
&amp;  — амперсанд (&)
&lt;  — открывающая треугольная скобка (<)
&gt;  — закрывающая треугольная скобка (>)



теги — полный список, таблица тегов по разделам

HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.

Для удобства пользования я сгруппировала теги по тематическим разделам, добавив значения свойства display для каждого тега. Чтобы перейти к таблице, кликните по рисунку.

Таблица 1. HTML-элементы
Тег Описание
<!--...--> Используется для добавления комментариев.
<!DOCTYPE> Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
<a> Создаёт гипертекстовые ссылки.
<abbr> Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title.
<address> Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
<area> Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>.
<article> Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
<aside> Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
<audio> Загружает звуковой контент на веб-страницу.
<b> Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<base> Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
<bdi> Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
<bdo> Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
<blockquote> Выделяет текст как цитату, применяется для описания больших цитат.
<body> Представляет тело документа (содержимое, не относящееся к метаданным документа).
<br> Перенос текста на новую строку.
<button> Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение.
<canvas> Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
<caption> Добавляет подпись к таблице. Вставляется сразу после тега <table>.
<cite> Используется для указания источника цитирования. Отображается курсивом.
<code> Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
<col> Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
<colgroup> Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
<data> Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.
<datalist> Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>.
<dd> Используется для описания термина из тега <dt>.
<del> Помечает текст как удаленный, перечёркивая его.
<details> Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary>.
<dfn> Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
<dialog> Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
<div> Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<dl> Тег-контейнер, внутри которого находятся термин и его описание.
<dt> Используется для задания термина.
<em> Выделяет важные фрагменты текста, отображая их курсивом.
<embed> Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset> Группирует связанные элементы в форме, рисуя рамку вокруг них.
<figcaption> Заголовок/подпись для элемента <figure>.
<figure> Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
<footer> Определяет завершающую область (нижний колонтитул) документа или раздела.
<form> Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
<h2-h6> Создают заголовки шести уровней для связанных с ними разделов.
<head> Элемент-контейнер для метаданных HTML-документа, таких как <title>, <meta>, <script>, <link>, <style>.
<header> Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<hr> Горизонтальная линия для тематического разделения параграфов.
<html> Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<i> Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe> Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
<img> Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<input> Создает многофункциональные поля формы, в которые пользователь может вводить данные.
<ins> Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
<kbd> Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
<meta> Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
<meter> Индикатор измерения в заданном диапазоне.
<nav> Раздел документа, содержащий навигационные ссылки по сайту.
<noscript> Определяет секцию, не поддерживающую сценарий (скрипт).
<object> Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег <param>.
<ol> Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
<optgroup> Контейнер с заголовком для группы элементов <option>.
<option> Определяет вариант/опцию для выбора в раскрывающемся списке <select>, <optgroup> или <datalist>.
<output> Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p> Параграфы в тексте.
<param> Определяет параметры для плагинов, встраиваемых с помощью элемента <object>.
<picture> Элемент-контейнер, содержащий один элемент <img> и ноль или несколько элементов <source>. Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
<pre> Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress> Индикатор выполнения задачи любого рода.
<q> Определяет краткую цитату.
<ruby> Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb> Определяет вложенный в него текст как базовый компонент аннотации.
<rt> Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом.
<rtc> Отмечает вложенный в него текст как дополнительную аннотацию.
<rp> Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s> Отображает текст, не являющийся актуальным, перечеркнутым.
<samp> Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
<script> Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
<section> Определяет логическую область (раздел) страницы, обычно с заголовком.
<select> Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>.
<small> Отображает текст шрифтом меньшего размера.
<source> Указывает местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio>.
<span> Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong> Расставляет акценты в тексте, выделяя полужирным.
<style> Подключает встраиваемые таблицы стилей.
<sub> Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary> Создаёт видимый заголовок для тега <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup> Задает надстрочное написание символов.
<table> Тег для создания таблицы.
<tbody> Определяет тело таблицы.
<td> Создает ячейку таблицы.
<template> Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
<textarea> Создает большие поля для ввода текста.
<tfoot> Определяет нижний колонтитул таблицы.
<th> Создает заголовок ячейки таблицы.
<thead> Определяет заголовок таблицы.
<time> Определяет дату/время.
<title> Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
<tr> Создает строку таблицы.
<track> Добавляет субтитры для элементов <audio> и <video>.
<u> Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul> Создает маркированный список.
<var> Выделяет переменные из программ, отображая их курсивом.
<video> Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
<wbr> Указывает браузеру возможное место разрыва длинной строки.

Руководство по стилям HTML и правила кодирования

Последовательный, чистый и аккуратный HTML-код облегчает другим чтение и понимание вашего кода.

Вот несколько рекомендаций и советов по созданию хорошего HTML-кода.

Всегда объявлять тип документа

Всегда указывайте тип документа в качестве первой строки в вашем документе.

Правильный тип документа для HTML:

Использовать имена элементов в нижнем регистре

HTML позволяет смешивать прописные и строчные буквы в именах элементов.

Однако мы рекомендуем использовать имена элементов в нижнем регистре, потому что:

  • Смешение прописных и строчных имен выглядит плохо
  • Разработчики обычно используют строчные имена
  • Строчные буквы выглядят чище
  • В нижнем регистре писать легче

Хорошо:

Это абзац.

Плохо:

<ТЕЛО>

Это абзац.


Закрыть все элементы HTML

В HTML нет необходимости закрывать все элементы (например, элемент

).

Однако мы настоятельно рекомендуем закрыть все элементы HTML, например:

Хорошо:

Это абзац.

Это абзац.

Плохо:

Это абзац.

Это абзац.

Использовать имена атрибутов в нижнем регистре

HTML позволяет смешивать прописные и строчные буквы в именах атрибутов.

Однако мы рекомендуем использовать имена атрибутов в нижнем регистре, потому что:

  • Смешение прописных и строчных имен выглядит плохо
  • Разработчики обычно используют строчные имена
  • Средство для чистки строчных букв
  • В нижнем регистре писать легче

Хорошо:

Посетите наше руководство по HTML

Плохо:

Посетите наше учебное пособие по HTML

Всегда указывать значения атрибутов

HTML допускает значения атрибутов без кавычек.

Однако мы рекомендуем указывать значения атрибутов в кавычках, потому что:

  • Разработчики обычно указывают значения атрибутов
  • Цитированные значения легче читать
  • Вы ДОЛЖНЫ использовать кавычки, если значение содержит пробелы

Хорошо:

<таблица >

Плохо:

Очень плохо:

Это не сработает, потому что значение содержит пробелы:

Всегда указывать высоту, ширину и высоту для изображений

Всегда указывайте атрибут alt для изображений.Этот атрибут важен, если изображение
по какой-то причине не может отображаться.

Также всегда определяйте ширину и
высота изображений. Это уменьшает мерцание, потому что браузер может зарезервировать место для
изображение перед загрузкой.

Хорошо:

HTML5

Плохо:

Пробелы и знаки равенства

HTML допускает пробелы вокруг знаков равенства.Но без пробела легче читать и
группирует сущности лучше вместе.

Хорошо:

Плохо:

<ссылка rel = "stylesheet" href = "styles.css">

Избегайте длинных строк кода

При использовании HTML-редактора НЕ удобно прокручивать вправо и влево для чтения HTML-кода.

Старайтесь избегать слишком длинных строк кода.

Пустые строки и отступы

Не добавляйте пустые строки, пробелы или отступы без причины.

Для удобства чтения добавьте пустые строки для разделения больших или логических блоков кода.

Для удобства чтения добавьте два пробела отступа. Не используйте клавишу табуляции.

Хорошо:

Знаменитые города

Токио

Токио — столица Японии,
центр Большого Токио,
и самый
густонаселенный мегаполис в мире.
Это
резиденция правительства Японии и Императорский дворец,
и дом японской императорской семьи.

Плохо:

Знаменитые города

Токио

Токио — столица Японии,
центр Большого Токио,
и самый
густонаселенный мегаполис в мире.
Это
резиденция правительства Японии и Императорский дворец,
и дом японской императорской семьи.

Хорошая таблица Пример:

Имя Описание
A Описание A
B Описание Б

Хороший список Пример:

  • Лондон

  • Париж

  • Токио

Никогда не пропускайте элемент

</h3> <p> Элемент <code> <title> </code> обязателен в HTML.</p> <p> Содержание заголовка страницы очень важно для поисковой оптимизации.<br /> (SEO)! Заголовок страницы используется алгоритмами поисковой системы для определения порядка.<br /> при включении страниц в результаты поиска. </p> <p> Элемент <code> <title> </code>: </p> <ul> <li> определяет заголовок на панели инструментов браузера </li> <li> предоставляет заголовок для страницы, когда она добавляется в избранное </li> <li> отображает заголовок страницы в результатах поисковой системы </li> </ul> <p> Итак, постарайтесь сделать заголовок максимально точным и содержательным: </p> <p> <title> HTML<br /> Руководство по стилю и правила кодирования

Пропуск

и ?

HTML-страница будет проверяться без и
теги:

Пример

Заголовок страницы

Это заголовок

Это абзац.

Попробуй сам »

Однако мы настоятельно рекомендуем всегда добавлять и
тегов!

Отсутствие может привести к ошибкам в старых браузерах.

Без и
может также привести к сбою программного обеспечения DOM и XML.

Отсутствует

?

Тег HTML также может
быть опущено.

Браузеры добавят все элементы перед к значению по умолчанию
элемент.

Пример

Заголовок страницы

Это заголовок

Это абзац.


Попробуй сам »

Однако мы рекомендуем использовать тег .

Закрыть пустые элементы HTML?

В HTML закрывать пустые элементы необязательно.

Разрешено:

<мета charset = "utf-8">

Также разрешено:

Если вы ожидаете, что программное обеспечение XML / XHTML получит доступ к вашей странице, сохраните
закрывающая косая черта (/), поскольку она требуется в XML и XHTML.

Добавить атрибут lang

Вы всегда должны включать атрибут lang
внутри тега , чтобы объявить
язык веб-страницы. Это предназначено для помощи поисковым системам и браузерам.

Пример

Заголовок страницы

Это
заголовок

Это абзац.


Попробуй сам »

Метаданные

Чтобы обеспечить правильную интерпретацию и правильную индексацию поисковой системой, как язык, так и
кодировку символов следует определить как можно раньше в документе HTML:




Заголовок страницы

Настройка окна просмотра

Область просмотра — это видимая пользователем область веб-страницы.Это зависит от устройства
— на мобильном телефоне он будет меньше, чем на экране компьютера.

Вы должны включить следующий элемент на все свои веб-страницы:

Это дает браузеру инструкции о том, как
для управления размерами и масштабированием страницы.

Часть width = device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).

Часть initial-scale = 1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с метатегом области просмотра :

Совет: Если вы просматриваете эту страницу с телефона или планшета, вы можете щелкнуть две ссылки ниже, чтобы увидеть разницу.

Комментарии HTML

Короткие комментарии следует писать в одну строку, например:

Комментарии, которые занимают более одной строки, должны быть записаны следующим образом:

Это пример длинного комментария.Это
пример длинного комментария.
Это
пример длинного комментария. Это пример с длинным комментарием.
->

Длинные комментарии легче заметить, если они имеют отступ с двумя пробелами.

Использование таблиц стилей

Используйте простой синтаксис для связи с таблицами стилей (
тип атрибут не обязателен):

Короткие правила CSS могут быть записаны в сжатом виде, например:

п.intro {font-family: Verdana; font-size: 16em;}

Длинные правила CSS должны быть записаны в несколько строк:

корпус {
background-color: светло-серый; Семейство шрифтов
: «Arial
Черный «, Helvetica, без засечек;
размер шрифта: 16em;
цвет:
чернить;
}

  • Разместите открывающую скобу на той же линии, что и селектор
  • Используйте один пробел перед открывающей скобкой
  • Используйте два пробела для отступа
  • Используйте точку с запятой после каждой пары «свойство-значение», включая последний
  • Используйте кавычки вокруг значений, только если значение содержит пробелы
  • Поместите закрывающую скобку на новую строку без пробелов в начале

Загрузка JavaScript в HTML

Используйте простой синтаксис для загрузки внешних скриптов (
тип атрибут не обязателен):