Основные теги html 5 без которых не обойтись при создании современного сайта

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

Прочтение статьи даст вам четкое понимание границ между html и html 5. К тому же вы сможете оперировать полученными знаниями и верстать все свои сайты уже используя теги html 5.

Я хочу посвятить данную публикацию обсуждению html 5. Мы разберем с вами главные особенности платформы, новые элементы языка и их отличие от старых, а также рассмотрим конкретные примеры кода. А теперь перейдем непосредственно к самому соку!

Главнокомандующий разметкой сайтов, знаменитый html

После прочтения предыдущих моих публикаций, а также других источников айтишной тематики я думаю, что с уверенностью могу назвать вас «гуру-мастерами». Ведь вам не составит никакого труда рассказать, что из себя представляет язык html и для чего он был создан. Вы молодцы!

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

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

Для управления контентом сайта используются теги языка. Что же означает «тег» и для чего он нужен?

Тег – это единица языка разметки, которая способствует заданию на странице сайта определенного отображения конкретного объекта, а также указания его вида (ссылка, картинка и другое).

Элементы языка бывают одиночными и контейнерами (их еще обычно называют парными). Они различаются только тем, что парные внутри себя могут содержать другие элементы: теги или текст.

Каждый элемент обсуждаемого веб-языка имеет свой набор атрибутов. «Еще один термин? А он для чего нужен?» – спросите вы. Увы, но без терминологии никак.

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

Близкий родственник языка html

Как уже рассказывалось в предыдущих моих статьях, не стоит путать html и html 5. Html 5 хоть и в каком-то смысле «родственник» html, но это совершенно новая платформа, основная задача которой поддерживать аудио- и видеофайлы, анимации, отображение геолокаций и многое другое.

Данная спецификация оснащает веб-страницы новыми возможностями и сообщает DOM (объектная модель документа) о наличии новых объектов на ней. Это ускоряет работу загрузки страницы и упрощает работу браузеров.

Огромным преимуществом для разработчиков является то, что с появлением html 5 ничего переучивать не нужно. Он поддерживает все теги html 4 и дополняет их современными. Добавлю также к этому еще один положительный факт. С появлением таких элементов, как <video> и <audio>, отпала необходимость использовать устаревшие теги поддержки мультимедиа. К ним относятся: <bgsound>, <dir>, <rb>, <applet> и другие.

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

Семантические теги

С появлением платформы html 5 появились и семантические теги. Сейчас простым языком объясню, что это такое.

Ранее при написании веб-сервисов с удобным интерфейсом и выделением шапки сайта, его основной части и «подвала» (место внизу страницы для дополнительной информации или указания авторства) использовалась блочная верстка при помощи div-ов.

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

Эти элементы всего лишь стандартизируют основные единицы сайта едиными для всех ресурсов наименованиями тегов. К ним относятся <header>, <footer> и <nav>. <header> отвечает за определение на сайте его заголовка или заголовка текста, <footer> – за «подвал» внизу интернет-страницы, а <nav> – за навигацию сайта.

Для усвоения материала хочу, чтоб вы опробовали практический пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Ваш сайт</title>
</head>
<body>
   <header>
      <h1>Блог для айтишников</h1>
   </header>
   <nav>
      <ul>
         <li>Пункт меню 1</li>
         <li>Пункт меню 2</li>
      </ul>
   </nav>
   <article>
      <header>
         <h2>Заголовок  публикации</h2>
         <p><a href="#">Автор </a>. Всего комментариев:  6 </p>
      </header>
      <p>Текст первой статьи</p>
   </article>
   <footer>
      <p>Copyright любимый блогер</p>
   </footer>
</body>
</html>

Данный пример показывает удобство структурирования кода при помощи html 5. Хочу отметить, что на сегодняшний день уважающие себя разработчики используют в своих веб-ресурсах спецификацию html 5 и css3. Они улучшают взаимодействие браузера с сайтом, а также оптимизируют работу поисковых роботов.

Ну что ж. Я рассказал все, что вам нужно знать на начальных стадиях изучения языка html. Если вы узнали что-то новое для себя, то подписывайтесь на обновления моего блога и делитесь ссылочкой с друзьями. Пока-пока!

С уважением, Роман Чуешов