Разновидности синтаксиса 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 class="navmenu bigdesctop">. Но если мы опустим кавычки, то в качестве значения будет использоваться "navmenu", а "bigdesctop" браузер будет пытаться интерпретировать как отдельный атрибут.

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

HTML5 Validator

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

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850