HTML структура документа

HTML структура документа

Здравствуйте, дорогие друзья!

Рассмотрим что представляет собой html структура документа, какие основные разделы обязательно должна иметь web-страница и за что отвечает каждый из разделов.

Навигация по статье:

Любая HTML-страница имеет следующую структуру:

Давайте более подробно рассмотрим основные теги составляющие структуру HTML-документа.

< !DOCTYPE html >

DOCTYPE служит для того чтобы дать браузеру понять с каким типом документа он имеет дело и как интерпретировать последующее содержимое документа.
Данный тег используется один раз в самом начале страницы.

HTML

<HTML> …</HTML> является главным (корневым) тегом в документе и показывает браузеру что все находящиеся внутри него теги представляют собой единую HTML-страницу.
В самом начале документа тег открывается <HTML>, а в самом конце должен закрыться </HTML>.

Раздел HEAD

<head>…</head> — здесь указывается техническая информация об HTML документе, такая как кодировка документа, метатеги, подключаются CSS стили и скрипты JavaScript. Данный раздел предназначен в первую очередь для браузера и поисковых систем. На самой странице содержимое этого раздела не отображается, за исключением тега <title>, его содержимое выводится в строке заголовка окна или вкладки браузера.

HTML структура документа


В разделе head могут находиться следующие HTML-теги:

  1. 1 <title>… </title> — тег заголовка. В нём выводится название страницы, которое отображается в строке заголовка окна браузера, а так же индексируется поисковыми системами.
  2. 2 <meta charset= «utf-8»> — указывает браузеру кодировку HTML-документа, если он отсутствует или кодировка задана неверно, то на странице вместо текста вы увидите крокозяблики.
    На данный момент большинство сайтов используют кодировку utf-8 или Windows-1251.
  3. 3 <meta name= «description» content= «…»> — данный тег используется для передачи поисковым системам короткого описания страницы, которое может отображаться в снипете поисковой выдачи.
  4. 4<meta name= «keywords» content= «…»> — здесь вместо трёх точек выводится список ключевых слов, которые используются на странице, через запятую. Делается это главным образом для поисковых систем, однако в настоящее время поисковые системы не обращают внимания на это поле, поэтому SEO специалисты спорят по поводу целесообразности использования этого метатаега.
  5. 5 <meta name= «robots» content= «index, follow»> — тег используется для поисковых роботов чтобы закрыть или открыть для индексации определённые страницы сайта, а так же разрешить или запретить им переход по ссылкам и некоторые другие параметры.

    Примеры использования:

    <meta name= «robots» content= «index, follow»> — индексация открыта, переход по ссылкам разрешен.

    <meta name= «robots» content= «index, nofollow»> — индексация открыта, переход по ссылкам запрещён.

    <meta name= «robots» content= «noindex, nofollow»> — индексация закрыта, переход по ссылкам запрещён.

  6. 6 <link rel= «stylesheet» type= «text/css» href= «style.css»> — подключаем к HTML-документу таблицу стилей.
    Более подробно о способах подключения CSS к HTML я писала в отдельной статье:

    «Как css подключить к html?»

  7. 7 <script src= «script.js»></script> — подключение скриптов и библиотек к HTML-документу.

Раздел BODY

В данном разделе прописывается HTML структура страницы, которая будет отображаться в браузере.
Он открывается после закрытия раздела head и закрывается в конце документа. Всё что находится внутри тега body будет отображаться на странице.

Здесь для формирования структуры обычно используются следующие HTML теги:

  1. 1 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> — заголовки разных уровней. H1 – основной заголовок, он обычно используется в начале страницы для задания главного заголовка и имеет приоритет в глазах поисковых систем. Этот заголовок по умолчанию отображается на странице самым крупным, размер шрифта и приоритет всех последующих заголовков уменьшается.
    Данный тег является закрывающимся:

    HTML заголовки
  2. 2 <div> — тег используется для формирования блоков или контейнеров из которых состоит вся HTML-страница.
    Так же является закрывающимся и обычно имеет атрибуты class и/или ID.

    Блоки DIV   в HTML документе
  3. 3 <a href=”#”> — тег ссылки. Служит для перехода на другую страницу или сайт. Адрес страницы на которую нужно перейти указывается в атрибуте href вместо #.
  4. 4 <p> — отвечает за формирование абзацев. Всё что находится между <p> и </p> будет отображаться как отдельный абзац.
  5. 5 <img src=”#”> — вставка изображения. Данный тег не нужно закрывать, главное указать в атрибуте src вместо символа # путь к изображению (его адрес).
  6. 6 <table>…</table> — служит для создания таблиц в HTML-документе.
  7. 7 <ol>…</ol> и <ul>…</ul>— нумерованные и маркированные списки. Часто используются для создания навигации по странице или сайту, а так же формирования структуры.
  8. Если вы ещё не работали с этими списками, то вам могут пригодиться эти статьи:
    Как сделать красивый маркированный список HTML?
    Как сделать красивый нумерованный список HTML?

Конечно же это далеко не все теги HTML, я рассмотрела только самые основные, без который в 99% случаев не обходится создание ни одной страницы сайта. Существует ещё много других тегов, служащих для оформления текста или формирования структуры HTML страницы.

Вот статья с подробным описанием тегов для оформления текста:
«HTML теги для текста»

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

Успехов Вам и Вашим проектам!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

1 комментарий

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

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

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif