Теги для html сайта: Основные теги для создания сайта

Содержание

HTML теги — справочник с примерами и описанием команд

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

Вы узнаете, что это такое и для чего нужно.

Также на примерах я покажу как это все используется.

Содержание:

  • Что это такое
  • Виды
  • Основные элементы
  • Справочник:
    • Основной контейнер
    • Служебные
    • Коды для текста
    • Таблицы
    • Изображения
    • Списки
    • Гиперссылки
    • Встроенный контент
    • Для группировки
    • Формы

Что такое html теги

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

Одни теги говорят браузеру, что нужно отобразить абзац. Другие, что нужно отобразить заголовок. Третьи, что нужно сделать таблицу.

С помощью таких команд мы общаемся с браузером и как бы программируем его действия.

Парный html тег с атрибутом

Все теги имеют одинаковый формат. Они начинаются с угловой скобки < и заканчиваются на обратную скобку >.

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

Но конечно же, здесь нельзя писать все подряд и выдавать это за теги. Есть определенный набор тегов по спецификации html.

Например, выделение текста жирным:

<b>Жирный текст</b>

Ниже мы еще к этому вернемся.

Стоит сказать, что теги пишутся маленькими латинскими буквами. Хотя нет ничего страшного если вы их напишите большими.

Однако стандарт подразумевает писать их в нижнем регистре.

У тега могут быть атрибуты.

Это дополнительные детали, которые его описывают. Они всегда вставляются в открывающей части.

К примеру, в тег <а> (ссылка на документ) указываем путь к странице, к которой нужно перейти после клика. Записывается она в атрибут href.

<a href="https://site.ru">Текст ссылки</a>

Виды хтмл тегов

Все хтмл теги подразделяются на два вида:

  1. Одиночные
  2. Парные

Парные имеют открывающий и закрывающий тег.

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

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

Далее вставляем нужный текст (контент). После этого мы должны сообщить браузеру, где наш абзац заканчивается. Для этого вставляем закрывающий тег </p>.

<p>Пример небольшого текстового абзаца</p>

Обратите внимание!

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

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

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

Далее вставляем открывающий тег в том месте, где начнется выделение. А закрывающий там, где оно заканчивается.

<p><b>Пример</b> небольшого текстового абзаца</p>
Наглядный пример выделения

Есть определенные правила вложенности тегов. Более подробно на эту тему вы найдете в статье про структуру html документа.

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

<br> <!-- перенос строки -->
<hr> <!-- разделитель -->
<input type="text"> <!-- поле ввода -->
<img src="logo.png"> <!-- вывод изображения -->

Основные html теги

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

Вот они:

  • doctype
  • html
  • head
  • body

Doctype предназначен для определения типа документа. То есть по нему браузер понимает, что это html-документ, а не что-либо еще.

Тег HTML — это контейнер, который имеет основное содержимое страницы. Контейнером называется потому что у него есть парный тег (открывающий и закрывающий).

Абсолютно все элементы (кроме doctype) должны быть вложены в этот контейнер.

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

Обычно эта информация не видна пользователю.

Body — это основное тело страницы. Она содержит рабочие элементы, которые видны пользователям. Как правило, это информационный контент.

Вот так выглядит скелет любой html-страницы:

<!doctype html>
<html>
    <head>
        
    </head>
    <body>
        
    </body>
</html>

Справочник HTML

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

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

Тег HTML

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

ИмяОписаниеЗначение свойства display
<html></html>корневой элемент html-документаblock

Служебные

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

Браузеры по ним определяют тип документа и его интерпретацию. А поисковым системам важно для четкого сканирования документа и его ранжирования в выдаче.

ИмяОписаниеЗначение свойства display
<!—…—>комментарийnone
<!DOCTYPE>объявление типа документаnone
<head></head>контейнер для метаданных html-документаnone
<title></title>заголовок / имя html-документаnone
<meta>мета-данные веб-страницыnone
<link>подключает внешние таблицы стилейnone
<script></script>подключает сценарии к страницеnone
<style></style>подключает встраиваемые таблицы стилейnone
<base>базовый url-адрес, относительно которого вычисляются относительные адресаnone
<noscript></noscript>секция, не поддерживающая скриптblock

HTML теги для текста

