Содержание
Таблица основных тегов html с примерами
Таблица основных тегов html с примерами
Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.
HTML позволяет форматировать страницы, придавая им необходимый вид. Если такой задачи нет, то знание тегов поможет отредактировать код встраиваемого виджета. Понимая структуру HTML, вы, например, можете быстро изменить размер видео или виджета и другие особенности его отображения.
Базовые теги
<!—…—> — тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.
<!DOCTYPE> — показывает браузеру тип документа, сообщает его версию и язык.
<html></html> — корневой тег, который сообщает браузеру, что это HTML-документ.
Все остальные элементы помещаются внутри него.
<head></head>— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, <title> или <style>.
<meta> — тег для оформления метаданных документа, используемых браузером для обработки страницы, а поисковиками — для индексации.
<body></body> — тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег <body> имеет несколько атрибутов, позволяющих управлять цветами.
<body bgcolor=?> — цвет фона документа в формате RGB.
<body text=?> — цвет текста.
<body link=?> — цвет гиперссылок.
<body vlink=?> — цвет гиперссылок, по которым уже переходили.
<body alink=?> — цвет гиперссылок при нажатии.
<title></title>— метатег, который задаёт название страницы, отображаемое на вкладке браузера.
<header></header> — определяет содержимое блока с вводной информацией сайта или группой ссылок.
Форматирование текста
<h2></h2>……<h6></h6>. — теги заголовков, от самого большого к самому маленькому.
<b></b> — жирный текст без придания важности выделенному фрагменту.
<strong></strong> — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.
<i></i> — выделение текста курсивом без придания важности.
<del></del> — зачёркивает текст, помечая его удалённым.
<s></s> — отображает перечёркнутый текст.
<ins></ins> — подчёркивает текст, визуально выделяя внесённые изменения.
<u> — подчёркивание без дополнительного акцентирования внимания.
<em></em> — расставление акцентов путём выделения фрагментов текста курсивом.
<mark></mark> — выделение частей текста жёлтым маркером.
<tt></tt> — имитация текста, набранного на печатной машинке.
<small></small> — отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.
<sub></sub> — подстрочное начертание символов.
<sup></sup> — надстрочное начертание символов.
<cite></cite> — оформление цитат.
<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.
<pre></pre> — вывод неформатированного текста с сохранением пробелов и особенностей переносов.
<p></p> — контейнер для абзаца.
<br> — переносит текст на другую строку без создания абзаца.
<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.
<q></q> — краткое цитирование.
<dl></dl> — контейнер для размещения термина и его определения.
<dt> — добавление термина.
<dd> — добавление определения понятия
<dfn> — выделение термина курсивом.
Последующий текст должен раскрывать понятие.
<abbr> — указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.
<ol></ol> — список с цифрами.
<ul></ul> — список со значками.
<li> — отметка каждого элемента перечня (цифра или значок в зависимости от типа списка).
<a></a> — добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.
<code></code> — выделение фрагмента кода с помощью шрифта monospace.
Встраивание элементов
<img></img> — вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:
<img src=»name» align=?> — выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.
<img src=»name» border=?> — позволяет настроить в пикселях толщину рамки вокруг изображения.
<picture></picture> — контейнер для расположения элемента <img> без <source>, который даёт браузеру возможность самостоятельно выбрать подходящую картинку.
<audio></audio> — вставка звукового контента.
<video></video> — вставка видео (поддерживается Ogg, WebM и MP4).
<source></source> — указывает местоположение файла для <video>, <audio> и <picture>
<track> — формирует субтитры для <video> и <audio>.
<object></object> — контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег <param>.
<hr> — размещает на странице горизонтальную линию. Имеет несколько атрибутов.
<hr size=?> — устанавливает высоту линии.
<hr width=?> — устанавливает ширину линии.
<hr noshade> — убирает тень у линии.
<hr color=?> — задаёт цвет линии.
<script></script> — определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на внешний источник.
<noscript></noscript> — ограничивает фрагмент документа, в котором скрипт не выполняется.
Работа с таблицами
<table></table> — размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.
<thead></thead> — определяет заголовок.
<tbody></tbody> — отмечает тело таблицы.
<td></td> — создаёт одну ячейку.
<th></th> — указывает на заголовок ячейки.
<tr> — создание одной строки.
<tfoot></tfoot> — показывает нижний колонтитул.
<caption></caption> — вставляет подпись. Указывается после тега <table>.
<col> — позволяет указать ширину и другие параметры одной или нескольких колонок.
Создание форм и кнопок
<form></form> — создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.
<button></button> — создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.
<select multiple name=»NAME» size=?></select> — формирует меню с поддержкой скроллинга.
<select name=»NAME»></select> — создаёт ниспадающее меню.
<option></option> — описывает каждый отдельный пункт меню.
<input> — формирует поля для добавления пользовательских данных.
<output> — выводит результаты вычислений, сделанных с помощью скрипта.
<label> — оформляет пометку для поля, созданного тегом <input>.
<textarea></textarea> — создаёт большие поля для ввода текста.
Базовые теги HTML — Джино • Журнал
Продолжаем знакомиться с языком разметки HTML, основой основ большинства сайтов в интернете.
Раньше мы уже рассказывали об этом языке, а теперь изучим самые простые и самые необходимые теги и их атрибуты в HTML.
Напомним, что теги и атрибуты — это инструменты, с помощью которых контент на странице сайта организовывается тем или иным образом. Атрибуты прописываются внутри тегов и имеют рядом с собой знак «=», а сами теги всегда заключаются в угловые скобки. Почти все теги в HTML являются парными и окружают с двух сторон ту часть контента, к которой они должны быть применены. Первый, открывающий, тег пишется без дополнительных символов, а во втором, закрывающем, теге после первой скобки появляется знак «/».
Основное
<html></html> Сигнализирует браузеру, что он имеет дело с HTML-документом.
<head></head> Очерчивает часть документа, которая не видна на странице. Предназначен для тега названия, для размещения счётчиков веб-аналитики и не только.
<title></title> Тот самый тег названия документа, его содержимое отображается в ярлыке вкладки браузера.
<body></body> Ограничивает часть документа, которая видна на странице. О том, какие теги здесь могут использоваться, мы покажем далее.
Оформление текста
<i></i> Выделяет текст курсивом.
<b></b> Делает текст полужирным.
<u></u> Подчёркивает текст.
<s></s> Зачёркивает текст.
<cite></cite> Предназначается для оформления цитат.
<tt></tt> Имитирует шрифт печатной машинки.
<code></code> Выделяет текст шрифтом Monospace, который используется для оформления фрагментов кода.
<font size=?></font> Определяет размер текста с помощью значений от 1 до 7, которые нужно подставлять вместо вопросительного знака.
<font color=?></font> Определяет цвет текста с помощью формата RRGGBB.
Шестизначный код цвета так же вставляется вместо вопросительного знака.
Организация текста
<h2></h2> Оформляет текст в виде самого большого заголовка.
<h6></h6> Оформляет текст в виде самого маленького заголовка. Также можно использовать промежуточные значения 2, 3, 4, 5: чем больше цифра, тем меньше значимость заголовка в структуре текста.
Заголовок h6
<p></p> Оформляет абзац.
<p align=?> Выравнивает абзац нужным образом. Вместо вопросительного знака здесь можно поставить одно из четырёх значений: left (по левому краю), right (по правому краю), justify (по ширине) или center (по центру).
<br> Добавляет перенос
строки.
<blockquote></blockquote> Вставляет отступы с обеих сторон текста.
<ol></ol>
- Предназначается
- для
- нумерованных
- списков.
<ul></ul>
- Оформляет
- ненумерованный
- список.
<li> Сопровождает каждый пункт в списке, обозначая его цифрой или маркером — в зависимости от типа списка.
Работа со ссылками
<a href="URL">ТЕКСТ</a> «Зашивает» ссылку в нужный фрагмент текста. Адрес ссылки вставляется вместо «URL», а текст по умолчанию окрашивается в синий цвет и подчёркивается.
<a href="URL">
<img src="imgURL"></a> Добавляет ссылку, которая открывается при нажатии на картинку. Адрес картинки ставится вместо «imgURL».
<a href="#якорь">ТЕКСТ</a> С помощью этого тега можно сослаться на «якорь» — определённый фрагмент внутри просматриваемой страницы. К примеру, якоря используется для быстрого перехода из оглавления к соответствующей части статьи. Вместо «ТЕКСТ» в первом теге необходимо поместить слово или фразу, нажав на которую, можно будет перейти в нужный участок страницы.
А там, куда нужно привести читателя, необходимо добавить атрибут id="якорь" в любой тег. Например, по этой ссылке можно перейти в раздел «Основное» в начале статьи.
Работа с графикой
<img src="URL"> Добавляет изображение. Вместо «URL» нужна ссылка на необходимый файл.
<img src="URL" align=?> Как и в <p align=?>, этот параметр выравнивает изображение нужным образом, однако здесь применяется уже шесть значений: left (слева), right (справа) и center (по центру), а также bottom (внизу), top (вверху) и middle (посередине)
<img src="URL" border=?> Создаёт рамку в виде сплошной линии вокруг изображения. Вместо вопросительного знака можно указать любое целое положительное число. Чем больше число, тем толще рамка.
<body background="URL"> Атрибут background в теге <body> позволяет установить картинку в качестве фона страницы.
<hr> Создаёт сплошную горизонтальную линию.
Вы можете проверить работу всех перечисленных выше тегов, создавая свои собственные HTML-документы. Для этого подойдёт даже Microsoft Office Word или другой текстовый редактор. Необходимо лишь сохранить файл с кодом в формате .html. Но также существуют и HTML-редакторы, которые предназначены для работы с этим языком — о них мы расскажем в одной из наших следующих статей.
— HTML: Язык гипертекстовой разметки
HTML-элемент документа. Область основного содержимого состоит из содержимого, которое непосредственно связано с центральной темой документа или центральной функциональностью приложения или расширяет ее.
В документе не должно быть более одного элемента hidden .
| Категории контента | Вытекающее содержимое, пальпируемое содержимое. |
|---|---|
| Разрешенный контент | Текущее содержимое. |
| Отсутствие тега | Нет; как начальный, так и конечный теги являются обязательными. |
| Разрешенные родители | Где содержание потока ожидается, но только если иерархически правильный основной элемент . |
| Неявная роль ARIA | основной |
| Разрешенные роли ARIA | Нет роль разрешено |
| Интерфейс DOM | HTMLЭлемент |
Этот элемент включает только глобальные атрибуты.
Содержимое элемента 
, таких заголовков, как
и т. д.,
<основной>Яблоки
Яблоко — это семечковый плод яблони.
<статья>Красное вкусное
Эти ярко-красные яблоки чаще всего можно найти во многих супермаркетах.
…
…
<статья>Гренни Смит
Эти сочные зеленые яблоки станут отличной начинкой для яблочных пирогов.
…
…
Ориентир
Элемент . Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации больших разделов документа и перехода к ним.
Предпочитайте использовать элемент role="main" , если нет проблем с поддержкой устаревших браузеров.
Пропустить навигацию
Пропустить навигацию, также известную как «skipnav», — это метод, который позволяет пользователю вспомогательных технологий быстро обходить большие разделы повторяющегося контента (основная навигация, информационные баннеры и т. д.). Это позволяет пользователю быстрее получить доступ к основному содержимому страницы.
Добавление атрибута id к элементу
<тело> Перейти к основному содержанию <основной>
- WebAIM: ссылки «Пропустить навигацию»
Режим чтения
Функция режима чтения через браузер ищет наличие 
- Создание веб-сайтов для Safari Reader Mode и других приложений для чтения.
| Спецификация |
|---|
| Стандарт HTML # the-main-element |
д.