Теги HTML

‹a› ‹abbr› ‹address› ‹area› ‹article› ‹aside› ‹audio› ‹b› ‹base› ‹bdi› ‹bdo› ‹blockquote› ‹body› ‹br› ‹button› ‹canvas› ‹caption› ‹cite› ‹code› ‹col› ‹colgroup› ‹data› ‹datalist› ‹dd› ‹del› ‹details› ‹dfn› ‹dialog› ‹div› ‹dl› ‹dt› ‹em› ‹embed› ‹fieldset› ‹figcaption› ‹figure› ‹footer› ‹form› ‹h1› ‹h2› ‹h3› ‹h4› ‹h5› ‹h6› ‹head› ‹header› ‹hgroup› ‹hr› ‹html› ‹i› ‹iframe› ‹img› ‹input› ‹ins› ‹kbd› ‹keygen› ‹label› ‹legend› ‹li› ‹link› ‹main› ‹map› ‹mark› ‹menu› ‹meta› ‹meter› ‹nav› ‹noscript› ‹object› ‹ol› ‹optgroup› ‹option› ‹output› ‹p› ‹param› ‹picture› ‹pre› ‹progress› ‹q› ‹rb› ‹rp› ‹rt› ‹rtc› ‹ruby› ‹s› ‹samp› ‹script› ‹section› ‹select› ‹slot› ‹small› ‹source› ‹span› ‹strong› ‹style› ‹sub› ‹summary› ‹sup› ‹table› ‹tbody› ‹td› ‹template› ‹textarea› ‹tfoot› ‹th› ‹thead› ‹time› ‹title› ‹tr› ‹track› ‹tt› ‹u› ‹ul› ‹var› ‹video› ‹wbr› ‹xmp›

Глобальные атрибуты


Глобальные атрибуты — это атрибуты общие для всех HTML элементов; они могут использоваться всеми элементами, хотя на некоторые элементы могут не оказывать влияния.

Глобальные атрибуты могут быть указаны для любых элементов HTML, даже для тех, которые не указаны в стандарте. Это значит, что все нестандартные элементы должны допускать эти атрибуты, даже если использование этих элементов означает, что документ больше не является HTML5-совместимым. Например, HTML5-совместимые бразузеры скрывают содержимое, помеченное как ‹foo hidden›...‹foo›, хотя ‹foo› не является верным HTML элементом.Глобальные атрибуты могут быть указаны для любых элементов HTML, даже для тех, которые не указаны в стандарте. Это значит, что все нестандартные элементы должны допускать эти атрибуты, даже если использование этих элементов означает, что документ больше не является HTML5-совместимым. Например, HTML5-совместимые бразузеры скрывают содержимое, помеченное как ‹foo hidden›...‹foo›, хотя ‹foo› не является верным HTML элементом.

Описание аттрибутов

accesskey

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

class

Это список разделенных пробелами классов элемента. Классы позволяют CSS и JavaScript выбирать и получать доступ к конкретным элементам через селекторы по классу или через функции, такие как метод Document.getElementsByClassName().

contenteditable

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

  • true или пустая строка, указывает, что элемент должен быть редактируемым;
  • false, указывает, что элемент не должен быть редактируемым.

contextmenu

Это id элемента ‹menu›, который следует использовать в качестве контекстного меню для данного элемента.

data-*

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

dir

Это перечислимый атрибут указывающий направление текста в элементе. Он может принимать одно из следующих значений:

  • ltr, что расшифровывается как left to right (слева направо), и предназначено для языков, в которых пишут слева направо (как в русском);
  • rtl, что расшифровывается как right to left (справа налево), и предназначено для языков, в которых пишут справа налево (как в арабском);
  • auto — позволяет принять решение пользовательскому приложению. Оно применяет базовый алгоритм — анализирует символы внутри элемента до тех пор, пока не найдет символ со строгим направлением, а затем применяет это направление ко всему элементу.

draggable

Это перечислимый атрибут, указывающий, можно ли перетаскивать элемент используя Drag and Drop API. Он может иметь одно из следующих значений:

  • true, указывающее, что элемент можно перетаскивать;
  • false, указывающее, что элемень нельзя перетаскивать.

dropzone

Это перечислимый атрибут, указывающий типы содержимого, которое можно перетащить в элемент с использованием Drag and Drop API. Он может иметь одно из следующих значений:

  • copy, указывающее, что перетаскивание создаст копию перетаскиваемого элемента;
  • move, указывающее, что перетаскиваемый элемент будет перемещен в новое расположение;
  • link — создаст ссылку на перетаскиваемые данные.

hidden

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

id

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

itemid, itemprop, itemref, itemscope, itemtype

Эти атрибуты относятся к определению микроданных.

lang

Участвует в определении языка элемента, языка написания нередактируемых элементов или языка, на котором должны быть написаны редактируемые элементы. Содержит единственное значение в формате, определенном в документе IETF BCP47. xml:lang имеет приоритет над ним.

spellcheck

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

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

style

Содержит описание стилей CSS, которые должны быть применены к элементу. Учтите, что рекомендуется определять стили в отдельном файле или файлах. Этот атрибут, как и элемент ‹style›, предназначен, в основном, для оперативного применения стилей, например в целях тестирования.

tabindex

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

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

title

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

translate

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

  • пустая строка или yes указывает, что элемент должен быть переведен;
  • no указывает, что элемент не должен быть переведен.

Список MIME-типов


MIME-тип — тип данных, которые могут быть переданы посредством сети интернет с применением стандарта MIME.

Согласно RFC 2045, RFC 2046, RFC 4288, RFC 4289 и RFC 4855 выделяются следующие базовые типы передаваемых данных:

  • application
  • audio
  • example
  • image
  • message
  • model
  • multipart
  • text
  • video

application

Внутренний формат прикладной программы

  • application/atom+xml: Atom
  • application/EDI-X12: EDI X12 (RFC 1767)
  • application/EDIFACT: EDI EDIFACT (RFC 1767)
  • application/json: JavaScript Object Notation JSON (RFC 4627)
  • application/javascript: JavaScript (RFC 4329)
  • application/octet-stream: двоичный файл без указания формата (RFC 2046)
  • application/ogg: Ogg (RFC 5334)
  • application/pdf: Portable Document Format, PDF (RFC 3778)
  • application/postscript: PostScript (RFC 2046)
  • application/soap+xml: SOAP (RFC 3902)
  • application/font-woff: Web Open Font Format
  • application/xhtml+xml: XHTML (RFC 3236)
  • application/xml-dtd: DTD (RFC 3023)
  • application/xop+xml:XOP
  • application/zip: ZIP
  • application/gzip: Gzip
  • application/x-bittorrent: BitTorrent
  • application/x-tex: TeX
  • application/xml: XML

audio

Аудио

  • audio/basic: mulaw аудио, 8 кГц, 1 канал (RFC 2046)
  • audio/L24: 24bit Linear PCM аудио, 8-48 кГц, 1-N каналов (RFC 3190)
  • audio/mp4: MP4
  • audio/aac: AAC
  • audio/mpeg: MP3 или др. MPEG (RFC 3003)
  • audio/ogg: Ogg Vorbis, Speex, Flac или др. аудио (RFC 5334)
  • audio/vorbis: Vorbis (RFC 5215)
  • audio/x-ms-wma: Windows Media Audio
  • audio/x-ms-wax: Windows Media Audio перенаправление
  • audio/vnd.rn-realaudio: RealAudio
  • audio/vnd.wave: WAV(RFC 2361)
  • audio/webm: WebM

image

Изображение

  • image/gif: GIF(RFC 2045 и RFC 2046)
  • image/jpeg: JPEG (RFC 2045 и RFC 2046)
  • image/pjpeg: JPEG
  • image/png: Portable Network Graphics(RFC 2083)
  • image/svg+xml: SVG
  • image/tiff: TIFF(RFC 3302)
  • image/vnd.microsoft.icon: ICO
  • image/vnd.wap.wbmp: WBMP
  • image/webp: WebP

message

Сообщение

  • message/http (RFC 2616)
  • message/imdn+xml: IMDN (RFC 5438)
  • message/partial: E-mail (RFC 2045 и RFC 2046)
  • message/rfc822: E-mail; EML-файлы, MIME-файлы, MHT-файлы, MHTML-файлы (RFC 2045 и RFC 2046)

model

Для 3D моделей

  • model/example: (RFC 4735)
  • model/iges: IGS файлы, IGES файлы (RFC 2077)
  • model/mesh: MSH файлы, MESH файлы (RFC 2077), SILO файлы
  • model/vrml: WRL файлы, VRML файлы (RFC 2077)
  • model/x3d+binary: X3D ISO стандарт для 3D компьютерной графики, X3DB файлы
  • model/x3d+vrml: X3D ISO стандарт для 3D компьютерной графики, X3DV VRML файлы
  • model/x3d+xml: X3D ISO стандарт для 3D компютерной графики, X3D XML файлы
  • multipart[править | править вики-текст]
  • multipart/mixed: MIME E-mail (RFC 2045 и RFC 2046)
  • multipart/alternative: MIME E-mail (RFC 2045 и RFC 2046)
  • multipart/related: MIME E-mail (RFC 2387 и используемое MHTML (HTML mail))
  • multipart/form-data: MIME Webform (RFC 2388)
  • multipart/signed: (RFC 1847)
  • multipart/encrypted: (RFC 1847)

text

Текст

  • text/cmd: команды
  • text/css: Cascading Style Sheets (RFC 2318)
  • text/csv: CSV (RFC 4180)
  • text/html: HTML (RFC 2854)
  • text/javascript (Obsolete): JavaScript (RFC 4329)
  • text/plain: текстовые данные (RFC 2046 и RFC 3676)
  • text/php: Скрипт языка PHP
  • text/xml: Extensible Markup Language (RFC 3023)
  • text/markdown: файл языка разметки Markdown (RFC 7763)

video

Видео

  • video/mpeg: MPEG-1 (RFC 2045 и RFC 2046)
  • video/mp4: MP4 (RFC 4337)
  • video/ogg: Ogg Theora или другое видео (RFC 5334)
  • video/quicktime: QuickTime
  • video/webm: WebM
  • video/x-ms-wmv: Windows Media Video
  • video/x-flv: FLV
  • video/3gpp: .3gpp .3gp
  • video/3gpp2: .3gpp2 .3g2

vnd

Вендорные файлы

  • application/vnd.oasis.opendocument.text: OpenDocument
  • application/vnd.oasis.opendocument.spreadsheet: OpenDocument
  • application/vnd.oasis.opendocument.presentation: OpenDocument
  • application/vnd.oasis.opendocument.graphics: OpenDocument
  • application/vnd.ms-excel: Microsoft Excel файлы
  • application/vnd.openxmlformats-officedocument.spreadsheetml.sheet: Microsoft Excel 2007 файлы
  • application/vnd.ms-powerpoint: Microsoft Powerpoint файлы
  • application/vnd.openxmlformats-officedocument.presentationml.presentation: Microsoft Powerpoint 2007 файлы
  • application/msword: Microsoft Word файлы
  • application/vnd.openxmlformats-officedocument.wordprocessingml.document: Microsoft Word 2007 файлы
  • application/vnd.mozilla.xul+xml: Mozilla XUL файлы
  • application/vnd.google-earth.kml+xml: KML файлы (например, для Google Earth)

x

Нестандартные файлы

  • application/x-www-form-urlencoded Form Encoded Data
  • application/x-dvi: DVI
  • application/x-latex: LaTeX файлы
  • application/x-font-ttf: TrueType (не зарегистрированный MIME-тип, но наиболее часто используемый)
  • application/x-shockwave-flash: Adobe Flash
  • application/x-stuffit: StuffIt
  • application/x-rar-compressed: RAR
  • application/x-tar: Tarball
  • text/x-jquery-tmpl: jQuery
  • application/x-javascript:

x-pkcs

PKCS

  • application/x-pkcs12: p12 файлы
  • application/x-pkcs12: pfx файлы
  • application/x-pkcs7-certificates: p7b файлы
  • application/x-pkcs7-certificates: spc файлы
  • application/x-pkcs7-certreqresp: p7r файлы
  • application/x-pkcs7-mime: p7c файлы
  • application/x-pkcs7-mime: p7m файлы
  • application/x-pkcs7-signature: p7s файлы

Контейнеры


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

  • ‹div› (Division):


    ‹div› является универсальным контейнером, который используется для группировки элементов и создания различных секций на веб-странице. Он обычно используется для стилизации с помощью CSS и создания макетов.
  • ‹span›:


    ‹span› используется для определения небольших фрагментов текста или группировки элементов внутри строки. Он часто используется для применения стилей к конкретным частям текста.
  • ‹section›:


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

Grid и List теги


Теги для создания таблиц (Grid теги)

Теги для создания таблиц в HTML предоставляют возможность структурировать данные в виде сетки из строк и столбцов. Основными тегами для создания таблиц являются ‹table›, ‹tr›, ‹td› и ‹th›. Вот как они используются:

  • ‹table›:
    Тег ‹table› определяет саму таблицу и содержит все её содержимое. Обычно он содержит один или несколько элементов ‹tr›, представляющих строки таблицы.
  • ‹tr› (Table Row): Тег ‹tr› определяет строку в таблице. Он содержит один или несколько элементов ‹td› или ‹th›, представляющих ячейки в этой строке.
  • ‹td› (Table Data): Тег ‹td› определяет ячейку данных в таблице. Он содержит фактическое содержимое ячейки.
  • ‹th› (Table Header): Тег ‹th› определяет заголовочную ячейку в таблице. Обычно используется для первой строки или первого столбца таблицы. Текст в заголовочных ячейках по умолчанию выравнивается по центру и отображается жирным шрифтом.

Теги для создания списков (List теги)

В HTML есть несколько тегов, предназначенных для создания списков разного типа: упорядоченных (нумерованных), неупорядоченных (маркированных) и определенных (список определений). Вот они:

  • Неупорядоченный список (‹ul› - Unordered List):
    Этот тип списка используется для создания маркированных списков, где каждый элемент списка обычно представлен маркером, таким как точка, круг, квадрат или изображение.
  • Упорядоченный список (‹ol› - Ordered List):
    Этот тип списка используется для создания нумерованных списков, где каждый элемент списка имеет порядковый номер.
  • Список определений (‹dl› - Definition List): Этот тип списка используется для создания списков определений, где каждый элемент списка состоит из термина (тег ‹dt›) и его определения (тег ‹dd›).

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

Form-теги (Формы)


‹button›

Элемент ‹button› (от англ. button — кнопка) создаёт на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью ‹input› (с атрибутом type="button | reset | submit"). В отличие от этого элемента, ‹button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путём изменения шрифта, цвета фона, размеров и других параметров.

‹fieldset›

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

Браузеры для повышения наглядности отображают результат использования элемента ‹fieldset› в виде рамки. Её вид зависит от операционной системы, а также используемого браузера

‹form›

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

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

Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует её использование.

Когда форма отправляется на сервер, управление данными передаётся программе, заданной атрибутом action элемента ‹form›. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name элемента ‹input›, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.

Параметры перечисляются после вопросительного знака, указанного после адреса серверной программы и разделяются между собой символом амперсанда (&). Русские буквы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

Допускается внутрь контейнера ‹form› помещать другие элементы, при этом сама форма никак не отображается на веб-странице, видны только элементы внутри неё.

‹input›

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

Основной атрибут ‹input›, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file), кнопка с изображением (image) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых элементов.

‹keygen›

Используется для генерации пары ключей — закрытого и открытого. Когда форма отправляется на сервер, закрытый ключ сохраняется на локальном компьютере, а открытый ключ передаётся вместе с формой. Сами ключи необходимы для шифрования и расшифровки данных, создания и проверки цифровой подписи.

‹label›

Элемент ‹label› (от англ. label — метка) устанавливает связь между определённой меткой, в качестве которой обычно выступает текст, и элементом формы (‹input›, ‹select›, ‹textarea›). Такая связь необходима, чтобы изменять значения элементов формы при щелчке курсором мыши на текст. Кроме того, с помощью ‹label› можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.

Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for элемента ‹label›. При втором способе элемент формы помещается внутрь контейнера ‹label›.

‹legend›

Элемент ‹legend› (от англ. legend — легенда, надпись) применяется для создания заголовка группы элементов формы, которая определяется с помощью ‹fieldset›. Группа элементов обозначается в браузере с помощью рамки, а текст, который располагается внутри контейнера ‹legend›, встраивается в эту рамку.

‹optgroup›

Элемент ‹optgroup› (от англ. option group — группа вариантов) представляет собой контейнер, внутри которого располагаются элементы ‹option›, объединённые в одну группу. Особенностью ‹optgroup› является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения.

‹option›

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

‹select›

‹select› (от англ. selection — выбор) позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования атрибута size, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в элементе ‹option›, а также может изменяться с помощью стилей. Каждый пункт создаётся с помощью элемента ‹option›, который должен быть вложен в контейнер ‹select›. Если планируется отправлять данные списка на сервер, то требуется поместить ‹select› внутрь формы. Это также необходимо, когда к данным списка идёт обращение через скрипты.

‹textarea›

‹textarea› представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от элемента ‹input› в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

Между тегами ‹textarea› и ‹/textarea› можно поместить любой текст, который будет отображаться внутри поля.

Блочные/строчные теги


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

Блочные элементы:

  • Блочные элементы, такие как ‹div›, ‹p›, ‹h1›-‹h6›, ‹ul›, ‹ol›, создают "блоки" на странице.‹/li>
  • Они занимают всю доступную ширину по умолчанию и начинаются с новой строки.
  • Блочные элементы могут содержать другие блочные и строчные элементы, а также текст.
  • Их размеры можно устанавливать с помощью ширины (width) и высоты (height).
  • Примеры блочных элементов: ‹div›, ‹p›, ‹h1›-‹h6›, ‹ul›, ‹ol›, ‹li›, ‹table›, ‹form›.

Строчные элементы:

  • Строчные элементы, такие как ‹span›, ‹a›, ‹strong›, ‹em›, ‹img›, добавляются в текст и не создают новой строки.
  • Они занимают только столько места, сколько необходимо для их содержимого.
  • Строчные элементы не могут содержать другие блочные элементы, но могут содержать другие строчные элементы или текст.
  • Их размеры обычно не задаются явно и зависят от содержимого.
  • Примеры строчных элементов: ‹span›, ‹a›, ‹strong›, ‹em›, ‹img›, ‹input›, ‹br›, ‹label›.

Блочно-строчные элементы:

  • Некоторые элементы могут демонстрировать поведение как блочных, так и строчных элементов в зависимости от контекста. Эти элементы иногда называют "блочно-строчными" или "инлайн-блоками".
  • Примеры таких элементов включают в себя ‹button›, ‹input type="button"›, ‹input type="checkbox"›, ‹input type="radio"›.

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

Библиотека тегов

Тег ‹a›

Тег ‹a› в HTML создает гиперссылки. Атрибут href указывает адрес страницы, куда будет произведен переход при клике. Текст между открывающим и закрывающим тегами отображается как кликабельный текст ссылки или изображение.

Тег ‹abbr›

Тег ‹abbr› используется для определения аббревиатуры или акронима, например, "HTML" для "HyperText Markup Language". Обычно подсвечивается при наведении курсора, чтобы пользователь мог узнать расшифровку.

Тег ‹address›

‹address› предназначен для указания контактной информации автора контента или владельца веб-страницы, такой как адрес электронной почты или почтовый адрес.

Тег ‹area›

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

Тег ‹article›

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

Тег ‹aside›

‹aside› используется для выделения контента, который относится к основному контенту страницы, но может быть рассмотрен вторичным. Например, это может быть боковая панель с дополнительной информацией или ссылками на похожие статьи.

Тег ‹audio›

‹audio› позволяет встраивать аудиофайлы на веб-страницу, например, музыкальные треки или аудиофрагменты. Пользователи могут прослушивать их прямо на странице.

Тег ‹b›

‹b› определяет текст, который следует сделать жирным. Однако для логического выделения текста рекомендуется использовать тег ‹strong›.

Тег ‹base›

‹base› определяет базовый URL для всех относительных URL-адресов на веб-странице. Это позволяет установить базовый путь для всех ссылок и изображений на странице.

Тег ‹bdi›

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

Тег ‹bdo›

‹bdo› используется для изменения направления текста, например, для отображения текста справа налево для языков, в которых принята такая запись, таких как арабский или иврит.

Тег ‹blockquote›

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

Тег ‹body›

‹body› определяет основное содержимое HTML документа, такое как текст, изображения, таблицы и другие элементы, отображаемые в окне браузера.

Тег ‹br›

‹br› создает перенос строки в тексте. Этот тег не имеет закрывающего тега и используется для перехода на новую строку без создания нового абзаца.

Тег ‹canvas›

‹canvas› этот тег создает область рисования на веб-странице, на которой можно отображать графику, создавать анимацию или рисовать графические объекты с помощью JavaScript. Он предоставляет API для рисования линий, фигур, текста и изображений.

Тег ‹caption›

Тег ‹caption› используется для добавления заголовка к таблице с помощью тега ‹table›. Заголовок ‹caption› обычно располагается над таблицей и содержит краткое описание ее содержимого. Это помогает пользователям лучше понять содержание таблицы.

Тег ‹cite›

‹cite› используется для выделения текста, который является цитатой или ссылкой на источник. Обычно его применяют к произведениям и источникам информации, таким как книги, статьи, фильмы или веб-сайты.

Тег ‹code›

Тег ‹code› определяет фрагмент текста, который должен быть отображен как код программы или компьютерный вывод. Обычно это используется для вставки кода в документ HTML, чтобы он отображался с моноширинным шрифтом и сохранял форматирование.

Теги ‹col› и ‹colgroup›

‹col› и ‹colgroup›: Эти теги используются вместе для определения стилей и свойств столбцов в таблице. ‹col› определяет отдельный столбец, а ‹colgroup› группирует один или несколько тегов ‹col› для применения общих свойств ко всем столбцам.

Тег ‹data›

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

Тег ‹datalist›

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

Тег ‹dd›

Тег ‹dd› используется в списке определений для определения термина или слова, которое следует за тегом ‹dt›. Он представляет собой определение или объяснение термина.

Тег ‹del›

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

Тег ‹details›

Тег ‹details› создает виджет для отображения или скрытия дополнительной информации на веб-странице. Когда пользователь щелкает на заголовок ‹summary›, связанный с тегом ‹details›, дополнительное содержимое открывается или закрывается.

Тег ‹dfn›

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

Тег ‹dialog›

Тег ‹dialog› определяет диалоговое окно или модальное окно на веб-странице. Это окно может быть открыто с помощью JavaScript и использоваться для отображения дополнительной информации, взаимодействия с пользователем или выполнения каких-либо действий. Обычно модальное окно блокирует взаимодействие с остальной частью страницы до закрытия.

Тег ‹dt›

Тег ‹dt› используется в списке определений для определения термина или слова. Он предшествует тегу ‹dd›, который содержит определение термина. Обычно ‹dt› используется для указания на термин, который будет определен в списке определений.

Тег ‹em›

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

Тег ‹embed›

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

Тег ‹figcaption›