Здесь расположены основные html теги для работы с текстом на странице. Как правило, это различные выделения, подчеркивания, вставка заголовков и так далее.

Такие элементы делают текст наиболее приятным для восприятия. Обязательно используйте такие команды для форматирования текста.

ИмяОписаниеЗначение свойства display
<h2></h2> — <h6></h6>заголовки шести уровнейblock
<p></p>параграфы в текстеblock
<br>перенос текста на новую строкуnone
<hr>горизонтальная линияblock
<wbr>возможное место разрыва длинной строкиnone
<blockquote></blockquote>большая цитатаblock
<cite></cite>источник цитированияinline
<q></q>краткая цитатаinline
<code></code>фрагмент программного кодаinline
<kbd></kbd>текст, вводимый пользователем с клавиатурыinline
<pre></pre>выводит текст с пробелами и переносамиblock
<samp></samp>результат выполнения сценарияblock
<var></var>выделяет переменные из программblock
<del></del>перечёркивает текст, помечая как удаленныйblock
<s></s>перечёркивает неактуальный текстblock
<dfn></dfn>выделяет термин курсивомblock
<em></em>выделяет важные фрагменты текста курсивомblock
<i></i>выделяет текст курсивом без акцентаblock
<strong></strong>выделяет полужирным важный текстblock
<b></b>задает полужирное начертание отрывка текста, без дополнительного акцентаblock
<ins></ins>подчёркивает изменения в текстеblock
<u></u>выделяет отрывок текста подчёркиванием, без дополнительного акцентаblock
<mark></mark>выделяет фрагменты текста желтым фономblock
<small></small>отображает текст шрифтом меньшего размераblock
<sub></sub>подстрочное написание символовblock
<sup></sup>надстрочное написание символовblock
<time></time>дата / время документа или статьиblock
<abbr></abbr>аббревиатура или акронимnone
<address></address>контактные данные автора документа или статьиblock
<bdi></bdi>изолирует текст, читаемый справа налевоinline
<bdo></bdo>задаёт направление написания текстаinline
<ruby></ruby>контейнер для Восточно-Азиатских символов и их расшифровкиinline
<rp></rp>тег для скобок вокруг символовnone
<rt></rt>расшифровка символовblock

Теги таблицы HTML

Здесь расположены html теги для создания таблиц. Такие элементы тоже рекомендую использовать на странице.

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

ИмяОписаниеЗначение свойства display
<table></table>html-таблицаtable
<tr></tr>строка таблицыtable-row
<th></th>заголовок столбца таблицыtable-cell
<td></td>ячейка таблицыtable-cell
<thead></thead>блок заголовков таблицыtable-header-group
<tbody></tbody>тело таблицыtable-row-group
<tfoot></tfoot>нижний колонтитул таблицыtable-footer-group
<caption></caption>подпись к таблицеtable-caption
<col>выбирает для форматирования столбцыtable-column
<colgroup></colgroup>контейнер для одного или нескольких <col>table-column-group

Картинки

Обязательно используйте тег картинки в html-документе. Тоже полезно при восприятии и усвоения информации.

Еще полезно и в SEO.

Можно получать трафик с поиска по картинкам. И стоит отметить, что материал без изображений очень плохо ранжируется в поиске.

ИмяОписаниеЗначение свойства display
<img>html-изображенияinline
<map></map>активные области на карте-изображенииinline
<area>гиперссылка с текстом или активная область внутри карты-изображенияinline
<canvas></canvas>холст-контейнер для динамического отображения изображенийinline-block

Списки

Теги списка тоже рекомендую использовать. Очень полезно при каком-то перечислении или создании пошаговой инструкции.

Информацию в списке старайтесь давать максимально коротко и понятно. То есть не делать длинных предложений.

НазваниеОписаниеЗначение свойства display
<ol></ol>упорядоченный нумерованный списокblock
<ul></ul>маркированный списокblock
<li></li>элемент спискаlist-item
<dl></dl>контейнер для термина и его описанияblock
<dt></dt>задаёт терминblock
<dd></dd>расшифровывает терминblock

Ссылки

Тег ссылки в html всегда один. Будьте осторожны при его использовании.

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

Также в атрибуте данного тега внимательно прописывайте адрес перехода.

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

