Найти в Дзене

Основные теги HTML. Часть 1

Привет!

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

Думаю, что эта статья станет первой частью разбора всех самых используемых тегов. Потребляя информацию небольшими порциями, мы лучше усваиваем её.

Начнём с той группы тегов, которая создаёт основную структуру html-документа.

  1. <!DOCTYPE html>
    Указывает браузеру на тип документа, в нашем случае это html. Этот тег всегда располагается самым первым, т.е. находится в самом верху файла. Он обязательный и одинарный, т.е. закрывающих угловых скобочек ему не требуется.
  2. <html lang="ru"> здесь прописываются все остальные теги </html>
    Данный тег оборачивает в себя все остальные теги. Он самый главный. Этот тег обладает атрибутом lang (сокращение от английского language), который позволяет указать браузеру язык, на котором написан текст данной страницы. В данном примере указан русский язык (ru).
  3. <head> ...</head>
    Содержит в себе что-то вроде документации о странице. Как будто паспорт данного сайта. В нём подключаются скрипты и стили. Указывается кодировка и заголовок документа. Всё это можно будет посмотреть на схеме в конце статьи.
  4. <meta charset="UTF-8">
    Тег meta содержит в себе атрибут charset, которому присваивается значение кодировки. В нашем случае это UTF-8. Именно в этой кодировке будет открыт наш сайт и все символы будут отображены корректно.
  5. <title>...</title>
    В title прописывается название сайта или страницы. Именно это и будет отображаться на вкладке в браузере, когда пользователь будет взаимодействовать с сайтом.
  6. <link rel="stylesheet" type="text/css" href="style.css">
    С помощью link можно соединить html и css. В атрибутах указывается вспомогательная для браузера информация. Главным тут является атрибут href, который содержит путь к стилям.
  7. <script src="script.js"></script>
    Этот тег предоставляет возможность прописать скрипты на JavaScrip прям в html, но это плохая практика, поэтому весь JS выносят в отдельный файл, как и стили. Так просто легче ориентироваться. Но с помощью этого же тега <script> можно подключить внешние скрипты, поместив путь к файлу в атрибут src.
  8. <body> тут весь основной контент </body>
    Body - это тег, содержащий весь основной пользовательский контент. Это, так называемое, тело сайта.

Думаю, что на сегодня достаточно. Мозгу нужно время, чтобы переработать полученную информацию ) P.S. схема сайта внизу, как и обещала)
Удачи!

Вот так выглядит схема сайта из тех тегов, что мы сегодня разобрали
Вот так выглядит схема сайта из тех тегов, что мы сегодня разобрали