Современные HTML семантические элементы

1. Зачем использовать семантические элементы?
2. Структурный, не стилистический
3. Самый важный SEO тег
4. тег <aside>
5. Вы не можете сломать меня!
6. Резюме
7. Ресурсы

Эта статья является частью серии для начинающих веб-разработчиков. Серия предназначена для людей, которые хотели бы начать серьезную веб-разработку, а также для тех, кто уже является веб-разработчиком и хочет закрепить свои знания основ, возможно, заполняя некоторые пробелы. Если вы обнаружите, что возитесь с HTML, CSS или Javascript до тех пор, пока не начнете работать, эта серия для вас. Материал этой серии тесно связан с моим курсом Coursera.

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

Обо всем по порядку. Что означает слово семантический ?

se • man • tic Отношение к значению в языке или логике

Другими словами, называть что-то семантическим означает, что имя передает какое-то внутреннее значение.

Например, если кого-то зовут Джон , это мало о нас говорит. Но если мы назовем его « Мухи как ветер» , скорее всего, он быстрый наездник (из лошадей / автомобилей / самолетов). Weeeeee! 😂

В этом смысл семантики в целом. А как насчет HTML?

семантический элемент html Элемент, который подразумевает некоторое значение для содержимого

Другими словами, семантический элемент говорит вам кое-что о контенте, который он окружает.

То, что он говорит вам (то есть его значение ), может относиться к важности содержимого в документе или, возможно, к описанию этого содержимого.

Зачем использовать семантические элементы?

Одна из причин использования семантических элементов заключается в том, что ваш HTML становится более читабельным.

Глядя на фрагмент содержимого, окруженный тегом <div>, трудно определить назначение содержимого. Возьмите тот же контент, окруженный тегом <footer>, и мне больше не нужно объяснять его назначение. Это просто подразумевается тегом <footer>.

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

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

Семантические элементы в HTML могут дать подсказкам сканеру смысл содержимого.

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

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

Если вы продаете бумажные шапки (папье-маше), вы хотите, чтобы ваша веб-страница отображалась близко к 10 лучшим результатам в Google, когда кто-то ищет бумажные шапки, то есть имеет высокий рейтинг.

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

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

Вы можете найти много обсуждений на эту тему, если вы Google сделать семантические теги HTML помогают SEO ».

Структурный, не стилистический

Я продолжаю разбрасывать термин « значение» . Я хочу уточнить значение этого значения и что я имею в виду под ним. 😂

В одной из первых статей этой серии под названием Что такое HTML Я объяснил, что среди трех технологий, которые управляют сетью (HTML, CSS и Javascript), работа HTML заключается в передаче структуры веб-страницы.

Даже с введением семантических элементов это не изменилось!

Когда мы говорим о значении семантических элементов, мы всегда говорим о структурном значении документа .

Хотя нижний колонтитул документа обычно отображается внизу страницы, тег <footer> этого не требует. Он просто определяет содержимое, которое он окружает, как тип содержимого нижнего колонтитула документа. Возможно, он содержит ссылки или заметки, связанные с основным содержанием.

Место появления нижнего колонтитула в значительной степени зависит от стиля CSS.

Ниже приведен пример HTML-документа, демонстрирующего использование тегов заголовков (headings.html):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Элементы заголовков </ title> </ head> < body> <h1> Это основной заголовок </ h1> <h2> Подзаголовок 2 </ h2> <h3> Подзаголовок 3 </ h3> <h4> Подзаголовок 4 </ h4> <h5> Подзаголовок 5 </ h5> <h6> Подзаголовок 6 </ h6> </ body> </ html>

Простой документ!

Как видите, он имеет все доступные элементы заголовка, начиная с h1 до h6.

Номер в заголовке h передает значение этого заголовка по отношению к другим элементам заголовка. Заголовок <h1> является наиболее важным. <H6> является наименее важным.

Давайте посмотрим, как этот документ выглядит в браузере:

Вы можете видеть, что самый важный контент заголовка (внутри <h1>) отображается самым крупным шрифтом. Содержимое <h2> отображается чуть меньшим шрифтом и т. Д. Вплоть до наименьшего шрифта содержимого <h6>.

Подождите минуту! Разве нельзя делать стилизацию в CSS?

Правильный! Фактически, то, что вы видите как большие и меньшие шрифты, является стилем CSS по умолчанию, который браузер достаточно хорош, чтобы предоставить нам «из коробки».

Однако вам никогда не следует полагаться на эти стили браузера по умолчанию, чтобы просто использовать элементы h для управления размером шрифта и жирностью текста!

Эти элементы (h1-h6) предназначены только для передачи структуры HTML-страницы. Ничего более! С помощью CSS обычный тег <div> может быть стилизован под любой из этих тегов заголовка.

Итак, вы спросите, почему бы тогда просто не использовать тег <div> вместо этих тегов h?

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

Самый важный SEO тег

Содержимое, окруженное тегом <h1>, очевидно, является наиболее важным и обобщенным описанием содержимого HTML-страницы.

Ранее я упоминал, что эксперты по SEO не согласны с эффективностью семантических тегов в повышении рейтинга страницы.

Однако все согласны с тем, что когда речь идет о тегах заголовков, в частности теге <h1>, крайне важно использовать его и использовать его правильно.

