Разное

Html семантические теги: Семантические элементы HTML5

05.10.2018

Содержание

Информация | Учебник HTML | schoolsw3.com

HTML — это стандартный язык разметки для создания Веб страниц.

Что такое HTML?

  • HTML расшифровывается как Гипертекстовый Язык Разметки
  • HTML — код описывает структуру веб страниц с помощью разметки
  • HTML — элементы являются строительными блоками страниц HTML
  • HTML — элементы представляют теги
  • HTML — теги содержат, «Заголовок», «Параграф», «Таблицы» и т.д.
  • Браузеры не отображают теги HTML, они используют их для вывода содержимого страницы

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

Пример




HTML пример

<h2>Мой первый заголовок</h2>
<p>Мой первый параграф.</p>

</body>
</html>

Редактор кода »

Объяснение примера

  • <!DOCTYPE html> — декларация, определяет документ HTML5
  • <html> — элемент, является корневым элементом HTML страницы
  • <head> — элемент, содержит метаинформацию о документе
  • <title> — элемент, задает заголовок документа
  • <body> — элемент, содержит видимый контент страницы
  • <h2> — элемент, определяет большой заголовок
  • <p> — элемент, определяет параграф

Что такое HTML элемент?

HTML элемент определяется начальным тегом, некоторым содержимым и конечным тегом:

<tagname>Контент находится здесь…</tagname>

HTML элемент это все от начального тега до конечного тега:

<h2>Мой первый заголовок</h2>

<p>Мой первый параграф.</p>

Начальный тег Содержимое элемента Конечный тег
<h2> Мой первый заголовок </h2>
<p> Мой первый параграф. </p>
<br> нет нет

Примечание: Некоторые HTML элементы не имеют содержимого (например, элемент <br> ). Эти элементы называются пустыми элементами. Пустые элементы не имеют конечного тега!

Веб Браузеры

Цель веб-браузеров (Chrome, IE, Firefox, Safari) — чтения HTML документов и их отображения.

Браузер не отображает HTML теги, он использует их, чтобы определить, как отобразить документ:

HTML Структура страницы

Ниже представлена визуализация структуры страницы HTML:

<html> <head>

<title>Заголовок страницы</title>

</head> <body>

<h2>Это заголовок</h2>

<p>Это параграф.</p>

<p>Это еще один параграф.</p>

</body> </html>

Примечание: Содержание находящаяся внутри <body> (в белой секции выше), будет отображаться в браузере.

HTML история

С первых дней существования Всемирной паутины существовало множество версий HTML:

Этот учебник соответствует последнему стандарту HTML 5.

Теги по категории | Справочник HTML

= новый в HTML5.

