HTML5. Веб-страница, теги и элементы
HTML (абрр. HyperText Markup Language) – язык гипертекстовой разметки, используемый для структурирования и указания типа содержания (контента), а также для стилизации отображения внешнего вида веб-страницы в браузере.
- HTML
- Контент
- Теги HTML
- Парные теги
- Элемент HTML
- Непарные теги
- Самозакрывающиеся теги
- Имя тега
- Атрибуты тега
- Регистр синтаксиса HTML
- Семантика HTML
- Семантическая верстка
- Виды тегов 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
Условное разделение тегов на группы: теги верхнего уровня; теги заголовка документа; блочные элементы; строчные элементы; универсальные элементы; списки; таблицы; фреймы. Рассмотрим теги, необходимые в дальнейшей работе:
- Теги форматирования и акцентирования текста и указания ссылок
h1, h2, h3, h4, h5, h6 – заголовки;
b, strong, i, em – текст;
ul, ol, li – списки;
a – ссылки. - Теги структуры документа
nav – навигация;
aside – создаёт боковую панель на сайте, где размещается неосновной контент;
header – тег для создания шапки сайта или раздела;
section – тег для создания раздела веб-страницы;
div – обезличенный SEO-блок;
span – строчный элемент. - Функциональные теги
html – включает в себя всё содержимое страницы;
body – раздел html-файла, где содержится техническая инфомрация;
script – предназначен для создания/подключения скриптов;
link – предназначен для подключения внешних файлов (шрифтов или стилей);
meta – содержит информацию, предназанченную для поисковых систем и браузеров. - Теги встраиваемого контента
img – изображение;
audio – аудиуоконтент;
iframe – отдельная область документа, в которую можно подгружать другие независимые документы. - Теги форм (для взаимодействия с пользователем)
form, input – теги для создания формы. - Теги таблиц
table, td, tr – теги для создания таблицы.
Контроль «Конца текста» !!!