Разное

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 состоит из двух видов элементов: семантических и несемантических. У обоих есть своя цель. Вам следует использовать семантические теги, когда вы хотите разметить блок содержимого, который играет важную роль в структуре документа.Например,

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

Упорядоченные и неупорядоченные списки , абзацы , теги заголовков h2-h6 — все это семантические элементы, предшествующие HTML5.

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

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

и .

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

Журнал

Smashing Magazine прекрасно объясняет, в чем реальная проблема чрезмерного и неразумного использования тега

. Суть в том, что если мы включим div внутри div , будет выглядеть так, как если бы внешний div был бы родительским элементом внутреннего, , в то время как на самом деле это не тот случай .

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

Не паникуйте, если вы все еще чувствуете привязанность к

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

Семантика текста в HTML5

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

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

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

Структура документа в HTML5

Структура документа — это структура HTML-документа. Он показывает, как элементы связаны друг с другом. Структура документа была создана исключительно путем сопоставления элементов, таких как заголовки, заголовки таблиц, заголовки форм и другие, в более ранних версиях HTML, таких как HTML4.01 и XHTML.

В HTML5 алгоритм выделения был улучшен новыми элементами секционирования, а именно:

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

В HTML5 есть пятый элемент разделения на разделы, но он не новый, это тег . Теги

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

Советы по семантически структурированному содержанию

Если мы хотим создать хорошо структурированный план документа, мы должны обратить внимание на следующие правила:

1.Самым внешним элементом разделения всегда является тег .

2. Разделы в HTML5 могут быть вложенными.

3. У каждого раздела своя иерархия заголовков. Каждый из них (даже самый внутренний вложенный раздел) может иметь тег h2 .

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

5. Заголовок данного раздела всегда определяется первым элементом заголовка (пусть это будет h2 или тег заголовка более низкого ранга).Следующие теги заголовков внутри того же раздела должны относиться к этому. (Если первый заголовок — это h5 внутри элемента разделения, не ставьте h5 после этого.)

6. Разделы, определенные тегами

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

7. Каждый раздел (body, section, article, aside, nav) может иметь свои собственные теги

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

Пример: семантический план

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

А вот код с правильным семантическим секционированием:


<заголовок>
 
 Добро пожаловать на наш сайт! 
 

 Вот наш логотип и слоган. 





<статья>
<заголовок>
 
 Название статьи 
 
 
 Подзаголовок статьи 
 


<раздел>
 
 Первая логическая часть (e.г. «Теория») 
 

 Абзац 1 в первом разделе 


 
 Другие подзаголовки в первом разделе 
 

 Пункт 2 первого раздела 



<раздел>
 
 Вторая логическая часть (например, «Практика») 
 

 Абзац 1 во втором разделе 


 Абзац 2 во втором разделе 



<нижний колонтитул>
 
 Биография автора 
 

 Абзац в нижнем колонтитуле статьи