Тег Описание
<!DOCTYPE>  Определяет тип документа
<html> Определяет документ в HTML
<head> Определяет информацию о документе
<title> Определяет название для документа
<body> Определяет тело документа
<h2> до <h6> Определяет заголовки
<p> Определяет параграф
<br> Вставляет разрыв строки
<hr> Определяет тематическое изменение в содержании
<!—…—> Определяет комментарий
Тег Описание
<acronym> Не поддерживается в HTML5. Лучше используйте <abbr>.
Определяет акроним
<abbr> Определяет аббревиатуру или акроним
<address> Определяет контактную информацию для автора/владельца из документа/статьи
<b> Определяет полужирный текст
<bdi> Изолирует часть текста, которая может быть отформатирована в другом направлении, от другого текста за его пределами
<bdo> Переопределяет текущее направление текста
<big> Не поддерживается в HTML5. Лучше используйте CSS.
Определяет большой текст
<blockquote> Определяет раздел, заключенный в кавычки из другого источника
<center> Не поддерживается в HTML5. Лучше используйте CSS.
Определяет центрированный текст
<cite> Определяет название из работы
<code> Определяет часть из компьютерного кода
<del> Определяет текст, который был удален из документа
<dfn> Представляет определяющий экземпляр термина
<em> Определяет подчеркнутый текст
<font> Не поддерживается в HTML5. Лучше используйте CSS.
Определяет шрифт, цвет и размер текста
<i> Определяет часть текста альтернативным голосом или настроением
<ins> Определяет текст, вставленный в документ
<kbd> Определяет ввод с клавиатуры
<mark> Определяет выделенный / выделенный текст
<meter> Определяет скалярное измерение в известном диапазоне (датчик)
<pre> Определяет форматированный текст
<progress> Представляет ход выполнения задачи
<q> Определяет короткую цитату
<rp> Определяет, что показывать в браузерах, которые не поддерживают аннотации ruby
<rt> Определяет объяснение/произношение символов (для Восточно-Азиатской типографии)
<ruby> Определяет аннотацию ruby (для Восточно-Азиатской типографии)
<s> Определяет текст, который больше не является правильным
<samp> Определяет пример вывода из компьютерной программы
<small> Определяет меньший текст
<strike> Не поддерживается в HTML5. Лучше используйте <del> или <s>.
Определяет зачеркнутый текст
<strong> Определяет строгий текст
<sub> Определяет подстрочный текст
<sup> Определяет надстрочный текст
<template> Определяет шаблон
<time> Определяет дату/время
<tt> Не поддерживается в HTML5. Лучше используйте CSS.
Определяет текст телетайпа
<u> Определяет текст, который должен стилистически отличаться от обычного текста
<var> Определяет переменную
<wbr> Определяет возможный разрыв строки
Тег Описание
<form> Определяет форму HTML для пользовательского ввода
<input> Определяет ввод управления
<textarea> Определяет многострочный ввод (текстовое поле)
<button> Определяет кликабельную кнопку
<select> Определяет раскрывающийся список
<optgroup> Определяет группу связанных параметров в раскрывающемся списке
<option> Определяет параметр в раскрывающемся списке
<label> Определяет метку для элемента <input>
<fieldset> Группирует связанные элементы в форме
<legend> Определяет заголовок для элемента <fieldset>
<datalist> Задает список предопределенных параметров для элементов управления вводом
<output> Определяет результат вычисления
Тег Описание
<frame> Не поддерживается в HTML5.
Определяет окно (фрейм) в наборе кадров
<frameset>
Не поддерживается в HTML5.
Определяет набор фреймов
<noframes> Не поддерживается в HTML5.
Определяет альтернативное содержимое для пользователей, не поддерживающих фреймы
<iframe> Определяет встроенный фрейм
Тег Описание
<img> Определяет изображение
<map> Определяет клиентскую карту изображений
<area> Определяет область внутри изображения карты
<canvas> Используется для рисования графики по ходу, с помощью скриптов (обычно код JavaScript )
<figcaption> Определяет заголовок для элемента <figure>
<figure> Задает автономное содержимое
<picture> Определяет контейнер для нескольких ресурсов изображений
<svg> Определяет контейнер для графики SVG
Тег Описание
<audio> Определяет звук контента
<source> Определяет несколько ресурсов мультимедиа для элементов медиа (<video>, <audio> и <picture>)
<track> Определяет текстовые дорожки для элементов медиа (<video> и <audio>)
<video> Определяет видео или фильм
Тег Описание
<a> Определяет гиперссылку
<link> Определяет связь между документом и внешним ресурсом (наиболее часто используемым для связи с таблицами стилей)
<nav> Определяет навигацию ссылок
Тег Описание
<ul> Определяет неупорядоченный список
<ol> Определяет упорядоченный список
<li> Определяет элемент списка
<dir> Не поддерживается в HTML5. Лучше используйте <ul>.
Определяет каталог списка
<dl> Определяет описание списка
<dt> Определяет термин/имя в списке описания
<dd> Определяет описание термина/имени в списке описания
<menu> Определяет список/меню команд
<menuitem> Определяет команду/меню, которые пользователь может вызвать из всплывающего меню
Тег Описание
<table> Определяет таблицу
<caption> Определяет заголовок в таблицы
<th> Определяет заголовк ячейки в таблице
<tr> Определяет строку в таблице
<td> Определяет ячейку в таблице
<thead> Группирует содержимое заголовка в таблице
<tbody> Группирует содержимое тела в таблице
<tfoot> Группирует содержание нижнего колонтитула в таблице
<col> Задает свойства столбца для каждого столбца в элементе <colgroup>
<colgroup> Задает группу из одного или нескольких столбцов в таблице для форматирования
Тег Описание
<style> Определяет информацию о стиле документа
<div> Определяет контейнер в документе
<span> Определяет промежуток в документе
<header> Определяет заголовок документа или раздела
<footer> Определяет нижний колонтитул для документа или раздела
<main> Определяет основное содержание документа
<section> Определяет раздел в документе
<article> Определение статьи
<aside> Определяет содержимое из содержимого страницы
<details> Определяет дополнительные сведения, которые пользователь может просмотреть или скрыть
<dialog> Определяет диалоговое окно или окно
<summary> Определяет видимый заголовок элемента <details>
<data> Связывает данный контент с машиночитаемым переводом
Тег Описание
<head> Определяет информацию о документе
<meta> Определяет метаданные о документе HTML
<base> Задает базовый URL/цель для всех относительных URL адресов в документе
<basefont> Не поддерживается в HTML5. Лучше используйте CSS.
Задает цвет, размер и шрифт по умолчанию для всего текста в документе
Тег Описание
<script> Определяет клиентский сценарий
<noscript> Определяет альтернативное содержимое для пользователей, не поддерживающих клиентские сценарии
<applet> Не поддерживается в HTML5. Лучше используйте <embed> или <object>.
Определяет встроенный апплет
<embed> Определяет контейнер для внешнего (не-HTML) приложения
<object> Определяет внедренный объект
<param> Определяет параметр для объекта

Семантические теги HTML — Как создать сайт

Семантические теги в языке HTML

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

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

Политика спецификации HTML5 заключается в том, чтобы каждый HTML-тег имел свою семантику. Давайте приведем простой пример, например есть теги <s> </s> они делают текст зачёркнутым. Раньше поисковая система зайдя на сайт и увидев этот тег, никак не реагировала на него, теперь она должна понимать, что это не просто зачеркнутый текст, а например что это обозначение старого ценника у товара или устаревшей (не актуальной) информации.

Ниже рассмотрены наиболее популярные теги, имеющие на данный момент семантический акцент.

abbr — текст размещённый между этими тегами, в HTML5, воспринимается как аббревиатура или акроним. В HTML4 для акронимов существовал свой тег acronym.

address — содержит адрес (контактные данные создателя сайта). Может содержать почтовый адрес, емаил, телефон. Вместо него лучше использовать микроразметку hCard.

blockquote — длинная цитата занимающая целый абзац p (теги цитаты обрамляют абзац). Семантический акцент — цитата взятая из внешних источников.

cite — названия произведений, романов, картин, стихов, песен и т.д.

del — старый, удалённый текст.

dfn — данным тегом обрамляется впервые встречающийся термин в тексте.

ins — новый, добавленный текст.

em — наклонный шрифт, ключевое слово, усиление голоса, логическое ударение на слово в предложении. Например тег i, хоть и делает шрифт наклонным, но не имеет семантического акцента.

q — короткая цитата являющаяся частью абзаца p

s — ошибочная или устаревшая информация, но при этом оставленная на странице (например старый ценник).

strong — жирный шрифт, ключевое слово, усиление голоса, изменение интонации, текст высокой степени важности. Например тег b, хоть и делает шрифт жирным, но не имеет семантического акцента.

Некоторые семантические теги появившиеся в HTML5

<article> </article> — основной контент страницы, тег HTML5,
Семантический акцент: поисковая система считает, что информация расположенная между этими тегами, является основной на HTML-странице.

<aside> </aside> — боковая панель (сайдбар) сайта, тег HTML5,
Семантический акцент: поисковая система считает, что информация расположенная между этими тегами, является частью сайдбара (боковой панели).

<footer> </footer> — подвал сайта, тег HTML5,
Семантический акцент: поисковая система считает, что информация расположенная между этими тегами, является подвалом сайта.

На данный момент в этой статье рассмотрены лишь некоторые семантические теги, в будущем мы рассмотрим семантический акцент каждого HTML-тега по отдельности.

PS: развитие языка HTML, движется в направлении семантики, когда для каждой значимой информации, будет создаваться свой собственный тег. Чтобы более яснее представить себе что такое семантика, почитайте статьи посвящённые микроразметке.

Читать далее: Список всех HTML-тегов по алфавиту.


Дата публикации поста: 5 февраля 2016

Дата обновления поста: 15 октября 2014


Навигация по записям

Что такое семантические теги HTML и как их использовать

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

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

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

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

<сторона>

Узнай нас лучше

<раздел>
Популярные сообщения
    ...
<раздел>
Партнеры
    ...
<раздел>
Отзывы
    ...
<нижний колонтитул>
  • Авторские права
  • Ссылки на социальные сети

Если вы посмотрите на фрагмент кода выше, вы увидите, что верхние и нижние колонтитулы являются необязательными, мы можем свободно выбирать, хотим ли мы их использовать или нет, но настоятельно рекомендуется всегда включать заголовок для каждого раздела , в противном случае в структуре документа этот раздел будет «Без названия».

К счастью, в Интернете есть много отличных инструментов, которые позволяют нам проверять структуру документа, на этот раз мы воспользуемся инструментом Outliner на html5.org.

Если мы вставим наш фрагмент кода в форму, предоставленную планировщиком, и нажмем «Outline this!» кнопку, мы увидим следующий результат:

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

Если вы хотите посмотреть, как выглядит раздел без названия в Outliner, просто удалите некоторые теги заголовков в примере кода.

Другие аспекты веб-семантики

Семантические HTML-теги и контуры документов — это лишь небольшая часть веб-семантики. Содержимое веб-страницы можно сделать еще более значимым с помощью протокола доступности WAI-ARIA и структурированных данных, которые можно использовать вместе с протоколом RDFa, микроданными или разметкой JSON-LD.

Semantic HTML Tutorial | HTML и CSS — это сложно

Разделы

Элемент

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

Подумайте о

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

Давайте разделим две части нашего файла article.html : 

  <раздел>
   
 Структура документа 
 
  
 HTML5 включает несколько элементов «секционирования содержимого», которые
     влияют на структуру документа. 


   
 Заголовки 
 
  
 Элемент  & lt; header & gt;  - одно из таких разделов
     элемент. 


   
 Нижние колонтитулы 
 
  
 Как и элемент  & lt; footer & gt; .
<раздел>

Встроенный семантический HTML

Элемент & lt; time & gt; является семантическим, но не секционирование контента.

Это сохраняет структуру нашего документа в точности так же, как и некоторые дополнительные семантическая структура, а также хороший крючок для любых стилей CSS, которые мы можем захотеть применить (например, цвет фона для определенного раздела).

<раздел> и содержание документа

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

до гораздо более низкого уровня заголовка: 

  <раздел>
   
 Встроенный семантический HTML 
 
  
 Элемент  & lt; time & gt;  является семантическим, но не
  секционирование контента.

ниже, чем

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

Добавляя эти элементов

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

до
, которые независимо от остальной части страницы.

Однако вам не следует использовать элемент

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

Также обратите внимание, что каждый элемент

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

   
 Встроенный семантический HTML 
 
<раздел>
  
  
 Элемент  & lt; time & gt;  является семантическим, но не
  секционирование контента.

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

.

Согласно спецификации HTML5,

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

Семантические элементы HTML5 и их значение для SEO — Inbound Now

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

Обзор HTML5

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

Что означает HTML5 для SEO

Стандартные теги HTML (например, заголовок, h2 и т. Д.) Составляют основу SEO на странице. Поисковые системы используют эти теги, чтобы лучше понять, о чем страница. Оптимизация этих факторов — основная практика SEO для повышения рейтинга в результатах поиска. HTML5 предоставил нам несколько новых семантических элементов, которые мы могли бы рассмотреть при оптимизации нашей страницы.

Что такое семантический элемент?

Семантические элементы относятся к элементам HTML, которые имеют определенное значение.Например,

— семантический элемент. Он сообщает ботам Google, что содержимое тега является наиболее важным заголовком, содержащимся в документе HTML.
, с другой стороны, не является семантическим элементом, поскольку он только указывает разделение в HTML-документе и не предоставляет информации о том, что происходит до, после или внутри тега.

Новые семантические теги в HTML5

В выпуске HTML5 появилось несколько новых семантических тегов, которые предоставляют поисковым системам еще более обширную информацию.Вот обзор нескольких элементов HTML5 и их значения для SEO на странице WordPress:

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

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

  • : тег
    не так полезен, как тег
    , но все же предлагает преимущества SEO, поскольку его можно использовать для указания содержимого в разделе нижнего колонтитула веб-сайта, например информации о компании и других полезных ссылки. У каждой страницы может быть даже собственный нижний колонтитул.
  • : Тег

Это действительно поможет моему сайту?

Трудно сказать наверняка. Даже в 2017 году очень мало опубликованных тематических исследований или официальных подтверждений Google о том, что наличие семантически правильного веб-сайта HTML5 поднимет вас в рейтинге или повысит популярность из общедоступных поисковых запросов. Но безопасно признать, что чем больше семантических подробностей вы предоставите ботам, тем лучше поисковые системы смогут понять и проиндексировать ваш контент.Использование элементов HTML5, безусловно, не повредит.

Другие интересные статьи о статусе HTML5 (Продолжайте читать!)

  • https://www.cnet.com/news/html5-is-done-but-two-groups-still-wrestle-over-webs- future /
  • https://www.cnet.com/news/w3c-buttons-down-html5-opens-up-html5-1/
  • https://developer.mozilla.org/en-US/docs/ Web / API / Geolocation / Using_geolocation
  • https://www.myriamjessier.com/blog/html5-accessibility-seo/
  • https: // webmasters.googleblog.com/2010/03/microdata-support-for-rich-snippets.html
  • https://www.semrush.com/blog/semantic-html5-guide/

Об авторе:
Интересы Роя включают ведение блогов, поисковый маркетинг, поисковую оптимизацию, веб-дизайн и электронную коммерцию. Он руководит контент-маркетингом в Perth Web Design. Perth Web Design (PWD) был запущен осенью 2007 года с единственной целью предоставить высококачественный дизайн веб-сайтов и решения для интернет-маркетинга для всех секторов рынка по доступным ценам.PWD предлагает ряд веб-решений, настроенных с одной целью; ваш успех в Интернете.

Этот контент предоставлен вам Inbound Now

ПЛАГИН ВХОДЯЩЕГО МАРКЕТИНГА ДЛЯ WORDPRESS

Целевые страницы • Призывы к действию • Лиды • Электронная почта • Автоматизация

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

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

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

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

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

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

Например, если кого-то зовут Джон , это мало что говорит нам о нем. Но если мы назовем его Flies Like The Wind , скорее всего, он быстро ездит (на лошадях / машинах / самолетах). Веееее! 😂

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

семантический элемент html
Элемент, придающий значение содержанию

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

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

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

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

Глядя на фрагмент содержания, окруженный тегом

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

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

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

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

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

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

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

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

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

Вы можете найти много дискуссий на эту тему, если погуглите: «Помогают ли семантические HTML-теги SEO».

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

Я продолжаю использовать термин , означающий . Я хочу пояснить, что означает , из этого означает и то, что я подразумеваю под ним . 😂

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

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

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

Хотя нижний колонтитул документа обычно отображается внизу страницы, тег

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

То, где на самом деле появляется нижний колонтитул, во многом зависит от стиля CSS.

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

  
  
  
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 		  
 


  
   Элементы заголовка 


   
 Это основной заголовок 
 
   
 Подзаголовок 2 
 
   
 Подзаголовок 3 
 
   
 Подзаголовок 4 
 
   
 Подзаголовок 5 
 
   
 Подзаголовок 6

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

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

Число в заголовке h передает важность этого заголовка по сравнению с другими элементами заголовка. Заголовок

является самым важным.
наименее важен.

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

Вы можете видеть, что наиболее важное содержание заголовка (внутри

) отображается самым крупным шрифтом. Контент

отображается немного меньшим шрифтом и так далее, вплоть до самого маленького шрифта контента
.

Погодите! Разве стили не должны выполняться в CSS?

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

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

.

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

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