Интернетчик » site » HTML5. Веб-страница, теги и элементы

HTML5. Веб-страница, теги и элементы

HTML (абрр. HyperText Markup Language) – язык гипертекстовой разметки, используемый для структурирования и указания типа содержания (контента), а также для стилизации отображения внешнего вида веб-страницы в браузере.


  1. HTML
  2. Контент
  3. Теги HTML
  4. Парные теги
  5. Элемент HTML
  6. Непарные теги
  7. Самозакрывающиеся теги
  8. Имя тега
  9. Атрибуты тега
  10. Регистр синтаксиса HTML
  11. Семантика HTML
  12. Семантическая верстка
  13. Виды тегов HTML
    (Условное разделение)

Контент (содержание) веб-страницы – информационное наполнение, несущее смысловую нагрузку.

Теги HTML – служебные метки языка HTML, его дескрипторы (от лат. descriptor «описывающий»), предписывающие какие-либо действия браузеру по отображению содержания (контента).

Парные теги HTML Теги HTML образуют пары из открывающего <tag> и закрывающего </tag> тегов. Состоящие в паре, открывающий и закрывающий теги полностью идентичны с единственным отличием – закрывающий тег содержит перед своим именем символ слеш «/» – знак препинания «Косая черта (/)».

Элемент HTML При условии наличия отображаемого содержания, Парные теги HTML образуют html-элемент, состоящие из пары открывающего <tag> и закрывающего </tag> тегов, и содержания (контента), находящегося между ними.

Непарные теги HTML Непарные (одиночные, одинарные) теги HTML создают html-элемент без содержания (контента). Теги meta, img, link, br, hr, input, area, param, col и base никогда не имеют внутри контента, соответственно, в закрывающих тегах – не нуждаются.

Самозакрывающиеся теги Важное отступление по теме «Парные и непарные теги»: В XHTML (еще часто встречающемся языке разметки), непарные теги относятся к самозакрывающимся тегам, имеющим слеш в своем окончании: «/>».
В HTML самозакрывающихся тегов нет. Закрывать теги с помощью «/>» запрещено. В HTML, парный тег закрывают явно, с помощью конкретного закрывающего тега, замыкающего содержание html-элемента. Непарный-же тег в HTML не закрывают вовсе, поскольку у него нет содержания и закрывать там нечего.
Пример:
HTML <br>
XHTML <br />

Имя тега HTML Имя тега HTML уникально в пределах его содержащей спецификации, в нашем случае: HTML5. Имя конкретного тега определяет тип элемента, а соответственно – набор правил отображения браузером содержания элемента.

Атрибуты тегов HTML Все теги HTML, кроме закрывающих, могут содержать дополнительную информацию – атрибуты и их значения. Атрибуты управляют поведением html-элемента на странице.

Регистр синтаксиса HTML HTML не чувствителен к регистру. Предпочтительно писать код HTML в нижнем регистре (прописными буквами), либо выбирать удобный вид записи в пределах одного html-документа.

Семантика HTML Семантика HTML – соответствие имени тегов html-элемента и типа его содержания. Иными словами, в элементе списка – теги списка, в элементе абзаца – теги абзаца, для заголовка – теги заголовка, для рисунка – рисунка, и т.д., и – никак не иначе. Такой подход к разметке веб-страницы получил название: «Семантическая верстка».

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

Виды тегов HTML
Условное разделение тегов на группы: теги верхнего уровня; теги заголовка документа; блочные элементы; строчные элементы; универсальные элементы; списки; таблицы; фреймы. Рассмотрим теги, необходимые в дальнейшей работе:

  1. Теги форматирования и акцентирования текста и указания ссылок
    h1, h2, h3, h4, h5, h6 – заголовки;
    b, strong, i, em – текст;
    ul, ol, li – списки;
    a – ссылки.
  2. Теги структуры документа
    nav – навигация;
    aside – создаёт боковую панель на сайте, где размещается неосновной контент;
    header – тег для создания шапки сайта или раздела;
    section – тег для создания раздела веб-страницы;
    div – обезличенный SEO-блок;
    span – строчный элемент.
  3. Функциональные теги
    html – включает в себя всё содержимое страницы;
    body – раздел html-файла, где содержится техническая инфомрация;
    script – предназначен для создания/подключения скриптов;
    link – предназначен для подключения внешних файлов (шрифтов или стилей);
    meta – содержит информацию, предназанченную для поисковых систем и браузеров.
  4. Теги встраиваемого контента
    img – изображение;
    audio – аудиуоконтент;
    iframe – отдельная область документа, в которую можно подгружать другие независимые документы.
  5. Теги форм (для взаимодействия с пользователем)
    form, input – теги для создания формы.
  6. Теги таблиц
    table, td, tr – теги для создания таблицы.

Контроль «Конца текста» !!!