Учебники

HTML5 — синтаксис

Август 22, 2018

Язык 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 документ

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

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

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

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

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

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

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

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

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

раздел — этот тег представляет общий документ или раздел приложения. Он может использоваться вместе с h1-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"> 
         <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>

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

64
Share: