Какие теги определяют структуру html страницы

Какие теги определяют структуру html страницы

От автора: приветствую вас на блоге webformyself. Язык html, как и многие другие вещи в нашей жизни, имеет определенную структуру. В нашем случае ее закладывают специальные команды. Какие теги определяют структуру html страницы и где их нужно прописывать? Об этом я постараюсь рассказать сегодня.

Теги структуры документа html

Любой, абсолютно любой html документ имеет какие-то одинаковые фрагменты. Количество заголовоков, абзацев и списков на веб-страницах может быть разным, но есть определенные теги, которые обязательно присутствуют в исходном коде любого сайта.

<!DOCTYPE> — с этого указания начинается любой html-файл. Этот фрагмент кода используется для указания типа документа. Зачем это нужно? Дело в том, что существует несколько версий языка html, также есть его модификация. Указав доктайп, вы помогаете браузеру точно определить тип и интерпретировать код без ошибок.

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

<!DOCTYPE html>

Все, тип документа указан и можно двигаться дальше.

<html> — главный элемент-контейнер на странице, в который помещаются теги заголовка и тела страницы. Он парный и закрывается в самом-самом конце документа.

<head> — парный тег, содержащий очень важную информацию для работы веб-страницы, однако его содержимое никак не выводится на нее. В этом контейнере записывается заголовок страницы, возможно, метатеги, кодировка, подключение внешних файлов, таких, как таблицы стилей и скрипты. Вот пример того, как в head записывается кодировка:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

<body> — с точки зрения объема можно сказать, что этот блок включает в себя больше всего информации, потому что именно в нем формируется тело страницы. Это непосредственно то, что будет выведено на экран.

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

Поскольку мы дошли до тела страницы, дальше я бы хотел описать несколько тегов, которые формируют уже непосредственно видимую структуру, то есть те элементы, которые мы видим на странице и которые отделяют информацию друг от друга.

<h1> — <h6> — очень важные парные теги заголовков, которые выводятся на веб-страницу. Как правило, в h1 заключают название статьи или другой публикации, в h2 – подзаголовки, в h3 – подзаголовки подзаголовков и т.д. В крупном документе действительно могут понадобиться все эти теги.

Заголовок выводится как блочный элемент и имеет отступы сверху и снизу. Большие тексты рекомендуется разбивать на множество подзаголовков, потому что таким образом у читателя улучшается восприятие материала. Также заголовок имеет важную функцию в плане оптимизации сайта под требования поисковых систем. Ключевое слово в заголовке и подзаголовках улучшает ревелантность страницы.

<p> — формирует абзац (параграф) текста. Также очень важный элемент. Едва ли кто-то захочет читать сплошной текст, никак не разделенный на абзацы, верно?

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

Выше были описаны, пожалуй, самые основные теги, которые отвечают за структуру. Они есть у любой веб-странички. Но как вообще формируется тег и что в него входит?

Структура тега html

Давайте сразу разберемся на примере.

<h1 class = "title">Заголовок</h1>

Тут видно, что мы не просто написали <h1></h1>. В любой тег можно вписать дополнительные атрибуты. Они пишутся в открывающейся части элемента.

Сначала пишется имя самого атрибута, а потом задается его значение. В этом примере строчка class = «title» привяжет к нашему заголовку стилевой класс title, так что через него можно будет обратиться к этому элементу в css.

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

Любому html-элементу можно задавать какие-то атрибуты. Есть так называемые универсальные атрибуты, которые можно прописать любому элементу. К примеру, стилевой класс можно привязать к чему угодно. Также есть атрибуты, которые уникальны для каких-то тегов. Например:

<a href ="“#" target = "_blank"></a>

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

Итог

Из этой статьи мы с вами увидели, что есть определенные теги, без которых на веб-страничке никак не обойтись, ведь они закладывают ее структуру. Конечно, были рассмотрены лишь самые простые. К структурным тегам тела страницы можно также отнести таблицы, списки, фреймы и т.д.

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

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

Курс по HTML5: основы

Изучите HTML5 с нуля!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree