FrontendBook HTML Элементы по Категориям

HTML Элементы по Категориям

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

HTML Основные Элементы

Элемент Синтаксис Атрибуты Описание
<!--...-->

<!--...-->

Не имеет своих атрибутов, только глобальные атрибуты

Определяет комментарий

!DOCTYPE html

<!DOCTYPE html>

В соответствии со спецификацией или стандартами HTML каждый HTML-документ требует объявления типа документа.

html

<html>...</html>

xmlns, lang

Определяет корень документа HTML

head

<head>...</head>

Не имеет своих атрибутов, только глобальные атрибуты

Содержит метаданные/информацию для документа

title

<title>...</title>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет заголовок для документа

body

<body> … </body>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет тело документа

h1-h6

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет заголовки документа

p

<p>...</p>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет абзац

br

<br>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет одиночный разрыв строки

hr

<hr>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет тематическое изменение содержания

HTML Элементы Форматирования

Элемент Синтаксис Атрибуты Описание
acronym

<acronym title=" "> … </acronym>

Определяет аббревиатуру. Не поддерживается в HTML5. Вместо этого используйте <abbr>

abbr

<abbr title=” “> … </abbr>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет аббревиатуру

address

<address> … </address>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет контактную информацию для автора/владельца документа

b

<b>...</b>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет полужирный текст

bdi

<bdi> … </bdi>

Не имеет своих атрибутов, только глобальные атрибуты

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

bdo

<bdo dir=""> … </bdo>

dir

Переопределяет текущее направление текста

big

<big> … </big>

Определяет большой текст. Не поддерживается в HTML5. Вместо этого используйте CSS

blockquote

<blockquote> … </blockquote>

cite

Определяет раздел, который цитируется из другого источника

center

<center> … </center>

Определяет центрированный текст. Не поддерживается в HTML5. Вместо этого используйте CSS

cite

<cite> … </cite>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет название произведения

code

<code> … </code>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет часть компьютерного кода

del

<del> … </del>

cite, datetime

Определяет текст, который был удален из документа

dfn

<dfn> … </dfn>

Не имеет своих атрибутов, только глобальные атрибуты

Указывает термин, который будет определен в содержимом

em

<em> … </em>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет выделенный текст

font

<font> … </font>

Определяет шрифт, цвет и размер текста. Не поддерживается в HTML5. Вместо этого используйте CSS

i

<i>...</i>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет часть текста в альтернативном голосе или настроении

ins

<ins>...</ins>

cite, datetime

Определяет текст, который был вставлен в документ

kbd

<kbd>...</kbd>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет ввод с клавиатуры

mark

<mark>...</mark>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет выделенный текст. Данный тег был добавлен в HTML5

meter

<meter>...</meter>

high, low, max, min, optimum, value

Определяет скалярное измерение в пределах известного диапазона (датчик). Данный тег был добавлен в HTML5

pre

<pre>...</pre>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет предварительно отформатированный текст

progress

<progress>...</progress>

max, value

Представляет ход выполнения задачи. Данный тег был добавлен в HTML5

q

<q>...</q>

cite

Определяет короткую цитату

rp

<rp>...</rp>

Не имеет своих атрибутов, только глобальные атрибуты

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

rt

<rt>...</rt>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет объяснение/произношение символов (для восточноазиатской типографики)

ruby

<ruby>...</ruby>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет рубиновую аннотацию (для восточноазиатской типографики). Данный тег был добавлен в HTML5

s

<s>...</s>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет текст, который больше не является правильным

samp

<samp>...</samp>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет образец вывода из компьютерной программы

small

<small>...</small>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет меньший текст

strike

<strike>...</strike>

Определяет зачеркнутый текст. Не поддерживается в HTML5. Вместо этого используйте <del> или <s>

strong

<strong>...</strong>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет важный текст

sub

<sub>...</sub>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет подстрочный текст

sup

<sup>...</sup>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет надстрочный текст

template

<template>...</template>

Не имеет своих атрибутов, только глобальные атрибуты

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

time

<time>...</time>

datetime

Определяет конкретное время. Данный тег был добавлен в HTML5

tt

<tt>...</tt>

Определяет текст телетайпа. Не поддерживается в HTML5. Вместо этого используйте CSS

u

<u>...</u>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет некоторый текст, который не артикулирован и оформлен иначе, чем обычный текст

var

<var>...</var>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет переменную

wbr

<wbr>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет возможный разрыв строки. Данный тег был добавлен в HTML5

HTML Элементы Формы

Элемент Синтаксис Атрибуты Описание
form

<form> … </form>

accept-charset, action, autocomplete, enctype, method, name, novalidate, target

Определяет HTML-форму для пользовательского ввода

input

<input type=" ">

accept, alt, autocomplete, autofocus, checked, dirname, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, name, placeholder, readonly, required, size, src, step, type, value, width

Определяет элемент управления вводом

textarea

<textarea>...</textarea>

autofocus, cols, dirname, disabled, form, maxlength, name, placeholder, readonly, required, rows, wrap

Определяет элемент управления многострочным вводом (текстовая область)

button

<button> … </button>

autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, type, value

Определяет кликабельную кнопку

select

<select>...</select>

autofocus, disabled, form, multiple, name, required, size

Определяет раскрывающийся список

optgroup

<optgroup>...</optgroup>

disabled, label

Определяет группу связанных опций в раскрывающемся списке

option

<option>...</option>

disabled, label, selected, value

Определяет параметр в раскрывающемся списке

label

<label>...</label>

for, form

Определяет метку для элемента <input>

fieldset

<fieldset> … </fieldset>

disabled, form, name

Группирует связанные элементы в форме

legend

<legend>...</legend>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет заголовок для элемента <fieldset>

datalist

<datalist> … </datalist>

Не имеет своих атрибутов, только глобальные атрибуты

Задает список предопределенных параметров для элементов управления вводом. Данный тег был добавлен в HTML5

output

<output>...</output>

for, name

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

HTML Элементы Фреймов

Элемент Синтаксис Атрибуты Описание
frame

<frame>

Определяет окно (фрейм) в наборе фреймов. Не поддерживается в HTML5

frameset

<frameset>

Определяет набор кадров. Не поддерживается в HTML5

noframes

<noframes>...</noframes>

Определяет альтернативный контент для пользователей, не поддерживающих фреймы. Не поддерживается в HTML5

iframe

<iframe>...</iframe>

height, width, name, referrerpolicy, sandbox, src, srcdoc

Определяет встроенный фрейм

HTML Элементы Изображения

Элемент Синтаксис Атрибуты Описание
img

<img src=" " alt=" ">

alt, height, ismap, loading, src, usemap, width

Определяет изображение

map

<map>...</map>

name

Определяет карту изображения

area

<area>

shape, coords, href, hreflang, media, alt, download, rel, type, target

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

canvas

<canvas> … </canvas>

height, width

Используется для рисования графики на лету с помощью сценариев (обычно JavaScript). Данный тег был добавлен в HTML5

figcaption

<figcaption> … </figcaption>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет заголовок для элемента <figure>

figure

<figure> … </figure>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет автономный контент. Данный тег был добавлен в HTML5

picture

<picture>...</picture>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет контейнер для нескольких ресурсов изображения

svg

<svg>...</svg>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет контейнер для графики SVG

HTML Элементы Аудио и Видео

Элемент Синтаксис Атрибуты Описание
audio

<audio>...</audio>

autoplay, controls, loop, muted, preload, src

Определяет встроенный звуковой контент. Данный тег был добавлен в HTML5

source

<source src=" " type=" ">...</source>

media, src, srcset, type

Определяет несколько медиа-ресурсов для медиа-элементов (<video> и <audio>)

track

<track>

default, kind, label, src, srclang

Определяет текстовые дорожки для медиа-элементов (<video> и <audio>)

video

<video>...</video>

autoplay, controls, loop, preload, src, poster, height, width

Определяет встроенный видеоконтент. Данный тег был добавлен в HTML5

HTML Элементы Ссылок

Элемент Синтаксис Атрибуты Описание
a

<a herf=" "> …</a>

download, href, hreflang, rel, type, target

Определяет гиперссылку

link

<link>

href, hreflang, media, rel, type

Определяет связь между документом и внешним ресурсом (чаще всего используется для ссылки на таблицы стилей)

nav

<nav>...</nav>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет навигационные ссылки. Данный тег был добавлен в HTML5

