HTML5 - Синтаксис

Язык 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>

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

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

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

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

Тег <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, link, meta, и т.д.

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

Атрибуты HTML5

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

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

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

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

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

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

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

Документ HTML5

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

section- Этот тег представляет собой общий документ или раздел приложения. Его можно использовать вместе с h1-h6 для обозначения структуры документа.
article - Этот тег представляет собой независимую часть содержимого документа, например запись в блоге или газетную статью.
aside - Этот тег представляет собой часть контента, которая лишь незначительно связана с остальной частью страницы.
header - Этот тег представляет заголовок раздела.
footer - Этот тег представляет собой нижний колонтитул раздела и может содержать информацию об авторе, информацию об авторских правах и так далее.
nav - Этот тег представляет собой раздел документа, предназначенный для навигации.
dialog - Этот тег можно использовать для разметки разговора.
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>

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <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>

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