Также обращайте на количество линков. Ссылайтесь только тогда, когда это необходимо!

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

Контент, который можно встроить в основное тело страницы. Также полезно для восприятия информации.

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

ИмяОписаниеЗначение свойства display
<audio></audio>добавляет аудио-файлыinline-block
<video></video>добавляет видео-файлыinline-block
<source>указывает местоположение и тип альтернативных файлов для <audio> и <video>none
<track>субтитры для элементов <audio> и <video>none
<embed>встраивает внешний интерактивный контент или плагинinline-block
<object></object>контейнер для встраивания мультимедиаinline-block
<param>задаёт параметры для плагинов, встраиваемых с помощью элемента <object>none
<iframe></iframe>создаёт встроенный фреймblock

Группировка контента

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

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

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

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

ИмяОписаниеЗначение свойства display
<body></body>тело html-документаblock
<div></div>контейнер для разделов html-документа, группирует блочные элементыblock
<span></span>контейнер для строчных элементовinline
<header></header>секция для вводной информации сайта или группы навигационных ссылокblock
<footer></footer>секция для нижнего колонтитула документа или разделаblock
<section></section>логическая область (раздел) страницы, обычно с заголовкомblock
<article></article>раздел контента, образующий независимую часть документа или сайтаblock
<aside></aside>контент страницы, имеющий косвенное отношение к основному контентуblock
<nav></nav>раздел документа, содержащий навигационные ссылки по сайтуblock
<figure></figure>независимый контейнер для такого контента как изображения, диаграммы и т. п.block
<figcaption></figcaption>заголовок для элемента <figure>block
<details></details>контейнер с дополнительными сведениями, который можно открыть или закрытьblock
<summary></summary>видимый заголовок для элемента <details>block
<main></main>контейнер для уникального основного содержимого в пределах одной страницы сайтаblock

Формы

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

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

Также сюда можно отнести формы подписки, обратной связи, регистрации и так далее.

НазваниеОписаниеЗначение свойства display
<form></form>html-формаblock
<input>многофункциональные поля формыinline-block
<textarea>многострочное поле формыinline-block
<label></label>текстовая метка для элемента <input>inline
<datalist></datalist>контейнер для выпадающего списка элемента <input> с <option>-значениямиnone
<select></select>элемент управления с выбором значений из предложенных вариантов <option>inline-block
<optgroup></optgroup>контейнер с заголовком для группы элементов <option>block
<option></option>вариант (опция) в раскрывающемся спискеblock
<fieldset></fieldset>группирует связанные элементы в формеblock
<legend></legend>заголовок элементов формы, сгруппированных с помощью <fieldset>block
<button></button>интерактивная кнопкаinline-block
<keygen>генерирует закрытый и открытый ключиinline-block
<progress></progress>индикатор выполнения задачиinline-block
<meter></meter>индикатор измерения в заданном диапазонеinline-block
<output></output>поле для вывода результата вычисленияinline

На этом все!

Мы рассмотрели html теги и их значение. Используйте данную справку, как шпаргалку при создании сайтов.

Однако желательно, чтобы вы наизусть знали хотя бы основные команды. Если с кодом будете часто работать, то с этим проблем не будет. Запомнить можно быстро.

теги и атрибуты в HTML — Tokar.ua

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

Теги (tags, таги, тэги) — это ключевые слова, которые окружены угловыми скобками (< и >). Теги являются основой языка HTML. Структура тега всегда такова:

<tag>content</tag>

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

Теги, которые не требуют закрытия имеют такой вид:

<tag />

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

Теги не мы не увидим в браузере, но они являются основой вёрстки любого сайта. Задача тегов — “объяснить” браузеру, где какие размещать элементы, какими свойствами они должны обладать. Далее вы увидите, как писать код и поймёте, где и какие теги следует использовать.

Вот основные теги, которые определяют структуру документа:

ТегОписание
<html>...</html>Весь документ. Всё содержимое должно находиться внутри этого тега
<head>...</head>Информация о документе
<title>...</title>Заголовок страницы, он отображается в заголовке вкладки в браузере
<body>...</body>Визуальное содержимое страницы, все видимые элементы должны находиться внутри этого тега
<h2>...</h2>Заголовок, может меняться от h2, самого главного, до h6
<p>. ..</p>Параграф текста

