Справочник тегов HTML
HTML — язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги — это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTML
Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
| Тег | Краткое описание |
|---|---|
| <!—. —> | Комментарий. Подробнее |
| <!DOCTYPE> | Определяет тип документа. Подробнее |
| <a> | Ссылка, гиперссылка, якорь. Подробнее |
| <abbr> | Определяет текст как аббревиатуру. Подробнее |
| <address> | Контактная информация автора или владельца документа. Подробнее |
| <area> | Определяет область на карте-изображении |
| <article> | Статья |
| <aside> | Контент в стороне (содержимое не является основным на странице по смыслу) |
| <audio> | Позволяет вставить воспроизводимый аудио файл. Подробнее |
| <b> | Полужирный текст. Подробнее |
| <base> | Задает базовый URL или атрибут target для относительных ссылок в документе. Подробнее |
| <bdi> | Область, где написание текста может имееть другое направления. Подробнее |
| <bdo> | Устанавливает направление написания текста. В отличии от <bdi> направление указывается физическое направление Подробнее |
| <blockquote> | Цитата. Подробнее |
| <body> | Указывает область body документа. Подробнее |
| <br> | Перенос строки. Подробнее |
| <button> | Кликабельная кнопка. Подробнее |
| <canvas> | Используется для рисовании графики с помощью скриптов |
| <caption> | Подпись таблицы. Подробнее |
| <cite> | Сноска на название материала. Подробнее |
| <code> | Используется для вставки компьютерного кода в текстовом виде. Подробнее |
| <col> | Задает характеристики колонок в таблице. Подробнее |
| <colgroup> | Определяет группу из одной или более колонок таблицы для форматирования. Подробнее |
| <datalist> | Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле. Подробнее |
| <dd> | Определяет описание термина из тега <dt> в списке терминов <dl>. Подробнее |
| <del> | Текст, который удален в новой версии документа. Подробнее |
| <details> | Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть. Подробнее |
| <dfn> | Указывает, что содержимое является термином. Подробнее |
| <dialog> | Определяет диалоговое окно или интерактивный элемент |
| <div> | Блочный элемент — один из основных элементов верстки. Подробнее |
| <dl> | Определяет список определений. Подробнее |
| <dt> | Название термина в списке определений <dl>. Подробнее |
| <em> | выделенный по смыслу текст (обычно, текст выделенный курсивом). Подробнее |
| <embed> | Контейнер для внешнего приложения |
| <fieldset> | Группа связанных элементов в форме. Подробнее |
| <figcaption> | Заголовок для <figure> элемента |
| <figure> | Определяет автономную группу из нескольких элементов (например картинка с подписью) |
| <footer> | Нижний колонтитул |
| <form> | Определяет форму пользовательского ввода. Подробнее |
| <h1> — <h6> | Заголовки HTML разного уровня: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Подробнее |
| <head> | Указывает область head документа. Подробнее |
| <header> | Блок заголовка |
| <hr> | Горизонтальная линия — тематический разделитель. Подробнее |
| <html> | Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. Подробнее |
| <i> | Выделяет текст курсивом. Подробнее |
| <iframe> | Определяет встроенный фрейм |
| <img> | Изображение, картинка. Подробнее |
| <input> | Поле для ввода, элемент формы. Подробнее |
| <ins> | Текст, который был добавлен в новой версии документа. Подробнее |
| <kbd> | Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. Подробнее |
| <label> | Метка для поля ввода. Обычно содержит подпись поля. Подробнее |
| <legend> | Заголовок элементов <fieldset>. Подробнее |
| <li> | Элемент списка. Подробнее |
| <link> | Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS). Подробнее |
| <main> | Основной контент |
| <map> | Контейнер для <area>. Определяет пользовательскую карту на изображении |
| <mark> | Выделенный текст (обычно с помощью подсветки фона). Подробнее |
| <menu> | Контейнер для списка пунктов меню |
| <menuitem> | Определяет элементы, которые пользователь может вызвать из контекстного меню |
| <meta> | Используется для определения мета-данных документа. Подробнее |
| <meter> | Измеритель значений в заданном диапазоне |
| <nav> | Контейнер для навигационных элементов |
| <noscript> | Альтернативный контент для пользователей, отключивших скрипты |
| <object> | Определяет встроенный объект |
| <ol> | Определяет нумерованный список. Подробнее |
| <optgroup> | Определяет группу связанных вариантов в выпадающем списке. Дает название группы. Подробнее |
| <option> | Параметр (вариант выбора) в выпадающем списке. Подробнее |
| <output> | Результат вычислений. Подробнее |
| <p> | Абзац. Подробнее |
| <param> | Задает параметры для встроенных объектов |
| <picture> | Контейнер для нескольких изображений |
| <pre> | Предварительно отформатированный текст. Подробнее |
| <progress> | Индикатор выполнения (прогресса) |
| <q> | Цитата в тексте. Подробнее |
| <rp> | Альтернативный текст, если браузер не поддерживает тег <ruby>. Подробнее |
| <rt> | Аннотация к содержимому тега <ruby>. Подробнее |
| <ruby> | Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). Подробнее |
| <s> | Перечеркнутый текст. Подробнее |
| <samp> | Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). Подробнее |
| <script> | Определяет скрипт или подключение скрипта из внешнего ресурса. Подробнее |
| <section> | Раздел |
| <select> | Определяет выпадающий список или список с множественным выбором. Подробнее |
| <small> | Текст шрифтом меньшего размера. Подробнее |
| <source> | Определяет ресурс для тегов <video>, <audio> и <picture>. Подробнее |
| <span> | Строчный элемент. Подробнее |
| <strong> | Текст, выделенный по значению. Обычно отображается полужирным. Подробнее |
| <style> | Определяет контейнер для определения CSS стилей документа. Подробнее |
| <sub> | Отображает текст в виде нижнего индекса. Подробнее |
| <summary> | Заголовок внутри тега <details>. Подробнее |
| <sup> | Отображает текст в виде верхнего индекса. Подробнее |
| <table> | Определяет таблицу. Подробнее |
| <tbody> | Определяет область контента в таблице. Подробнее |
| <td> | Ячейка в таблице <table>. Подробнее |
| <textarea> | Многострочное поле для ввода. Подробнее |
| <tfoot> | Определяет группу строк в нижней части таблицы <table> — нижний колонтитул. Подробнее |
| <th> | Ячейка — заголовок в таблице <table>. Подробнее |
| <thead> | Определяет группу строк в верхней части таблицы <table> — верхний колонтитул. Подробнее |
| <time> | Дата и/или время. Подробнее |
| <title> | Заголовок HTML документа. Подробнее |
| <tr> | Определяет строку в таблице. Подробнее |
| <track> | Определяет текстовую дорожку для тегов <video> и <audio> Подробнее |
| <ul> | Определяет маркированный список. Подробнее |
| <var> | Используется для обозначения содержимого тега как переменной. Подробнее |
| <video> | Позволяет вставить воспроизводимое видео. Подробнее |
| <wbr> | Место, где допускается перенос строки. Подробнее |
Устаревшие теги HTML
Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.
HTML elements reference
This page lists all the HTML elements, which are created using tags.
They are grouped by function to help you find what you have in mind easily. An alphabetical list of all elements is provided in the sidebar on every element’s page as well as this one.
Note: For more information about the basics of HTML elements and attributes, see the section on elements in the Introduction to HTML article.
Main root
| Element | Description |
|---|---|
| <html> | Represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element. |
Document metadata
Metadata contains information about the page. This includes information about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or link to another file that has the information.
| Element | Description |
|---|---|
| <base> | Specifies the base URL to use for all relative URLs in a document. There can be only one such element in a document. |
| <head> | Contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets. |
| <link> | Specifies relationships between the current document and an external resource. This element is most commonly used to link to CSS, but is also used to establish site icons (both «favicon» style icons and icons for the home screen and apps on mobile devices) among other things. |
| <meta> | Represents metadata that cannot be represented by other HTML meta-related elements, like <base> , <link> , <script> , <style> and <title> . |
| <style> | Contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing this element. |
| <title> | Defines the document’s title that is shown in a browser’s title bar or a page’s tab. It only contains text; tags within the element are ignored. |
Sectioning root
| Element | Description |
|---|---|
| <body> | represents the content of an HTML document. There can be only one such element in a document. |
Content sectioning
Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.
| Element | Description |
|---|---|
| <address> | Indicates that the enclosed HTML provides contact information for a person or people, or for an organization. |
| <article> | Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. |
| <aside> | Represents a portion of a document whose content is only indirectly related to the document’s main content. Asides are frequently presented as sidebars or call-out boxes. |
| <footer> | Represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data or links to related documents. |
| <header> | Represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements. |
| <h1> , <h2> , <h3> , <h4> , <h5> , <h6> | Represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. |
| <hgroup> | Represents a heading grouped with any secondary content, such as subheadings, an alternative title, or a tagline. |
| <main> | Represents the dominant content of the body of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. |
| <nav> | Represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes. |
| <section> | Represents a generic standalone section of a document, which doesn’t have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions. |
Text content
Use HTML text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags. Important for accessibility and SEO, these elements identify the purpose or structure of that content.
| Element | Description |
|---|---|
| <blockquote> | Indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element. |
| <dd> | Provides the description, definition, or value for the preceding term ( <dt> ) in a description list ( <dl> ). |
| <div> | The generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g., styling is directly applied to it, or some kind of layout model like flexbox is applied to its parent element). |
| <dl> | Represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs). |
| <dt> | Specifies a term in a description or definition list, and as such must be used inside a <dl> element. It is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element. |
| <figcaption> | Represents a caption or legend describing the rest of the contents of its parent <figure> element. |
| <figure> | Represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit. |
| <hr> | Represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section. |
| <li> | Represents an item in a list. It must be contained in a parent element: an ordered list ( <ol> ), an unordered list ( <ul> ), or a menu ( <menu> ). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter. |
| <menu> | A semantic alternative to <ul> , but treated by browsers (and exposed through the accessibility tree) as no different than <ul> . It represents an unordered list of items (which are represented by <li> elements). |
| <ol> | Represents an ordered list of items — typically rendered as a numbered list. |
| <p> | Represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields. |
| <pre> | Represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written. |
| <ul> | Represents an unordered list of items, typically rendered as a bulleted list. |
Inline text semantics
Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
| Element | Description |
|---|---|
| <a> | Together with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. |
| <abbr> | Represents an abbreviation or acronym. |
| <b> | Used to draw the reader’s attention to the element’s contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use <b> for styling text or granting importance. If you wish to create boldface text, you should use the CSS font-weight property. If you wish to indicate an element is of special importance, you should use the strong element. |
| <bdi> | Tells the browser’s bidirectional algorithm to treat the text it contains in isolation from its surrounding text. It’s particularly useful when a website dynamically inserts some text and doesn’t know the directionality of the text being inserted. |
| <bdo> | Overrides the current directionality of text, so that the text within is rendered in a different direction. |
| <br> | Produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant. |
| <cite> | Used to mark up the title of a cited creative work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata. |
| <code> | Displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent default monospace font. |
| <data> | Links a given piece of content with a machine-readable translation. If the content is time- or date-related, the time element must be used. |
| <dfn> | Used to indicate the term being defined within the context of a definition phrase or sentence. The ancestor <p> element, the <dt> / <dd> pairing, or the nearest section ancestor of the <dfn> element, is considered to be the definition of the term. |
| <em> | Marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis. |
| <i> | Represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. Historically, these have been presented using italicized type, which is the original source of the <i> naming of this element. |
| <kbd> | Represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard. |
| <mark> | Represents text which is marked or highlighted for reference or notation purposes due to the marked passage’s relevance in the enclosing context. |
| <q> | Indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don’t require paragraph breaks; for long quotations use the <blockquote> element. |
| <rp> | Used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the <ruby> element. One <rp> element should enclose each of the opening and closing parentheses that wrap the <rt> element that contains the annotation’s text. |
| <rt> | Specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The <rt> element must always be contained within a <ruby> element. |
| <ruby> | Represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common. |
| <s> | Renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the del and ins elements, as appropriate. |
| <samp> | Used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser’s default monospaced font (such as Courier or Lucida Console). |
| <small> | Represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small . |
| <span> | A generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang . It should be used only when no other semantic element is appropriate. <span> is very much like a div element, but div is a block-level element whereas a <span> is an inline-level element. |
| <strong> | Indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type. |
| <sub> | Specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text. |
| <sup> | Specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text. |
| <time> | Represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders. |
| <u> | Represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS. |
| <var> | Represents the name of a variable in a mathematical expression or a programming context. It’s typically presented using an italicized version of the current typeface, although that behavior is browser-dependent. |
| <wbr> | Represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location. |
Image and multimedia
HTML supports various multimedia resources such as images, audio, and video.
| Element | Description |
|---|---|
| <area> | Defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with hyperlink. |
| <audio> | Used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the source element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream . |
| <img> | Embeds an image into the document. |
| <map> | Used with <area> elements to define an image map (a clickable link area). |
| <track> | Used as a child of the media elements, audio and video. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format ( .vtt files)—Web Video Text Tracks. |
| <video> | Embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the audio element may provide a more appropriate user experience. |
Embedded content
In addition to regular multimedia content, HTML can include a variety of other content, even if it’s not always easy to interact with.
| Element | Description |
|---|---|
| <embed> | Embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in. |
| <iframe> | Represents a nested browsing context, embedding another HTML page into the current one. |
| <object> | Represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin. |
| <picture> | Contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios. |
| <portal> | Enables the embedding of another HTML page into the current one for the purposes of allowing smoother navigation into new pages. |
| <source> | Specifies multiple media resources for the picture, the audio element, or the video element. It is a void element, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats. |
SVG and MathML
You can embed SVG and MathML content directly into HTML documents, using the <svg> and <math> elements.
| Element | Description |
|---|---|
| <svg> | Container defining a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document. |
| <math> | The top-level element in MathML. Every valid MathML instance must be wrapped in it. In addition you must not nest a second <math> element in another, but you can have an arbitrary number of other child elements in it. |
Scripting
In order to create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.
| Element | Description |
|---|---|
| <canvas> | Container element to use with either the canvas scripting API or the WebGL API to draw graphics and animations. |
| <noscript> | Defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser. |
| <script> | Used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL’s GLSL shader programming language and JSON. |
Demarcating edits
These elements let you provide indications that specific parts of the text have been altered.
| Element | Description |
|---|---|
| <del> | Represents a range of text that has been deleted from a document. This can be used when rendering «track changes» or source code diff information, for example. The <ins> element can be used for the opposite purpose: to indicate text that has been added to the document. |
| <ins> | Represents a range of text that has been added to a document. You can use the <del> element to similarly represent a range of text that has been deleted from the document. |
Table content
The elements here are used to create and handle tabular data.
| Element | Description |
|---|---|
| <caption> | Specifies the caption (or title) of a table. |
| <col> | Defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element. |
| <colgroup> | Defines a group of columns within a table. |
| <table> | Represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. |
| <tbody> | Encapsulates a set of table rows ( <tr> elements), indicating that they comprise the body of the table ( <table> ). |
| <td> | Defines a cell of a table that contains data. It participates in the table model. |
| <tfoot> | Defines a set of rows summarizing the columns of the table. |
| <th> | Defines a cell as header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes. |
| <thead> | Defines a set of rows defining the head of the columns of the table. |
| <tr> | Defines a row of cells in a table. The row’s cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements. |
Forms
HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the website or application. There’s a great deal of further information about this available in the HTML forms guide.
| Element | Description |
|---|---|
| <button> | An interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog. |
| <datalist> | Contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls. |
| <fieldset> | Used to group several controls as well as labels ( <label> ) within a web form. |
| <form> | Represents a document section containing interactive controls for submitting information. |
| <input> | Used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes. |
| <label> | Represents a caption for an item in a user interface. |
| <legend> | Represents a caption for the content of its parent <fieldset> . |
| <meter> | Represents either a scalar value within a known range or a fractional value. |
| <optgroup> | Creates a grouping of options within a <select> element. |
| <option> | Used to define an item contained in a select, an <optgroup> , or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document. |
| <output> | Container element into which a site or app can inject the results of a calculation or the outcome of a user action. |
| <progress> | Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. |
| <select> | Represents a control that provides a menu of options. |
| <textarea> | Represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form. |
Interactive elements
HTML offers a selection of elements which help to create interactive user interface objects.
| Element | Description |
|---|---|
| <details> | Creates a disclosure widget in which information is visible only when the widget is toggled into an «open» state. A summary or label must be provided using the <summary> element. |
| <dialog> | Represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow. |
| <summary> | Specifies a summary, caption, or legend for a details element’s disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed. |
Web Components
Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.
| Element | Description |
|---|---|
| <slot> | Part of the Web Components technology suite, this element is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together. |
| <template> | A mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript. |
Obsolete and deprecated elements
Warning: These are old HTML elements which are deprecated and should not be used. You should never use them in new projects, and you should replace them in old projects as soon as you can. They are listed here for completeness only.
Какие теги есть в html
HTML
Учебник о языке разметки HTML
Логотип Википедии
В Википедии имеется статья по теме «HTML»
Логотип Викиверситета Имеется курс в Викиверситете по теме
«HTML»
В данном учебнике мы постараемся расказать об HTML наиболее понятным и простым образом, при этом, не забывая про современные тенденции в верстке сайтов. Поэтому здесь будем рассматривать HTML5, так как на данный момент его рекомендуют и поддерживают многие браузеры, а также, официальный консорциум.
Содержание
Введение [ править ]
HTML (Hyper Text Markup Language, расшифровывается как язык разметки гипертекстовых страниц) — каркас всех современных сайтов.HTML является языком разметки, но не языком программирования. Под языком разметки понимается набор символов созданный с целью передачи информации о строении текста. Это значит, что в отличии от языков программирования, язык разметки только управляет «внешним видом» текста для конечного пользователя.
Мы ранее сказали, что будем рассказывать об HTML5. Чем отличается стандарт HTML5 от предыдущих HTML? Существует такая организация W3C (World Wide Web Consortium). Суть её работы хорошо выражена в их лозунге «Leading the Web to Its Full Potential…» («Приведём всемирную паутину к лидерству, раскрыв все её возможности»). И когда они говорят, что в будущем браузеры не будут поддерживать старые версии HTML, то оно наверняка так и будет — в данный момент, почти все браузеры придерживаются единого стандарта, который разрабатывает W3C, а именно — HTML5.
Когда W3C создавали стандарт HTML, в нём не предусматривалось тегов для форматирования гипертекста — теги показывали только структуру документа, например:
Но потом разработчики браузеров начали добавлять в HTML свои теги, которые им нравились. Например:
Вскоре, количество тегов сильно разрослось.
Также нежелательно было появление в стандарте HTML 3.2 тега <font> (он нужен для изменения цвета, шрифта и размера текста). Представьте себе, что нужно написать страницу, где все заголовки красные. И приходится помимо тегов в заголовке писать ещё тег шрифта с атрибутом цвета.
С HTML4 разделяются форматирование документа и его структура. Теперь в HTML-странице сохраняются только структура страницы (разноуровневые заголовки, абзацы, цитаты, списки), а всё, что относится к форматированию, описывается в CSS. Это удобно, поскольку позволяет быстро менять оформление всего сайта изменением только файла со стилем, и, кроме того, уменьшает длину кода, который нужно написать.
В HTML5 же, была предпринята попытка стандартизации: многие привычные теги (в том числе и выше названный <font> ) осуждаются, все оформление рекомендуется использовать в отдельном CSS-файле, появились новые семантические теги, функции для которых будут добавлены в будущем.
Собираем инструменты [ править ]
Текстовый редактор [ править ]
Первым делом, нам понадобится текстовый редактор. Текстовый редактор есть на каждом компьютере. Важно заметить: нам нужна программа для редактирования текстовых файлов, а не документов (то есть ни в коем случае нельзя использовать текстовые препроцессоры по типу Microsoft Word). Обычно стандартного «Блокнота» Windows достаточно, но есть текстовые редакторы, которые лучше приспособлены к написанию HTML-страниц. Неплохие редакторы Notepad ++, Brackets, Atom, Sublime Text в которых хорошо писать не только HTML, CSS, но и ещё несколько десятков других языков программирования и разметки. У них есть несколько удобных функций,таких как подсветка синтаксиса, которая позволяет выявлять ошибки прямо во время их создания, автоматическое дополнение тегов, что позволит сэкономить время на написание кода и многое другое.
Браузер [ править ]
О браузере также стоит сказать несколько слов. Все советуют держать у себя на компьютере набор браузеров: Firefox, Opera, Chrome, Safari и просматривать свои страницы во всех сразу. Правда, функции тегов в разных браузерах отличаются не сильно (а с введением HTML5 — различий в тегах нет). Поэтому учиться можно просматривая свои страницы в одном из них, а уже когда пишете что-то большее — посмотрите, не имеется ли слишком критических различий во всех других. Тем не менее, в современных и наиболее популярных браузерах Firefox и Chrome различия настолько незначительны и касаются в основном старых тегов.
Первая страница [ править ]
Формат файлов [ править ]
Чтобы создать веб-страницу, нужно создать в файловой системе текстовый файл с расширением .html или .htm. Какое из них выбрать — философский вопрос. .htm — сокращение от .html, что довольно смешно, поскольку .html — это тоже сокращение. Но были времена, когда в некоторых ОС расширение файла могло содержать максимум 3 символа (например, DOS), и страницы гипертекста имели расширение .htm. Теперь можно использовать оба расширения,но лучше всего использовать именно .html
Содержание веб-страницы [ править ]
Веб-страницы состоят из гипертекста. Гипертекст отличается от обычного текста тем, что содержит гиперссылки. Они обычно обозначены синим цветом, и позволяют сделать переход в другой гипертекст, или любое другое место (якорь), указанное с помощью URL. Гипертекст состоит из тегов.
URL (Universal Resource Locator) — адрес ресурса, который мы видим в адресной строке браузера.
Тег — это всё, что находится между угловыми скобками. Например <html> . Теги не отображаются браузером, они только задают структуру текста. Теги бывают трёх видов:
- Открывающие
- Закрывающие
- Одинарные.
Открывающие и закрывающие теги всегда существуют парами: открывающий <html> и закрывающий </html> . Закрывающий отличается от открывающего тем, что после угловой скобки < стоит знак слэш (знак дроби) «/».
Элемент гипертекста — это всё, что находится между открывающим и закрывающим тегом. Элементы бывают вложенными.
Приведу пример кода веб-страницы:
Все теги, которые встречаются выше, обязательны. Они присутствуют в каждой интернет-странице. Конечно, если вы какой-то из них забудете, браузер-то разберётся, но все серьёзные люди такие вещи не забывают. Тег <html> говорит браузеру, что в нём содержится код HTML. Тег <head> говорит, что в нём содержится заголовочная информация страницы. Эта информация на самой странице отсутствует. Тег <title> , как уже было сказано, содержит заголовок, который обычно отображается на вкладке. <body> содержит тело, тоесть содержимое страницы.
Комментарии [ править ]
Кроме тегов и текста, гипертекстовые страницы могут содержать комментарии. Комментарии выглядят так: <!— Комментарий —> . Они позволяют писать на странице текст, который не отображается браузером. Это нужно для вставки сообщений типа <!— Здесь не забыть дописать абзац о комментариях —> .
В HTML существует проблемы с символами сравнения. Чтобы отображать некоторые нестандартные символы, существует понятие специальных символов. Специальные символы в HTML описываются так: &код;. Например:
| Название | Код | Вид |
|---|---|---|
| Менее | < | < |
| Более | > | > |
| Амперсанд | & | & |
| Кавычка | " | « |
Здесь я указал только самые-самые нужные. Если вам нужно больше, надо поискать. Можно поискать где-то здесь. То есть то, что мы хотели описать в предыдущем примере, будет выглядеть так:
Кодировка [ править ]
Одним из обязательных требований для веб-страницы является указывание кодировки. Опять же браузер сам может определить кодировку. Но лучше указывать. Способа есть два:
Оба способа одинаковы. Но второй короче.
Атрибуты [ править ]
Некоторые теги имеют свойства, которые называются атрибутами. Например, почти каждый тег имеет атрибут title. В нём прописывается текст подсказки, которая видна, когда пользователь наводит курсор на элемент тега. Пусть нам нужно написать известное сокращение: HTML. И если пользователи наводят на него курсор, они могут его расшифровать. Это делается просто:
Здесь мы видим, как правильно записывать атрибуты. Название атрибута, затем знак равенства, и значение в двойных кавычках. В стандарте HTML 4.01 нет атрибутов без значений.
Лучше писать все атрибуты и их значения маленькими буквами
Зачем? Ради будущего!
Теги форматирования [ править ]
Теперь перейдём к форматированию текста. Форматирование задаёт не так внешний вид, как структуру страницы. Важнейшими тегами форматирования есть абзацы (англ. paragraph) и заголовки (англ. header)
Заголовки [ править ]
Заголовки бывают шести уровней. Заголовки первого уровня — главные и самые большие, а заголовки шестого уровня даже меньше, чем текст абзацев. Ниже пример использования заголовков:
Эта страница отобразится так:
В этой книге речь пойдет преимущественно о хоббитах, и с ее страниц читатель узнает немало об их . и т. д.
I Долгожданная гостиная
XII Побег к броду
Я здесь пишу и пишу примеры. Не забывайте пробовать что-то сами! Или хотя бы по крайней мере посмотрите как будут выглядеть примеры страниц, которые вам даются, в вашем браузере (а если у вас несколько браузеров, то не забывайте посмотреть как выглядит страница в других!).
Переносы строк [ править ]
К сожалению, браузеры отвергают все символы переноса строки, табуляции, а также лишние пробелы. Поэтому этот стишок отображается в одну или несколько строк (в зависимости от ширины окна). Но есть выход.
Можно каждую строчку стихотворения поместить в отдельный абзац. Правда обычно между абзацами большие белые поля. Поэтому можно использовать одинарный тег <br />. Этот тег обозначает переход на новую строку, то есть обрыв (break) старого.
Здесь следует вставить замечание. Все теги ходят парами открывающий — закрывающий. Между ними содержатся элементы гипертекста. Но тег обрыва строки не содержит ничего. Поэтому он пару и не имеет. Но новейшие стандарты требуют, чтобы все теги закрывались. Правда учтя наличие тегов подобных <br>, придумали сокращённую форму записи (<br />). Он как бы открывается, а потом сразу закрывается. Это кажется довольно странным. Конечно можно писать и в старом формате: <br>. Но лучше иметь код, который отвечает новейшим стандартам.
И ещё один способ — взять весь стих в теги <pre></pre>. Весь текст, помещённый между этими тегами, отображается точно так же, как его видно в редакторе. Правда этот тег также меняет шрифт на моноширинный. Но зато мы можем делать с текстом интересные вещи:
Это выглядит следующим образом:
`But why do you call it sad? ‘ And she kept on puzzling about it while the Mouse was speaking,
so that her idea of the tale was something like this: —
Изменение шрифта [ править ]
Ещё немного о теге изменения шрифта. Шрифт может иметь три дополнительных атрибута: жирность (bold), курсив (italic) и подчёркивание (underlined). Они меняются с помощью тегов: <b> , <i> и <u> соответственно.
Правда вместо тега <b> рекомендуют использовать тег <strong> , а вместо <i> — <em> . У них есть различие <strong> и <em> — это логическое выделение, а <b> и <i> — физическое, то есть в первых двух случаях мы акцентируем внимание посетителя сайта на каком-то слове или предложение, ну а в последних двух просто требуется, чтобы текст был жирным или курсивным и делается это просто для красоты. Кроме того существует ещё такое свойство как зачёркивание. Оно задавалось тегом <s>, что означало strikeout. Но опять же в современном мире слова не вычёркивают, их удаляют.
Школа W3 напротив тегов <u>, <s> и <strike> пишет «deprecated». Что в переводе означает: «сильно возражать, выступать против, протестовать». Кто протестует не сказано, но скорее всего Консорциум трёх дубльве. Вместо тегов вычёркивания рекомендуют использовать тег удаления. А вместо тега подчёркивания — стили.
Удаление и замена [ править ]
Для того чтобы обходиться без <s> , придумали тег <del> он помечает что текст был именно удалён как неверный и автор акцентирует пользователя на этом. Кроме тега удаления ввели тег вставки <ins> . Тег вставки указывает текст, который вставили после удаления. Выглядит такая вещь примерно так:
А отобразится она так:
Причём текст в теге <ins> будет подчёркнут. (А ребята из W3schools говорили использовать CSS)
Таблица тегов форматирования [ править ]
Далее опишу все теги в таблице, потому что мне уже надоело здесь о них рассказывать, а вам видимо надоело читать.
— это язык разметки гипертекста
Ну, со структурой гипертекста, думаю, мы разобрались, можно теперь переходить к вещам более глобальным.
Ссылки [ править ]
Как я уже говорил, основным свойством, которое отличает нормальный текст и гипертекст, является гиперссылка. Гиперссылки создаются с помощью тега <a> с атрибутом href, который принимает значение нужного нам URL. Например, нужно создать страницу, которая содержит ссылку на статью. Это может выглядеть примерно так:
Теперь на странице надпись ru.wikibooks.org станет гиперссылкой.
Обычно страницы в интернете не сидят одиноко. Они размещаются группами, которые называются узлами. Сайт — это по моему определению набор страниц и других файлов, которые имеют общую часть URL. Например, все страницы, начинающиеся на http://www.microsoft.com, принадлежат одному сайту одной маленькой компьютерной фирмы. Далее следует символ «/», и адрес продолжается.
Можно сделать у себя на компьютере маленькую модель сайта. Для этого нужно создать новый каталог, в котором будем размещать файлы. Затем в каталоге разместить файл index.htm. Если есть какая-то ссылка на ваш сайт, без указания, какой конкретно файл загружать, то будет загружен именно index.htm. Далее мы можем создать ещё одну папку внутри нашей. Пусть она называется subdir. Если в ней разместить файл index.htm, то для перехода к нему нужно будет написать: «www.ваш_сайт.com/subdir/».
При обращении к каталогу всегда в конце добавляйте слэш. Если вы не будете добавлять слэш, то сервер будет вынужден выполнять два запроса. Сначала ваш, без слэша. Потом, когда он разберётся, что это запрос к каталогу, он сгенерирует свой запрос, со слэшем, и уже его выполнит.
Кроме гипертекстовых страниц на сайте можно размещать любые другие файлы. Тогда после щелчка по ссылке будет появляться стандартный диалог загрузки.
Например, если вы певец и хотите поделиться своими песнями с другими, вы можете положить в папку с сайтом файл track1.mp3, а в файле index.htm написать:
Если файлы находятся в одном каталоге, то в атрибуте href достаточно написать название файла, чтобы сделать ссылку. Если же мы имеем файлы «site/1.htm» и «site/subdir/2.htm», то чтобы с первого сделать ссылку на второй, а со второго на первый, надо написать href =»subdir/2.htm» и href =»../1.htm» соответственно. Такие адреса называются относительными. Две точки означают «тот каталог что выше». Относительные адреса хороши тем, что когда мы переименовываем папку «site» или меняем хостинг их не нужно менять.
Но этим возможности тега <a> не исчерпываются. a — сокращенно от anchor — что значит якорь. С помощью тега <a> можно ставить в гипертекстовом документе якоря, или проще говоря закладки, позволяющие переходить в определённое место документа. Это особенно полезно, когда документ большой, и нужно быстро переходить в нём к нужному разделу. Для этого существует атрибут id.
Я правда не понимаю для чего делать закладки с помощью тега <a>, когда атрибут id есть в каждом тезисе. Но всеми способами получается нормально.
Чтобы долго не объяснять снова приведу пример:
Когда мы делаем гиперпереходы в пределах одной страницы, то в атрибуте href просто пишем знак («#») и название закладки (то что написано в атрибуте id). А когда делаем переход на закладку в другой странице, то сначала пишем адрес страницы, затем добавляем знак («#») и название закладки. Когда случайно делается переход на закладку, которой не существует, ничего страшного не происходит. Мы просто попадаем в начало страницы, как при обычном переходе.
Вообще-то w3cschools писали об атрибуте name, но кроме того они писали, что скоро этот атрибут будет отвергнут и заменён на id. Поэтому думаю лучше использовать более новый, и в два раза короче вариант. А чем короче страница, тем быстрее она загрузится :-)
Чаще страницы загружаются в том окне, где вы щёлкнули ссылку. Но мы можем выбрать место, где будут загружаться страницы. Для этого в теге <a> существует атрибут target. Он может принимать значения _blank, если нам нужно загружать страницу в новом окне, _self, если нам ничего менять не нужно (оно и так загружается в том окне где щёлкнули), _parent, если мы хотим забрать из окна фрейма и открыть страницу на всё окно.
Аудио [ править ]
bgsound [ править ]
Этот тег нестандартный и не входит в спецификации. Поддерживается только IE. Вместо него рекомендуется использовать тег <audio> .
Тег <bgsound> указывает на музыкальный файл, который будет проигрываться на веб-странице при её открытии. Звук, время звучания музыки и другие характеристики указываются с помощью параметров тега, а также могут управляться при помощи скриптов. Этот тег должен размещаться только в середине тега <head> .
Чтобы указать файл, который будет проигрываться, нужно написать так:
- src указывает путь к музыкальному файлу.
- loop устанавливает, сколько раз будет проигрываться музыка. По умолчанию проиграется 1 раз.
- volume задаёт громкость звучания музыки на странице. По умолчанию — 0. Громкость — целое число от −10000 до 0. Ноль — максимальный уровень. Чем больше значение этого параметра, тем тише звучит музыка.
- balance регулирует громкость звучания в левой и правой колонках.
audio [ править ]
В HTML5 добавили новый тег <audio> .
Вот как он выглядит:
Обращаем ваше внимание на непонятный тег <source /> .
Дело в том, что браузеры не поддерживают все форматы музыки и порой приходится перекодировать вашу музыку в другие типы аудио, чтобы мелодия корректно отображалась в основных браузерах.
Подробно про атрибуты тега <audio> :
- autoplay — звук начинает играть сразу после загрузки страницы.
- controls — добавляет панель управления к аудиофайлу.
- loop — повторяет воспроизведение звука с начала после его завершения.
- preload — используется для загрузки файла вместе с загрузкой веб-страницы.
- src — указывает путь к воспроизводимому файлу (только если не использовался тег <source />).
Элементы оформления [ править ]
Подведём черту [ править ]
Иногда вы что-то пишете, пишете, и вдруг чувствуете что нужно подвести черту.
Делается это просто как новая строка: <hr /> (horisontal ruler). Вообще-то в этом теге есть атрибуты, которые настраивают внешний вид, но их использование в новых стандартах нежелательно. Разрешены только общие атрибуты, такие как id, class, style и атрибуты событий, но это темы следующего раздела.
Картинки [ править ]
До этого момента мы прочитали очень много текста о тексте. Конечно — текст важнейшая часть любой страницы (если конечно это не страница какой-либо галереи), но сплошной текст штука довольно скучная. Иллюстрированный текст выглядит намного лучше. Для вставки в текст изображения используют тег <img>. Его атрибут src задаёт источник (source) — файл, в котором содержится картинка. Этот тег одинарный, поэтому закрывающий тег не нужен.
Иногда картинки не отображаются. Это происходит по разным причинам. Тем не менее, нужно чтобы пользователь и в таких случаях знал, что вы хотели ему показать. Для этого картинки имеют атрибут alt. Он задает текст, который отображается на месте картинки в тех случаях, когда сама картинка недоступна.
Не стоит забывать о том, что картинки очень долго загружаются при медленном доступе к интернету. И даже когда доступ в интернет достаточно быстрый, некоторые пользователи исключают загрузку картинок в целях экономии. И это замечание актуально даже в 2011 году. Поэтому не пренебрегайте атрибутом alt.
Также мы можем изменить размер картинки. Например, если мы имеем маленькое изображение, мы можем его растянуть. Правда тогда оно будет отображаться несколько размыто. Также можно изменять размеры изображения вместе с изменением размеров окна браузера. Для этого размеры указывают в процентах. Размеры задаются атрибутами width и height. Пример:
Картинки могут быть помещены между тегами <a> и </a>, тогда щелчок по ним будет аналогичным щелчку по обычным ссылкам. Вокруг картинки появится синяя рамка. Но есть ещё более интересный способ сделать из картинки гиперссылку. Это карты.
Карты [ править ]
Изображение можно разделить на области различной формы, каждая из которых может ссылаться в другое место. Для этого с помощью тега <map> задают карту. Атрибут id идентифицирует карту и используется для связи с картинкой. Чтобы картинку назначить в качестве карты, используется атрибут usemap (в котором мы должны записать id карты). Внутри тега карты содержатся теги областей, которые задаются тегами <area>. Опять же, этот тег одинарный, и хочет чтобы его правильно закрывали. Атрибут href задаёт адрес ссылки, атрибут nohref, если назначить ему значение true, исключает зону с карты. Атрибут shape задает форму области: rect — прямоугольная, circle — круг, и poly — для многоугольника.
Пример я бессовестно «сдул» отсюда. Очень хорошее место, чтобы потренироваться, без лишней мороки.
Форму задают с помощью атрибута coords, который содержит четыре координаты (лево, верх, право, низ) для прямоугольника, три (координаты центра и радиус) для круга, и чётное количество для многоугольника (координаты каждой вершины). Координаты можно узнать морем способов. Можно в Paint’е посмотреть. А если форма сложная, точек много, то можно и специальную программу использовать. Это вроде X-Map. Хотя, если честно, ни этой программой, ни картами я не пользовался. Но если такое есть, то надо дать людям знать. Иначе книжка какая-то не солидная будет.
Представление информации структурировано [ править ]
Списки [ править ]
Списки в HTML бывают трёх видов: упорядоченные (ordered list) <ol>, неупорядоченные (unordered list) <ul> , и списки определений (definition list) <dl> . Элементы двух первых списков задаются тегом <li> (list item). Элементом списка может быть любой текст, картинки, абзацы, а также другие списки. Например, упорядоченный список задают так:
Выглядит это так:
- Раз
- Два
- Три
Список определений не является списком элементов. Это список терминов и определений терминов. Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>. Каждое определение списка начинается с тега <dd>:
Таблицы [ править ]
Таблицы удобно задавать с помощью HTML, так как в HTML можно делать вложенные элементы. Таблица также состоит из вложенных элементов. Таблица (<table>) состоит из строк (<tr> — table row), каждая из которых также состоит из ячеек (<td> — table data). А внутри ячейки может быть уже все что угодно. Даже еще одна таблица. Выглядит это так:
| Строка 1 Столбец 1 | Строка 1 Столбец 2 | Строка 1 Столбец 3 |
| Строка 2 Столбец 1 | Строка 2 Столбец 2 | Строка 2 Столбец 3 |
| Строка 3 Столбец 1 | Строка 3 Столбец 2 | Строка 3 Столбец 3 |
По умолчанию таблицы отображаются без границ. То есть границы невидимы. Это иногда полезно, но иногда мы хотим, чтобы границы были видны. Для этого задают значение атрибута border. Он задаёт толщину границ таблицы. (Правда только внешних). Если его значение ноль, то границы не отображаются.
Иногда надо назвать столбцы или строки, используют ячейку заголовка. Для этого вместо тега <td> пишут <th>. Выглядит это так:
| Столбец 1 | Столбец 2 | |
|---|---|---|
| Строка 1 | Строка 1 Столбец 1 | Строка 1 Столбец 2 |
| Строка 2 | Строка 2 Столбец 1 | Строка 2 Столбец 2 |
А пишется вот так:
Стоит заметить, что такой способ лучше чем писать содержимое ячейки в тегах <b> или <strong>. И не только потому, что так короче. А и потому, что потом можно будет применить к заголовкам таблицы отдельные стили.
Некоторые браузеры не отображают пустые ячейки (то есть не обводят их рамкой). Можете посмотреть что делает ваш, в предыдущем примере верхняя левая ячейка пуста. Чтобы обмануть браузер и заставить его отображать ячейку будто там что-то есть, мы можем положить туда невидимый символ -. Это символ несокрушимого пропуска (Non Breakable SPace). Назвали его несокрушимым оттого, что слова, разделённые таким пропуском, переносятся на следующую строку только вместе.
Ячейки таблицы можно объединять. Делается это с помощью атрибутов colspan и rowspan тега <td>. colspan указывает на сколько колонок будет данная ячейка, а rowspan — на сколько строк. Такой код:
Даёт такой результат:
| Строка 1 Столбец 1 растягивается на два вправо | Строка 1 Столбец 3 | |
| Строка 2 Столбец 1 | Строка 2 Столбец 2 растягивается на 2 вниз | Строка 2 Столбец 3 |
| Строка 3 Столбец 1 | Строка 3 Столбец 3 | |
Кроме строк таблица может иметь заголовок. Тег <caption> предназначен для создания заголовка к таблице и может размещаться только в середине тега <TABLE>, причём сразу после открывающего тега. Такой заголовок представляет собой текст, который по умолчанию отображается перед таблицей и описывает её.
Также можно выделить строки таблицы в группы, с различным функциональным назначением и назначить им разные стили. Ой как мне не терпится уже дойти до стилей. Но по порядку. Можно выделить заголовочный часть <thead>, основную часть <tbody> и итог <tfoot>.
HTML5
Тег abbr определяет аббревиатуру или акроним. Аббревиатура или акроним расшифровываются с помощью атрибута title .
abbr часто используется совместно с тегом dfn , идентифицирующим понятие или термин:
address
Тег address определяет контактную информацию об авторе или владельце документа или статьи. Контактная информацию может включать в себя адрес электронной почты, адрес сайта, физический адрес, номер телефона, ссылки на аккаунты в социальных сетях и т.д.
audio
Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.
Для определения аудио-источника используется либо атрибут src , либо тег source . Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа аудио-контента используется атрибут type ).
Текст между <audio> и </audio> отображается только в случае, когда браузер не поддерживает элемент audio .
В настоящее время поддерживается три формата аудио: MP3 , WAV и OGG .
- autoplay — автовоспроизведение (блокируется большинством браузеров)
- controls — панель управления (без этого атрибута элемент audio , скорее всего, не будет отображаться на странице)
- loop — определяет, что воспроизведение, после завершения, начнется сначала
- muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay )
- preload — определяет, должен ли аудио-контент загружаться после загрузки страницы. Возможные значения: auto , metadata , none . Значение none не позволит работать с аудио с помощью JavaScript
- src — путь к аудиофайлу
video
Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.
Для определения видео-источника используется либо атрибут src , либо тег source . Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа видео-контента используется атрибут type ).
Текст между <video> и </video> отображается только в случае, когда браузер не поддерживает элемент video .
В настоящее время поддерживается три формата видео: MP4 , WebM и OGG .
- autoplay — автовоспроизведение (блокируется большинством браузеров)
- controls — панель управления
- loop — определяет, что воспроизведение, после завершения, начнется сначала
- muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay )
- preload — определяет, должен ли видео-контент загружаться после загрузки страницы. Возможные значения: auto , metadata , none . Значение none не позволит работать с видео с помощью JavaScript
- src — путь к видеофайлу
- poster — изображение, отображаемое при загрузке видео или до нажатия пользователем кнопки воспроизведения
- width — ширина элемента в пикселях
- height — высота элемента в пикселях
DOM API предоставляет множество свойств, методов и событий для работы с элементами audio и video .
Тег base определяет основной путь ( URL ) и/или цель ( target ) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:
- href — основной путь
- target — определяет значение по умолчанию атрибута target всех гиперссылок и форм на странице. Возможные значения: _blank , _parent , _self и _top
blockquote и cite
Тег blockquote определяет раздел страницы, заимствованный из другого источника. Источник указывается в атрибуте cite .
Тег cite определяет название какой-либо работы (книги, стихотворения, песни, фильма, картины, скульптуры и т.д.). Он также может представлять из себя ссылку на источник цитаты.
Тег code используется для определения части компьютерного кода:
Для форматирования блока кода code часто используется совместно с тегом pre :
datalist
Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать "автозавершение" для элемента input : при установке фокуса на такое поле пользователь видит выпадающий список.
Атрибут id тега datalist должен совпадать с атрибутом list тега input .
Свойство options объекта Datalist возвращает коллекцию всех элементов списка.
dl , dt и dd
Тег dl определяет список описаний (определений, извиняюсь за тавтологию). Он используется совместно с тегами dt , определяющим понятие или термин, и dd , определяющим описание термина.
Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.
details
Тег details определяет раскрывающийся список с дополнительной информацией. Он часто используется для создания интерактивных виджетов, которые можно открывать и закрывать без использования JavaScript . В открытом состоянии он расширяется и показывает скрытый контент.
По умолчанию details находится в закрытом состоянии.
Внутри details могут размещаться любые теги.
Для отображения заголовка details используется тег summary .
Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector('[open]') ).
dialog
Тег dialog определяет диалоговое окно. Он используется для создания "попапов" и модальных окон.
По умолчанию dialog находится в неактивном состоянии.
Индикатором активного состояния dialog является атрибут open .
Для управления объектом Dialog с помощью JavaScript используются такие методы как show() , close() и showModal() , а также свойство open .
figure
Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.
Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.
Для добавление подписи к figure используется тег figcaption .
meter
Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).
Этот тег не должен использоваться в качестве индикатора прогресса.
Для обеспечения доступности совместно с meter рекомендуется использовать тег label .
- value — текущее числовое значение между min и max
- min — нижняя числовая граница диапазона
- max — верхняя числовая граница диапазона
- low — верхняя числовая граница нижнего предела диапазона. Должна быть больше min , но меньше high и max
- high — нижняя числовая граница верхнего предела диапазона
- optimum — оптимальное числовое значение между min и max . Расположение этого атрибута определяет предпочтительную часть диапазона. Например, если optimum находится между min и low , значит, предпочтительным является нижний диапазон
- form — определяет элемент form , с которым связан meter
Так можно записать уровень заряда батареи вашего устройства в значение meter :
progress
Тег progress определяет процесс выполнения задачи.
Этот тег не должен использоваться для определения меры чего-либо.
Для обеспечения доступности совместно с progress рекомендуется использовать тег label .
- max — максимальное значение. По умолчанию равняется 1
- value — текущее значение
Так можно реализовать десятисекундный таймер:
output
Тег output используется для представления результата вычислений.
- for — определяет связь между результатом и элементами, используемыми для его выичсления
- form — определяет элемент form , которому принадлежит output
- name — название элемента output
picture
Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).
Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.
Элемент picture содержит два тега: один или более source и один img .
Браузер выбирает элемент source с медиа-запросом, совпадающим с текущей шириной области просмотра. Элемент img указывается в качестве последнего дочернего элемента на случай отсутствия совпадений с source .
Путь к изображению указывается в атрибуте srcset , а медиа-запрос — в атрибуте media .
template
Тег template используется в качестве контейнера для разметки, которая не отображается при загрузке страницы.
Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).
Контент внутри template может быть отрендерен с помощью JavaScript .
Тег time определяет конкретное время (или дату и время).
Атрибут datetime используется для представления времени в машиночитаемом формате.
noscript
Тег noscript определяет резервный контент, который отображается в случае, если в браузере отключен JavaScript . Он может использоваться как в теге head , так и в теге body . В первом случае noscript может содержать только такие теги как link , style и meta .