Этот тег используется внутри тега ‹figure› для добавления подписи к содержимому, например, изображению или видео. Подпись, указанная в ‹figcaption›, отображается рядом с основным содержимым и обычно используется для описания или пояснения содержимого.

Тег ‹figure›

Тег ‹figure› используется для группирования связанного контента, такого как изображения, диаграммы, аудио или видео, а также их подписей с помощью тега ‹figcaption›. Это помогает создать единый блок содержимого, который может быть стилизован или оформлен в соответствии с дизайном страницы.

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

‹h1..6›

‹h1›, ‹h2›, ‹h3›, ‹h4›, ‹h5›, ‹h6›: Эти теги используются для определения заголовков различного уровня на веб-странице. ‹h1› обычно используется для наиболее важного заголовка, а ‹h6› - для менее значимых заголовков. Они помогают организовать содержимое страницы и облегчают навигацию пользователя по документу.

Тег ‹head› определяет метаданные документа, такие как заголовок страницы, ссылки на стили CSS, скрипты JavaScript, метатеги для поисковых систем и другую информацию, не отображаемую непосредственно на странице.

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

Тег ‹hgroup›

Этот тег группирует несколько тегов заголовков (‹h1›, ‹h2›, ‹h3›, ‹h4›, ‹h5›, ‹h6›) вместе как один блок, обозначая связанные заголовки. Это может быть полезно для создания стилизованных заголовков или для улучшения семантики страницы.

Тег ‹hr›

Тег ‹hr› используется для создания горизонтальной линии-разделителя на веб-странице. Он может разделять различные секции содержимого или служить визуальным разделителем между элементами.

Тег ‹html›

Этот тег обозначает начало и конец HTML документа. Все содержимое веб-страницы должно находиться внутри тега ‹html›. Он является корневым элементом документа.

Тег ‹i›

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

Тег ‹iframe›

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

Тег ‹img›

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

Тег ‹ins›

Этот тег используется для пометки текста как вставленного или добавленного. Он обычно используется в паре с тегом ‹del›, который помечает текст как удаленный или зачеркнутый. Обычно в браузерах текст, помеченный тегом ‹ins›, отображается подчеркнутым или с другим стилем, указывающим на его добавление.

Тег ‹kbd›

Тег ‹kbd› используется для обозначения текста, предназначенного для ввода с клавиатуры. Это может быть команда, сочетание клавиш или название клавиши. Обычно текст, помеченный тегом ‹kbd›, отображается с моноширинным шрифтом и часто выделяется квадратными скобками для обозначения клавиш.

Тег ‹li

Тег ‹li› используется для создания элемента списка в списке маркированных (‹ul›) или нумерованных (‹ol›). Каждый ‹li› обычно содержит один пункт списка.

Тег ‹link› используется для связи документа с внешним ресурсом, таким как файл CSS или иконка, а также для определения отношений между текущим документом и внешними ресурсами.

Тег ‹main›

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

Тег ‹map›

Тег ‹map› определяет карту изображения, которая ассоциирует определенные области изображения с гиперссылками или действиями. Он используется в паре с тегом ‹area› для создания кликабельных областей на изображении.

Тег ‹mark›

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

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

Тег ‹meta›

Тег ‹meta› используется для определения метаданных документа, таких как описание, ключевые слова, автор и другие метаданные. Он обычно находится внутри тега ‹head› и не имеет закрывающего тега.

Тег ‹meter›

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

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

Тег ‹noscript›

Тег ‹noscript› предназначен для определения содержимого, которое будет отображаться в случае отключенного или не поддерживаемого браузером скриптового языка, обычно JavaScript.

Тег ‹object›

Тег ‹object› используется для встраивания веб-содержимого, такого как мультимедийные файлы, в веб-страницу. Он поддерживает различные типы контента, такие как изображения, видео, аудио, Flash-анимации и многие другие.

Тег ‹output›

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

Тег ‹p›

Тег ‹p› определяет абзац текста на веб-странице. Он обычно используется для разделения текста на логические блоки или абзацы, что делает контент более удобным для чтения.