Атрибуты тегов

Свойства тегов называют “атрибутами”. Теги могут иметь один или множество атрибутов, а могут быть совсем без них.

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

Правильно:

<a href="...">...</a>

Неправильно:

<a>...</a href="...">

Атрибуты указываются парами в виде имени и значения: имя="значение". Например, вы можете добавить атрибут lang элементу <html>:

<html lang="en-US">

Эта строка читается так: у тега <html> есть атрибут lang, и его значение — en-US.

Гиперссылки и изображения

Для создания гиперссылки используется тег <a>, основным атрибутом для ссылки всегда служит атрибут href, который указывает, какая страница откроется при клике на этой ссылке. Вот пример текстовой ссылки, то есть содержимое тега <a> в данном случае — текст:

<a href="http://tokar.ua">Уроки верстки сайтов</a>

У одного и того же элемента может быть множество атрибутов. Например, тег <img>

, который отвечает за изображения:

<img src="img.jpg" alt="Alt text" title="Title">

Давайте разберёмся в этой строке: у элемента <img> есть такие атрибуты:

  • src — источник изображения, адрес файла, который должен загрузиться;
  • alt — альтернативный текст, он будет отображаться вместо изображения, если оно по каким-то причинам не загружено. Например: изображение ещё загружается, неправильно указан его адрес или пользователь использует текстовый режим браузера;
  • title — заголовок (подсказка) изображения, появляется при наведении курсора на него. Может также использоваться для гиперссылок;
  • width и height — ширина и высота изображения в пикселях, реже указывается в процентах: height="50%". Если мы не указываем размеры, то изображение отобразится со своими реальными шириной и высотой.

Как добавлять атрибуты