HTML Элементы Списков

Элемент Синтаксис Атрибуты Описание
ul

<ul>...</ul>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет неупорядоченный список

ol

<ol>...</ol>

reversed, start, type

Определяет упорядоченный список

li

<li>...</li>

value

Определяет элемент списка

dir

<dir> … </dir>

Определяет список каталогов. Не поддерживается в HTML5. Вместо этого используйте <ul>

dl

<dl> … </dl>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет список описаний

dt

<dt> … </dt>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет термин/имя в списке описания

dd

<dd> … </dd>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет описание/значение термина в списке описаний

HTML Элементы Таблицы

Элемент Синтаксис Атрибуты Описание
table

<table>...</table>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет таблицу

caption

<caption> … </caption>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет заголовок таблицы

th

<th>...</th>

abbr, colspan, headers, rowspan, scope

Определяет ячейку заголовка в таблице

tr

<tr>...</tr>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет строку в таблице

td

<td>...</td>

colspan, headers, rowspan

Определяет ячейку в таблице

thead

<thead>...</thead>

Не имеет своих атрибутов, только глобальные атрибуты

Группирует содержимое заголовка в таблице

tbody

<tbody>...</tbody>

Не имеет своих атрибутов, только глобальные атрибуты

Группирует содержимое тела в таблице

tfoot

<tfoot>...</tfoot>

Не имеет своих атрибутов, только глобальные атрибуты

Группирует содержимое нижнего колонтитула в таблице

col

<col>

span

Указывает свойства столбца для каждого столбца в элементе <colgroup>

colgroup

<colgroup> … </colgroup>

span

Указывает группу из одного или нескольких столбцов в таблице для форматирования

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

Элемент Синтаксис Атрибуты Описание
style

<style>...</style>

media, type

Определяет информацию о стиле для документа

div

<div> … </div>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет раздел в документе

span

<span>...</span>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет раздел в документе

header

<header>...</header>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет заголовок для документа или раздела. Данный тег был добавлен в HTML5

footer

<footer> … </footer>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет нижний колонтитул для документа или раздела. Данный тег был добавлен в HTML5

main

<main>...</main>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет основное содержание документа

section

<section>...</section>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет раздел в документе. Данный тег был добавлен в HTML5

article

<article>...</article>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет статью. Данный тег был добавлен в HTML5

aside

<aside>...</aside>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет содержимое отдельно от содержимого страницы. Данный тег был добавлен в HTML5

details

<details> … </details>

open

Определяет дополнительные сведения, которые пользователь может просматривать или скрывать. Данный тег был добавлен в HTML5

dialog

<dialog> … </dialog>

open

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

summary

<summary>...</summary>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет видимый заголовок для элемента <details>

data

<data value=""> … </data>

value

Добавляет машиночитаемый перевод данного контента

HTML Элементы Мета Информации

Элемент Синтаксис Атрибуты Описание
head

<head>...</head>

Не имеет своих атрибутов, только глобальные атрибуты

Содержит метаданные/информацию для документа

meta

<meta>...</meta>

charset, content, http-equiv, name

Определяет метаданные о HTML-документе

base

<base href=" ">

href, target

Указывает базовый URL/цель для всех относительных URL-адресов в документе

basefont

<basefont>

Задает цвет, размер и шрифт по умолчанию для всего текста в документе. Не поддерживается в HTML5. Вместо этого используйте CSS

HTML Функциональные Элементы

Элемент Синтаксис Атрибуты Описание
script

<script>...</script>

async, defer, src, type, crossorigin

Определяет клиентский скрипт

noscript

<noscript>...</noscript>

Не имеет своих атрибутов, только глобальные атрибуты

Определяет альтернативный контент для пользователей, которые не поддерживают сценарии на стороне клиента

applet

<applet>….</applet>

Определяет встроенный апплет. Не поддерживается в HTML5. Вместо этого используйте <embed> или <object>

embed

<embed>

height, src, type, width

Определяет контейнер для внешнего приложения. Данный тег был добавлен в HTML5

object

<object>...</object>

data, height, name, type, width

Определяет контейнер для внешнего приложения

param

<param value=" " name=" ">

name, value

Определяет параметр для объекта