Хотя вы можете технически использовать тег <h1> столько раз, сколько захотите, обычно его следует использовать только один раз для каждого HTML-документа. Чтобы повысить рейтинг страницы SEO, она также должна содержать формулировку, которая действительно передает центральную тему остальной части контента.

Это причина, по которой вы видите действительно длинные и описательные названия продуктов, когда вы делаете покупки на amazon.com ,

Например, это скриншот чехол для iPhone 8 на Amazon.com :

Обратите особое внимание на ту часть страницы, которую я пометил красным. Выглядит слишком описательно, не так ли?

Похоже, продавец пытается подобрать все возможные ключевые слова об этом чехле для iPhone.

Давайте используем GDT или G oogle D eveloper T ools (уже являющиеся частью браузера Chrome) и посмотрим на тег, который Amazon использует для обозначения названия продукта.

Щелкните правой кнопкой мыши в любом месте текста названия продукта чехол для айфона и выберите опцию Inspect:

Не удивительно! Это тег <h1>!

Теперь вы можете понять, почему продавец почувствовал необходимость втиснуть так много ключевых слов в название продукта. Они пытаются оптимизировать свою страницу продуктов Amazon для более высокого рейтинга в поисковых системах.

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

Со всей серьезностью, Google, как известно, наказывает страницу, если обнаруживает попытку размещения поисковых систем вместо пользователей. 🤔

Давайте изучим еще несколько семантических тегов HTML. Взгляните на пример кода ниже (semantic-elements.html):

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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Элементы заголовка, навигации, раздела, статьи, отступа и нижнего колонтитула </ title> </ head> <body> <header> элемент заголовка - отправляется некоторая информация заголовка Вот. Обычно состоит из логотипа компании, какой-либо метки и т. Д. Иногда в заголовке также содержится навигация. Элемент <nav> nav (сокращение от навигации) - обычно содержит ссылки на различные части веб-сайта. </ nav> </ header> <h1> Главный заголовок страницы (трудно не иметь его) </ h1> <section> <h2> Раздел 1 </ h2> <article> Статья 1 </ article> <article > Статья 2 </ article> <article> Статья 3 </ article> </ section> <section> <h2> Раздел 2 </ h2> <article> Статья 4 </ article> <article> Статья 5 </ article> <article> Article 6 </ article> <div> Обычный элемент DIV </ div> </ section> <aside> ASIDE - Некоторая информация, относящаяся к основной теме, то есть связанные посты. </ aside> <footer> JHU Copyright 2015 </ footer> </ body> </ html>

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

Тег <header> обычно содержит некоторый логотип вместе со строкой тега, то есть некоторую информацию о брендинге. Он также может содержать центральные навигационные ссылки сайта. Они обычно заключены в тег <nav>, как в нашем примере выше.

После знакомого тега <h1> есть пара наборов тегов <section>, каждый из которых содержит несколько тегов <article>.

Элемент section представляет общий раздел документа. Это тематическая группировка контента, обычно с некоторым заголовком.

Вы можете сказать, что статьи 1, 2 и 3 в Разделе 1 так или иначе связаны друг с другом и отличаются в совокупности от статей 4, 5 и 6 в Разделе 2 .

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

В реальном примере простой контент, такой как Статья 1, Статья 2 и т. Д., Не имеет смысла размещать внутри тега <article>. Я поместил это здесь просто для краткости.

тег <aside>

Тег <aside> говорит сам за себя. 😀

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

Вам не нужно заходить слишком далеко, чтобы увидеть пример реального использования тега <aside>. Этот сайт (ClearlyDecoded.com) использует его для отделения некоторой связанной информации от основного контента:

Другим понятным тегом является тег <footer>. Обычно он содержит ссылки на связанные документы, данные об авторских правах и т. Д.

Давайте посмотрим на нашу страницу примера (semantic-elements.html) в браузере:

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

Если вы не помните разницу между элементом уровня блока и встроенным элементом, см. Мою статью под названием Модели содержимого HTML ,

Вы не можете сломать меня!

Важно помнить, что семантическая природа этих тегов не имеет ничего общего с проверкой HTML.

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

Иногда это просто не имеет никакого смысла, как в случае замены содержимого верхнего и нижнего колонтитула. В других случаях это может иметь смысл. Например, у вас может быть один тег <article>, содержащий статью с несколькими разделами, разделенными с помощью тегов <section>.

Тем не менее, в большинстве случаев рекомендуется следовать рекомендациям стандарта HTML в отношении того, какой тип контента должен быть в каждом семантическом элементе. (См. Раздел Ресурсы ниже.)

Резюме

Давайте кратко изложим то, что мы рассмотрели в этой статье:

• Семантический элемент HTML подразумевает некоторое значение для содержимого, которое он переносит
• Используйте семантические теги, чтобы улучшить читабельность вашего кода людьми и, возможно, улучшить рейтинг страницы SEO
• Семантические теги передают структурное значение, они не должны использоваться из-за их стилей браузера по умолчанию
• Из всех тегов заголовков обязательно используйте тег h1, обычно только один раз для каждого документа и с содержимым, которое точно передает основную тему страницы.
• header, nav, section, article, aside, footer, h1-h6 по умолчанию считаются элементами уровня блока
• Семантические теги не влияют на проверку HTML

Ресурсы

Вопросы?

Если что-то не понятно о том, что я написал в этой статье , пожалуйста, спросите в комментариях ниже!