Правила написания атрибутов очень просты:

  • значения всегда должны указываться в кавычках;
  • используйте только одни и те же кавычки: если слева значения стоит одинарная или двойная кавычка (' и " соответственно), то справа должна быть такая же;
  • используйте только строчные буквы для имён атрибутов (не касается значений).

Приведу одни из самых часто используемых атрибутов:

АтрибутОписание
altальтернативный текст для изображения
classкласс или классы
hrefадрес, куда указывает ссылка
idидентификатор
srcисточник, обычно для изображений
title
подсказка для изображения или ссылки
valueзначение, часто используется в формах

Атрибуты class и id

Классы и идентификаторы — это атрибуты, которые называются class и id соответственно.  Они нужны, чтобы можно было выбирать элементы, к которым применять стили. Для выбора элементов по классу, идентификатору или имени тега используются селекторы.

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

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

Идентификатор должен быть уникальным, не повторяться на странице и применяться только к одному элементу. Для одного и того же элемента можно указать только один идентификатор.

Правильно:

<img src="img.jpg" alt="">

Неправильно:

<img src="img. jpg" alt="">

Классов может быть любое количество, они указываются через пробел в атрибуте class, для одного и того же объекта можно указать как только идентификатор, так и только классы, а также и то, и то.

Пример:

<p>Текст</p>

Для имён идентификаторов и классов используются одинаковые правила:

  • только латинские буквы
    хорошо: class="class_01", плохо: class="класс_01"
    ;
  • только нижний регистр
    хорошо: class="class_01", нежелательно:;
  • первый символ — только буква
    хорошо: image_01, плохо: 01_image;

Атрибут alt — обязателен для изображений

По правилам разметки у всех изображений обязательно должен быть указан атрибут alt. Если он вам не нужен, оставляйте его пустым, но всё равно добавляйте везде:

<img src="... " alt="">

Нижний регистр для имён атрибутов

Как имена классов и id, так и имена тегов должны указываться в нижнем регистре.

Вообще HTML-теги регистронезависимы, то есть <P> для браузера равнозначен <p>. В спецификации HTML5 нет указаний о том, какой регистр необходимо использовать. Тем не менее, раньше использование прописных букв в именах тегов являлось ошибкой.

Правильно:

<p>Как хорошо, что вы больны не мной</p>

Неправильно:

<P>Как хорошо, что я больна не вами</P>

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

Основные элементы HTML веб-страницы | Введение в веб-разработку. Курс

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

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

Любой html-документ должен начинаться с одиночного тега <!DOCTYPE>

с атрибутом, указывающем на используемую версию языка HTML. В случае с HTML5 первая строка будет такой:

<!DOCTYPE html>

Далее идет открывающий тег <html>. Его закрывающий тег </html> должен находиться в самом конце кода страницы. Пара <html>...</html> формирует корневой элемент документа. Все содержимое страницы находится между этими тегами.

В теге <html> следует добавлять атрибут lang, которому присваивается обозначение языка, на котором представлено смысловое содержание страницы. Например, <html lang="ru"> или <html lang="en">. Это помогает браузерам и поисковым системам правильно работать со страницей.

После <html> идет элемент head, содержимое которого не отображается на странице. В head содержится метаинформация (информация об информации на странице), к документу подключаются другие файлы, могут быть включения кодов CSS и JS. Ниже описаны элементы HTML, которые настоятельно рекомендуется включать в head страниц сайтов, размещаемых в Web. Однако в курсе большинство из них мы будем опускать.

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

Кодировка документа указывается с помощью тега <meta> через атрибут charset. В настоящее время обычно при создании html-документов используют UTF-8.

Следующая команда позволяет корректно отображать видимое содержимое страницы на небольших экранах (смартфонах): <meta name="viewport" content="width=device-width, initial-scale=1">.

Краткое описание содержимого страницы (<meta name="description" content="…">) может быть использовано в поисковой выдаче. Например, человек вводит поисковый запрос в поисковой строке. Поисковик формирует поисковую выдачу, ранжируя (выставляя по очереди) ответы согласно своему алгоритму. Информация под ссылкой на ресурс может быть взята из краткого описания страницы (хотя не обязательно).

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

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

Весь содержательный контент страницы заключается между тегами <body> и </body>.

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

В HTML для разметки абзаца используется элемент p, для заголовка первого уровня (самого главного) – h2.

Кроме текста нередко в веб-контент включают различные изображения. Для этого используется одиночный тег <img>. Обязательным атрибутом является src (сокращение от слова source – источник), с помощью которого указывается адрес, где находится файл. Также рекомендуется прописывать атрибуты width и height – ширина и высота картинки, alt – для описывающей изображение информации. Значение alt может использоваться поисковыми системами в поиске по картинкам, а также отображается в браузере, если по каким-то причинам изображение не загрузилось.

Ширина и высота картинки измеряется в пикселях. Узнать размеры находящегося на вашем компьютере изображения можно через окно «Свойства», которое вызывается через контекстное меню (правый клик по файлу картинки). Чтобы узнать размер изображения, размещенного на веб-странице, можно в контекстном меню выбрать пункт «Открыть картинку в новой вкладке» (или подобный). В титуле страницы, помимо имени файла, будет указан размер.

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

Ссылки – важная составляющая веба. Недаром говорят о всемирной паутине (World Wide Web), связь между документами в которой обеспечивают как раз ссылки (гиперссылки). В языке HTML они создаются с помощью элемента a. У открывающего тега должен быть атрибут href. Обычно его значением является адрес другого документа. Между тегами <a> и </a> записывается текст ссылки, который видит читатель страницы. При клике по этому тексту происходит переход к другому документу (он загружается в окно браузера). В адресной строке при этом меняется адрес.

Нередким элементом страницы являются списки. Они бывают неупорядоченные и упорядоченные. Первые определяются элементом ul, вторые – ol. Каждый пункт и того и другого списка формирует контейнер <li></li>.

Чтобы придать значимости какой-либо фразе или термину их помещают в контейнер <strong></strong> («важный, ключевой текст») или <em></em> («обратить особое внимание», «сделать акцент»). Первый выглядит жирным, второй – курсивом.

Strong и em – структурные элементы; они имеют значение для поисковых систем. С их помощью придают больший вес заключенным в них словам. Если же нужно просто выделить текст жирным или курсивом для красоты, наглядности, понятности можно использовать теги оформления <b></b> и <i></i>, пришедшие из более ранних версий HTML.

Следует отметить, с помощью языка CSS элементы b и strong, i и em можно сделать визуально отличимыми. Например, задать для b темно-синий цвет шрифта, а em дополнительно к курсиву придать жирность начертания.

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

Еще раз обратим внимание на терминологию. Элементы HTML создаются с помощью тегов. У открывающих и одиночных тегов могут быть атрибуты. Атрибутам через знак равенства присваиваются значения. Значения берутся в кавычки. Атрибуты пишутся после имени тега, но последовательность между самими атрибутами, если их несколько, не важна. Атрибуты можно представить как своего рода «настройщики» элемента. Набор допустимых атрибутов разных тегов может отличаться, однако существуют общие, то есть употребимые с большинством тегов.

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

<!-- здесь текст комментария -->

Справочник по элементам HTML — по категориям

❮ Предыдущий Далее ❯


Базовый HTML

Тег Описание
  Определяет тип документа
Определяет документ HTML
<голова> Содержит метаданные/информацию для документа
<название> Определяет заголовок документа
<тело> Определяет тело документа
От

до

Определяет заголовки HTML

Определяет параграф

Вставляет одиночный разрыв строки
<час> Определяет тематическое изменение содержимого
Определяет комментарий

Форматирование

Тег Описание
<акроним> Не поддерживается в HTML5. Вместо этого используйте .
Определяет аббревиатуру
<сокращение> Определяет аббревиатуру или акроним
<адрес> Определяет контактную информацию автора/владельца документа/статьи
Определяет полужирный текст
Изолирует часть текста, которая может быть отформатирована в другом направлении из другого текста вне его
Переопределяет текущее направление текста
<большой> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет большой текст
<цитата> Определяет раздел, цитируемый из другого источника
<центр> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет центрированный текст
<цитировать> Определяет название произведения
<код> Определяет часть компьютерного кода
<удалить> Определяет текст, который был удален из документа
Указывает термин, который будет определен в содержимом
Определяет выделенный текст 
<шрифт> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет шрифт, цвет и размер текста
<я> Определяет часть текста в альтернативном голосе или настроении
Определяет текст, который был вставлен в документ
Определяет ввод с клавиатуры
<знак> Определяет отмеченный/выделенный текст
<метр> Определяет скалярное измерение в пределах известного диапазона (манометр)
<пред> Определяет предварительно отформатированный текст
<прогресс> Представляет ход выполнения задачи
Определяет короткую цитату
<рп> Определяет, что показывать в браузерах, не поддерживающих рубиновые аннотации
Определяет объяснение/произношение символов (для восточноазиатских типография)
<рубин> Определяет рубиновую аннотацию (для восточноазиатской типографики)
<с> Определяет текст, который больше не является правильным
<образец> Определяет образец вывода из компьютерной программы
<маленький> Определяет меньший текст
<забастовка> Не поддерживается в HTML5. Вместо этого используйте или .
Определяет зачеркнутый текст
<сильный> Определяет важный текст
Определяет подстрочный текст
Определяет текст с надстрочным индексом
<шаблон> Определяет контейнер для контента, который должен быть скрыт при загрузке страницы
<время> Определяет конкретное время (или дату/время)
Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет текст телетайпа
<у> Определяет какой-то текст, который не артикулирован и имеет стиль, отличный от обычного текст
<вар> Определяет переменную
Определяет возможный разрыв строки


Формы и ввод

Тег Описание
<форма> Определяет форму HTML для пользовательского ввода
<ввод> Определяет элемент управления вводом
<текстовое поле> Определяет элемент управления многострочным вводом (текстовая область)
<кнопка> Определяет нажимаемую кнопку
<выбрать> Определяет раскрывающийся список
<оптгруппа> Определяет группу связанных опций в раскрывающемся списке
<опция> Определяет параметр в раскрывающемся списке
<метка> Определяет метку для элемента
<набор полей> Группирует связанные элементы в форме
<легенда> Определяет заголовок для элемента
<список данных> Указывает список предопределенных параметров для элементов управления вводом
<выход> Определяет результат вычисления

Рамки

Бирка Описание
<кадр> Не поддерживается в HTML5.
Определяет окно (фрейм) в наборе фреймов
<набор кадров> Не поддерживается в HTML5.
Определяет набор кадров
<без кадров> Не поддерживается в HTML5.
Определяет альтернативный контент для пользователей, которые не поддерживают кадры