В XHTML работают определенные правила написания кода. В HTML они либо вообще не поддерживаются, либо являются опциональными. Пятая же версия поддерживает оба варианта написания кода. Но при создании разметки придерживайтесь эти правил.
1. Разметка пишется в нижнем регистре.
Все теги элементов и атрибуты в XHTML записываются в нижнем регистре. Лучше делать это и в HTML5.
2. Атрибуты нужно заключать в кавычки.
Все значения атрибутов в XHTML должны быть заключены в одиночные или двойные кавычки. В HTML5 такое требование есть лишь к тем значениям, которые содержат специальные символы или пробелы.
3. Все элементы нужно закрывать.
Каждому открывающему тегу в XHTML должен соответствовать закрывающий. Пустые элементы делайте самозакрывающимися. Некоторые теги в HTML5 можно не закрывать, но лучше это делать, чтобы сократить количество символов и файлов для мобильной среды.
4. Нужно вложить все элементы.
Если вы начинаете тег <a>, а затем начинаете тег <strong> (то есть вкладываете его в <a>), то сначала потребуется закрыть тег </strong>, а потом — тег </a>.
5. Необходимо указывать значения для всех атрибутов, которые не являются логическими.
По правилам XHTML все атрибуты должны записываться в коде как пары «атрибут/значение», это касается даже логических значений. В XHTML опция, действующая по умолчанию, должна записываться как selected="selected".
Такой код в HTML5 можно упростить и записать selected без указания логических атрибутов.
Не рекомендуется указывать пустую строку ="" для логического или другого атрибута. Значение нужно указывать всегда. Использование пустых строк влечет за собой незапланированные последствия.
6. Подбирайте для решений такой элемент, чья семантика точно соответствует задаче.
В XHTML разметка создается по семантическому принципу. Формы и таблицы не включают в абзацы. Элементы форм фразовые, поэтому содержатся в семантическом блочном элементе: ячейке таблице или абзаце. Разумеется, все содержимое может находиться в элементах div и span. Если заголовок – это заголовок, лучше использовать тег <h1-6>.
Важные компоненты
Страница должна быть написана на валидном XHTML и содержать пять обязательных компонентов:
- объявление типа документа (DTD);
- корневой элемент HTML — <html></html>;
- заголовок документа, прямой потомок html — <head></head>;
- заглавие документа, находящееся в заголовке, — <title></title>;
- тело документа, прямой потомок html — <body></body>.
Вот минимальный код:
Иными словами, вот минимальный код, который должен присутствовать в до кументе HTML5, использующем синтаксис XHTML:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>Пустойдокумент</title>
- </head>
- <body>
- </body>
- </html>
Компонент сообщает браузеру, какой синтаксис используют для написания разметки, чтобы ему было понятно, как обрабатывать его.
Типы страницы и объявления типов документов
- HTML 4.01 Transitional - http://www.w3.org/TR/HTML 4/loose.dtd">
- HTML 4.01 Strict - http://www.w3.org/TR/HTML 4/strict.dtd">
- XHTML 1.0 Transitional - http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
- XHTML 1.0 Strict - http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
- XHTML 1.1 - http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
- HTML5 - <!DOCTYPE html>
<html>
Корневой элемент HTML-документа. В синтаксисе XHTML обязателен. Опционален в HTML5.
Если хотите писать код, соответствующий стандартам, лучше написать элемент. В <html> вкладывают два дочерних элемента <head> и <body>. Можно включить атрибут lang.
<head>
Содержит важную информацию, которая не отображается в окне браузера. Контент не выводится на экран. Пользователь видит лишь содержимое элемента <title>, который обязателен в валидном документе HTML5. Пользователь видит это заглавие только в названии вкладки или в другом элементе окантовки окна браузера.
<head> - родитель для обязательного <title> и опциональных <style>, <script>, <link>, <meta> и <base>.
<title>
Элемент обязателен и должен сопровождаться закрывающим тегом </title>. Без него страница не пройдет валидацию.
Контент метатега <title> обязан определять общее содержимое элемента. Имеет первостепенно значение для поисковых ботов.
Обратите внимание на то, как контент выглядит в заголовке браузера на экране смартфона.
<body>
Контент, который отображается на странице должен находиться в элементе <body>. В HTML5 он не имеет никаких презентационных атрибутов, которые присутствовали в HTML 4 (типа align и bgcolor, и средств для окрашивания ссылок и фона. Функции этих атрибутов лучше реализуются в CSS.
Каркасный документ на HTML5 должен выглядеть так:
- <!DOCTYPE html>
- <html>
- <meta charset="UTF-8"/>
- <head>
- <title>Моя первая веб-страница на HTML5</title>
- </head>
- <body>
- </body>
- </html> .
Вы создали совершенно пустую страницу из шести компонентов. Если подобрать содержимое для <title> верно, то поисковику будет проще вас найти.
Можно обойтись и:
<!DOCTYPE html>
<meta charset="utf-8"><title>Моя первая веб-страница на HTML5</title>
<p>Привет, мир!