Тег ‹param›

Этот тег используется вместе с тегом ‹object› для передачи параметров или атрибутов встроенному объекту. Он определяет параметры, которые будут переданы внедренному объекту, такому как параметры мультимедийных файлов или настроек плагина.

Тег ‹picture›

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

Тег ‹pre›

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

Тег ‹progress›

Тег ‹progress› используется для отображения прогресса выполнения задачи на веб-странице. Он представляет собой полосу прогресса, которая показывает текущий статус или процент выполнения задачи.

Тег ‹q›

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

‹rb›, ‹rp›, ‹rt›, ‹rtc›, ‹ruby›

Эти теги используются вместе для определения руби-текста, который используется в японском и китайском языках для обозначения произношения иероглифов. ‹rb› определяет базовый текст, ‹rt› - его прописной вариант, ‹rp› - скобки, которые могут использоваться для отображения руби-текста в тексте без поддержки руби-текста, ‹rtc› - контейнер, содержащий текст для отображения вместе с руби-текстом, ‹ruby› - контейнер, объединяющий базовый текст и его руби-текст.

Тег ‹s›

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

Тег ‹samp›

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

Тег ‹script›

Этот тег используется для встраивания скриптов на веб-страницу. Он может содержать JavaScript, VBScript или другие скриптовые языки, которые выполняются на стороне клиента (в браузере) или на стороне сервера (если используется серверный скрипт).

Тег ‹slot›

Тег ‹slot› используется в контексте тега ‹template› для определения места вставки контента, который будет создан во время рендеринга. Он позволяет создавать макеты, которые могут быть заполнены динамически с помощью JavaScript или фреймворков.

Тег ‹small›

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

Тег ‹source›

Этот тег определяет источник мультимедийного контента, такого как изображения, видео или аудио, для элементов ‹picture›, ‹video› и ‹audio›. Он указывает браузеру, откуда загрузить контент, и может содержать различные варианты источников для обеспечения совместимости с разными форматами и разрешениями.

Тег ‹strong›

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

Тег ‹style›

Тег ‹style› используется для определения стилей CSS непосредственно внутри документа HTML. Он позволяет задавать внешний вид элементов веб-страницы, таких как цвет текста, размер шрифта, расположение и многое другое.

Тег ‹sub›

Этот тег используется для пометки текста как нижнего индекса. Текст, помеченный тегом ‹sub›, обычно отображается ниже базовой линии, например, для обозначения химических формул, математических уравнений или сносок.

Тег ‹summary›

Этот тег определяет заголовок для элемента ‹details›, который создает виджет для отображения или скрытия дополнительной информации на веб-странице. Заголовок ‹summary› обычно отображается в виде кликабельного текста, который можно щелкнуть, чтобы открыть или закрыть связанный элемент ‹details›.

Тег ‹sup›

Этот тег используется для пометки текста как верхнего индекса. Текст, помеченный тегом ‹sup›, обычно отображается над базовой линией, например, для обозначения степени, формул или сносок.

Тег ‹tbody›

Этот тег определяет тело таблицы в HTML. Он обычно используется вместе с тегами ‹table› и ‹tr› для группировки строк таблицы.

Тег ‹template›

Тег ‹template› используется для создания шаблонов содержимого, которые не будут отображаться на веб-странице, пока не будут активированы с помощью JavaScript.

Тег ‹tfoot›

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

Тег ‹thead›

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

Тег ‹time›

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

Тег ‹title›

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

Тег ‹track›

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

Тег ‹tt›

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

Тег ‹u›

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

Тег ‹var›

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

Тег ‹video›

Этот тег определяет видео или фильм на веб-странице. Он позволяет встраивать видео-контент с помощью URL-адреса видеофайла или внедренного кода.

Тег ‹wbr›

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

Тег ‹xmp›

Этот тег предназначен для отображения предварительно отформатированного текста без обработки HTML или CSS. Он используется редко из-за своей устаревшей природы и недостатка поддержки современными браузерами.