HTML-атрибуты: таблица глобальных атрибутов
HTML-атрибуты сообщают браузеру, каким образом должен отображаться тот или иной элемент страницы. Атрибуты позволяют сделать более разнообразными внешний вид информации, добавляемой с помощью одинаковых тегов.
Значение атрибута заключается в кавычки "". Названия и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре.
Глобальные атрибуты
Глобальные атрибуты, приведенные в таблице ниже, могут быть использованы для любого HTML-элемента, хотя некоторые из них могут не оказывать на элементы никакого влияния.
Атрибут | Описание, принимаемое значение |
---|---|
accesskey | Генерирует сочетания клавиш для доступа к текущему элементу. Состоит из разделенного пробелами списка символов. Браузер в первую очередь выбирает те клавиши, которые существуют на раскладке клавиатуры. Применяется к следующим элементам: Принимаемые значения: перечень названий клавиш. |
class | Определяет имя класса для элемента (используется для определения класса в таблице стилей). Принимаемые значения: имя класса. |
contenteditable | Определяет, может ли пользователь редактировать содержимое (контент). Позволяет преобразовать любое поле HTML в редактируемый элемент. Принимаемые значения: true/false. |
dir | Определяет направление текста контента в элементах <bdo> и <bdi>. Принимаемые значения: ltr/rtl/auto. |
draggable | Определяет, может ли пользователь перетащить элемент. Принимаемые значения: true/false/auto. |
hidden | Указывает на то, что элемент должен быть скрыт. Принимаемые значения: hidden. |
id | Определяет уникальный идентификатор элемента. Принимаемые значения: id — идентификатор элемента. |
lang | Определяет код языка содержимого (контента) в элементе. Принимаемые значения: код языка. |
spellcheck | Указывает, подлежит ли содержимое элемента проверке орфографии и грамматики. Принимаемые значения: true/false. |
style | Указывает на код CSS, применяемую для оформления элемента. Принимаемые значения: код CSS. |
tabindex | Определяет порядок перехода к элементу при помощи клавиши TAB. Принимаемые значения: порядковый номер. |
title | Определяет дополнительную информацию об элементе, задавая всплывающую подсказку для страницы. |
translate | Разрешает или запрещает перевод текста внутри элемента. Принимаемые значения: yes/no. |
HTML-текст
HTML- текст представлен в спецификации элементами для форматирования и группировки текста. Данные элементы являются контейнерами для текста и не имеют визуального отображения.
Элементы для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство font-family).
Грамотно отформатированный текст дает понять поисковым системам, какие слова несут важную смысловую нагрузку, по каким из них предпочтительно ранжировать веб-страницу в поисковой выдаче. Вся текстовая информация, отображаемая на сайте, размещается внутри элемента <body>.
HTML-элементы для текста
- Содержание:
- 1. Заголовки: <h2...h6>
- 2. Форматирование текста: <b>, <em>, <i>, <small>, <strong>, <sub>, <sup>, <ins>, <del>, <mark>
- 3. Ввод «компьютерного» текста: <code>, <kbd>, <samp>, <var>, <pre>
- 4. Оформление цитат и определений: <abbr>, <bdo>, <blockquote>, <q>, <cite>, <dfn>
- 5. Абзацы, средства переноса текста: <p>, <br>, <hr>
1. HTML-элементы для заголовков
Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Элементы <h2>...<h6> должны использоваться только для выделения заголовков нового раздела или подраздела.
При использовании заголовков необходимо учитывать их иерархию, т.е. за
Заголовок 2-го уровня
Заголовок 3-го уровня
Заголовок 4-го уровня
Заголовок 5-го уровня
Заголовок 6-го уровня
Фигура. 1. Элементы для заголовков HTML-документа1.1. Элемент <h2>
Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Элемент <h2> должен быть уникальным для каждой страницы сайта.
Рекомендуется прописывать в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.
1.2. Элемент <h3>
Представляет подзаголовки элемента <h2>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.
1.3. Элемент <h4>
Показывает подзаголовки элемента <h3>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.
1.4. Элементы <h5>, <h5>, <h6>
Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.Для всех элементов доступны глобальные атрибуты.
2. Элементы для форматирования текста
2.1. Элемент <b>
Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.
Для элемента доступны глобальные атрибуты.
2.2. Элемент <em>
Отображает шрифт курсивом, придавая тексту значимость.
Для элемента доступны глобальные атрибуты.
2.3. Элемент <i>
Отображает шрифт курсивом.
Для элемента доступны глобальные атрибуты.
2.4. Элемент <small>
Уменьшает размер шрифта на единицу по отношению к обычному тексту.
Для элемента доступны глобальные атрибуты.
2.5. Элемент <strong>
Задаёт полужирное начертание шрифта, относится к тегам логической разметки, указывая браузеру на важность текста.
Для элемента доступны глобальные атрибуты.
2.6. Элемент <sub>
Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.
Для элемента доступны глобальные атрибуты.
2.7. Элемент <sup>
Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.
Для элемента доступны глобальные атрибуты.
2.8. Элемент <ins>
Выделяет текст в новой версии документа, подчёркивая его.
Для элемента доступны атрибуты cite и datetime.
2.9. Элемент <del>
Перечёркивает текст. Используется для выделения текста, удаленного из документа.
Для элемента доступны атрибуты cite и datetime.
2.10. Элемент <mark>
Применяется для выделения фрагментов текста в справочных целях, окрашивая блок символов желтым цветом.
Для элемента доступны глобальные атрибуты.
3. Элементы для ввода «компьютерного» текста
3.1. Элемент <code>
Служит для выделения фрагментов программного кода. Отображает текст моноширинным шрифтом.
Для элемента доступны глобальные атрибуты.
3.2. Элемент <kbd>
Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображает текст моноширинным шрифтом.
Для элемента доступны глобальные атрибуты.
3.3. Элемент <samp>
Применяется для выделения результата, полученного в ходе выполнения программы. Отображает текст моноширинным шрифтом.
Для элемента доступны глобальные атрибуты.
3.4. Элемент <var>
Выделяет имена переменных, отображая текст курсивом.
Для элемента доступны глобальные атрибуты.
3.5. Элемент <pre>
Позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются.
Для элемента доступны глобальные атрибуты.
4. Элементы для оформления цитат и определений
4.1. Элемент <abbr>
Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст.
Для элемента доступны глобальные атрибуты.
4.2. Элемент <bdo>
Используется для изменения текущего направления текста.
Для элемента доступен атрибут dir.
4.3. Элемент <blockquote>
Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.
Для элемента доступен атрибут cite.
4.4. Элемент <q>
Используется для выделения коротких цитат. Браузерами заключается в кавычки.
Для элемента доступен атрибут cite.
4.5. Элемент <cite>
Применяется для выделения цитат, названий произведений, сносок на другие документы.
Для элемента доступны глобальные атрибуты.
4.6. Элемент <dfn>
Позволяет выделить текст как определение. Несмотря на наличие данного элемента, рекомендуется выделять текст силами CSS.
Для элемента доступен атрибут title.
5. Абзацы, средства переноса текста
5.1. Элемент <p>
Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхнее и нижнее внешнее поле margin, равное 1em, при этом поля соседних абзацев «схлопываются».
Для элемента доступны глобальные атрибуты.
5.2. Элемент <br>
Переносит текст на следующую строку, создавая разрыв строки.
Для элемента доступны глобальные атрибуты.
5.3. Элемент <hr>
Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.
Для элемента доступны глобальные атрибуты.
Что такое HTML? Основы языка разметки гипертекста
Что такое HTML? Это язык разметки гипертекста. Он позволяет пользователю создавать и структурировать разделы, параграфы, заголовки, ссылки и блоки для веб-страниц и приложений.
HTML не является языком программирования, то есть он не имеет возможности создавать динамические функции. Вместо этого он позволяет организовывать и форматировать документы, аналогично Microsoft Word.
При работе с HTML мы используем простые структуры кода (теги и атрибуты), чтобы разметить страницу веб-сайта. Например, мы можем создать абзац, поместив прилагаемый текст в исходный тег
<p> Вот как вы добавляете абзац в HTML. </p> <br><p> У вас может быть более одного! </p></br>
В целом, HTML — это язык разметки, который очень прост в освоении даже для начинающих в создании сайтов. Вот что вы узнаете, прочитав эту статью.
Нужен недорогой, но надёжный хостинг для учебного или небольшого коммерческого проекта? Ознакомьтесь с тарифами общего хостинга. Скидки до 90%!
К тарифам
История HTML
HTML был изобретён Тимом Бернерсом-Ли, физиком из исследовательского института ЦЕРН в Швейцарии. Он придумал идею интернет-гипертекстовой системы.
Hypertext означает текст, содержащий ссылки на другие тексты, которые зрители могут получить немедленно. Он опубликовал первую версию HTML в 1991 году, состоящую из 18 тегов HTML. С тех пор каждая новая версия языка HTML появилась с разметкой новых тегов и атрибутов (модификаторов тегов).
Согласно Справочнику HTML Element Reference от Mozilla Developer Network, в настоящее время существует 140 тегов HTML, хотя некоторые из них уже устарели (не поддерживаются современными браузерами).
Из-за быстрого роста популярности HTML теперь считается официальным веб-стандартом. Спецификации HTML поддерживаются и разрабатываются консорциумом World Wide Web (W3C). Вы можете проверить последнее состояние языка в любое время на веб-сайте W3C (англ).
Самым большим обновлением языка стало внедрение HTML5 в 2014 году. Было добавлено несколько новых семантических тегов к разметке, которые показывают смысл их собственного контента, например <article>, <header> и <footer>.
Как работает HTML?
HTML-документы — это файлы, которые заканчиваются расширением .html или .htm. Вы можете просматривать его с помощью любого веб-браузера (например, Google Chrome, Safari или Mozilla Firefox). Браузер читает HTML-файл и отображает его содержимое, чтобы пользователи интернета могли его просматривать.
Обычно средний веб-сайт включает несколько разных HTML-страниц (англ). Например: домашние страницы, обычные страницы, страницы контактов будут иметь отдельные HTML-документы.
Каждая HTML-страница состоит из набора тегов (также называемых элементами), которые вы можете назвать строительными блоками веб-страниц. Они создают иерархию, которая структурирует контент по разделам, параграфам, заголовкам и другим блокам контента.
Большинство элементов HTML имеют открытие и закрытие, в которых используется синтаксис <tag> </tag>.
Ниже вы можете увидеть пример кода, с помощью которого можно структурировать элементы HTML:
<div> <h2> Основная рубрика </h2> <h3> Броский подзаголовок </h3> <p> Пункт 1 </p> <img src = "/" alt = "Изображение"> <p> Пункт второй с гиперссылкой <a href="https://example.com"> </a> </p> </div>
- Самый главный элемент — это простое разделение (<div> </div>), которое вы можете использовать для разметки больших разделов контента.
- Он содержит заголовок (<h2> </h2>), подзаголовок (<h3> </h3>), два абзаца (<p> </p>) и изображение (<img>).
- Второй абзац содержит ссылку (<a> </a>) с атрибутом href, который содержит целевой URL.
- Тег изображения также имеет два атрибута: src для пути изображения и alt для описания изображения.
Обзор наиболее используемых HTML-тегов
HTML-теги имеют два основных типа: блок-уровень и встроенные теги.
- Элементы уровня блока занимают всё свободное пространство и всегда запускают новую строку в документе. Заголовки и параграфы — отличный пример блочных тегов.
- Встроенные элементы занимают столько места, сколько им нужно, и не запускают новую строку на странице. Они обычно служат для форматирования внутреннего содержимого элементов уровня блока. Ссылки и подчеркнутые строки — хорошие примеры встроенных тегов.
Теги блочного уровня
Три тега уровня блока, которые каждый HTML-документ должен содержать: <html>, <head> и <body>.
- Тег <html> </html> — это элемент самого высокого уровня, который охватывает каждую HTML-страницу.
- Тег <head> </head> содержит метаинформацию, такую как заголовок страницы и кодировка.
- Наконец, тег <body> </body> содержит всё содержимое, отображаемое на странице.
<html> <head> <!-- META INFORMATION --> </head> <body> <!-- PAGE CONTENT --> </body> </html>
- Заголовки имеют 6 уровней в HTML. Они варьируются от <h2> </h2> до <h6> </h6>, где h2 — заголовок наивысшего уровня, а h6 — самый низкий. Абзацы прилагаются <p> </p>, в то время как в блочных комментариях используется тег <blockquote> </blockquote>.
- Разделы — это более крупные секции контента, которые обычно содержат несколько абзацев, изображений, иногда блок-записей и других меньших элементов. Мы можем пометить их, используя тег <div> </div>. Элемент div может содержать ещё один тег div внутри него.
- Вы можете также использовать теги <ol> </ol> для упорядоченных списков и <ul> </ul> для неупорядоченных. Отдельные элементы списка должны быть заключены в тег <li> </li>. Например, вот как выглядит основной неупорядоченный список в HTML:
<ul> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> </ul>
Встроенные теги
Для форматирования текста используются многие встроенные теги. Например, тег <strong> </strong> визуализирует выделенный элемент жирным шрифтом, тогда как теги <em> </em> отображают его курсивом.
Гиперссылки также являются встроенными элементами, для которых требуются теги <a> </a> и атрибуты href для указания адресата ссылки:
<a href="https://example.com/">Нажми сюда!</a>
Изображения также являются встроенными элементами. Вы можете добавить один с помощью <img> без закрывающего тега. Но вам также нужно будет использовать атрибут src для указания пути изображения, например:
<img src="/images/example.jpg" alt="Пример изображения">
Если вы хотите узнать больше тегов HTML, попробуйте проверить наш полный HTML-лист (англ) (который также доступен для загрузки).
Эволюция HTML. Что отличает HTML и HTML5?
Начиная с первых дней, HTML прошёл невероятную эволюцию. W3C постоянно публикует новые версии и обновления, в то время как исторические вехи также получают выделенные имена.
HTML4 (в наши дни обычно называемый «HTML») был опубликован в 1999 году, а последняя крупная версия вышла в 2014 году. HTML5 — это обновление, которое ввело множество новых функций для языка.
Одной из наиболее ожидаемых особенностей HTML5 является поддержка встраивания аудио и видео. Вместо использования Flash-плеера мы можем просто вставлять видео и аудио-файлы на наши веб-страницы с помощью новых тегов <audio> </audio> и <video> </video>. Он также включает встроенную поддержку масштабируемой векторной графики (SVG) и MathML для математических и научных формул.
HTML5 также ввёл несколько семантических улучшений. Новые семантические теги информируют браузеры о значении контента, что приносит пользу как читателям, так и поисковым системам.
Наиболее популярными семантическими тегами являются <article> </article>, <section> </section>, <aside> </aside>, <header> </header> и <footer> </footer>. Чтобы найти уникальные отличия, попробуйте проверить наше подробное сравнение HTML и HTML5.
Плюсы и минусы HTML
Как и большинство вещей, HTML имеет как сильные стороны так и слабые.
Плюсы:
- Широко используемый язык с большим количеством ресурсов и огромным сообществом.
- Выполняется изначально в каждом веб-браузере.
- Поставляется с плоской кривой обучения.
- В открытом доступе и совершенно бесплатный.
- Чистая и последовательная разметка.
- Официальные веб-стандарты поддерживаются консорциумом World Wide Web (W3C).
- Легко интегрируется с базовыми языками, такими как PHP и Node.js.
Минусы:
- В основном используется для статических веб-страниц. Для динамической функциональности вам может потребоваться использовать JavaScript или бэкэнд-язык, такой как PHP.
- Это не позволяет пользователю реализовать логику. В результате все веб-страницы нужно создавать отдельно, даже если они используют одни и те же элементы, например. заголовки и колонтитулы.
- Некоторые браузеры принимают новые функции медленно.
- Иногда поведение браузера трудно предсказать (например, старые браузеры не всегда создают новые теги).
Как связаны HTML, CSS и JavaScript?
Хотя HTML является мощным языком, недостаточно создать профессиональный и полностью отзывчивый веб-сайт. Мы можем использовать его только для добавления текстовых элементов и создания структуры содержимого.
Однако HTML отлично работает с двумя другими интерфейсами: CSS (каскадные таблицы стилей) и JavaScript. Вместе они могут обеспечить богатый пользовательский интерфейс и реализовать расширенные функции.
- CSS отвечает за стили, такие как фон, цвета, макеты, интервал и анимация.
- JavaScript позволяет добавлять динамические функции, такие как ползунки, всплывающие окна и фотогалереи.
Подумайте об HTML как о человеке, тогда CSS будет его одеждой а JavaScript — движениями и манерами.
Итак … Что такое HTML?
HTML является основным языком разметки в интернете. Он запускается изначально в каждом браузере и поддерживается консорциумом World Wide Web.
Вы можете использовать его для создания структуры контента веб-сайтов и веб-приложений. Это самый низкий уровень технологий frontend, который служит основой для стилизации, которую вы можете добавить с помощью CSS и функциональности, которую вы можете реализовать с помощью JavaScript.
Анна долгое время работала в сфере социальных сетей и меседжеров, но сейчас активно увлеклась созданием и сопровождением сайтов. Она любит узнавать что-то новое и постоянно находится в поиске новинок и обновлений, чтобы делиться ими с миром. Ещё Анна увлекается изучением иностранных языков. Сейчас её увлёк язык программирования!
Элемент — HTML | MDN
На этой странице собраны все элементы HTML. Они сгруппированы по функциям, чтобы помочь вам найти то, что вам нужно для реализации ваших идей. Хотя это руководство написано для относительных новичков в программировании, мы хотим, чтобы оно было полезным для всех.
Основные элементы являются основой любого HTML документа. Вы увидите эти элементы в исходном коде для всех веб-страниц после задания типа документа на первой строке на странице. DOCTYPE определяет, какую версию (X) HTML эта страница использует. Элементы страницы находятся между открывающим тегом <HTML> и закрывающим </ HTML>. Элемент<html>
называется корневым элементом.
Элемент | Описание |
---|---|
<html> | HTML-элемент <html> представляет собой корень (элемент верхнего уровня) HTML-документа, поэтому его так же называют корневым элементом. Все другие элементы должны быть потомками этого элемента (должны находиться внутри него). |
Метаданные содержат информацию о странице. Они включают в себя информацию о стилях, скрипты и данные, чтобы помочь программному обеспечению (поисковые системы, браузеры и т.д.) использовать и отображать страницу. Метаданные для стилей и скрипты могут быть определены на странице или ссылке на другой файл, который имеет информацию.
Элемент | Описание |
---|---|
<base> | HTML элемент <base> определяет основной адрес (URL), используемый для всех относительных адресов (URLs) в документе. Может быть только один <base> элемент в одном документе. Основной адрес (URL) документа можно запросить скриптом используя document.baseURI . |
<head> | HTML-элемент <head> содержит машиночитаемую информацию (metadata) о документе, например его заголовок, скрипты и страницы стилей. |
<link> | Элемент HTML — Ссылка на Внешний Ресурс (<link> ) определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на CSS, а также для создания иконок сайта (как для иконок в стиле «favicon», так и для иконок домашних экранов и приложений мобильных устройств) среди прочего. |
<meta> | HTML элемент <meta> представляет такие Metadata, которые не могут быть представлены другими HTML-метатегами, такими как base , link , script , style или title . |
<style> | HTML-элемент <style> содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS. |
<title> | HTML-элемент заголовка (<title> ) определяет заголовок документа, который отображается в заголовке окна Browser или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются. |
Секционирование содержания элементов позволяет разложить содержимое документа на логические части. Используйте секционирование элементов для создания общих черт содержания страницы, включая шапку и подвал и заголовочные элементы для обозначения разделов.
Элемент | Описание |
---|---|
<address> | HTML- тег <address> задаёт контактные данные для ближайшего родительского article или body ; В последнем случае применяется ко всему документу, визуально выделяется курсивом. |
<article> | HTML-элемент <article> представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого распространения или повторного использования. |
<aside> | HTML-элемент <aside> представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. |
<footer> | HTML-элемент <footer> представляет собой нижний колонтитул (футер, подвал) для своего ближайшего секционного контента или секционного корня. Футер обычно содержит информацию об авторе раздела, информацию об авторском праве или ссылки на связанные документы. |
<header> | HTML-элемент <header> представляет собой вводный контент, обычно группу вводных или навигационных средств. Он может содержать другие элементы-заголовки, а также логотип, форму поиска, имя автора и другие элементы. |
<h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US), <h6> (en-US) | HTML элементы <h2> –<h6> представляют собой 6 уровней заголовков секций. <h2> это наибольший заголовок и<h6> — наименьший |
<main> | HTML-элемент <main> предназначен для основного контента (содержимого) body документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или её развивает. |
<nav> | HTML-элемент <nav> определяет отдельную секцию документа, назначение которой обозначение ссылок навигации (как внутри текущего документа, так и ведущих на другую страницу). В качестве примера такой секции можно привести меню, якорные ссылки. |
<section> | HTML-элемент <section> представляет собой автономный раздел — который не может быть представлен более точным по семантике элементом — внутри HTML-документа. |
Элемент | Описание |
---|---|
<blockquote> | HTML-элемент <blockquote> (от англ. Block Quotation) указывает на то, что заключённый в нем текст является развёрнутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом cite . |
<dd> | HTML-элемент <dd> (от англ. Description Details) предоставляет подробности или определение предшествующего термина (dt ) в списке определений (dl ). |
<div> | Элемент разделения контента HTML (<div> ) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS. |
<dl> | HTML-элемент <dl> (от англ. Description List) представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом dt ) и их описаний (определяемых элементами dd ). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение). |
<dt> | HTML-элемент <dt> который определяет термин в описании или списке определений, как таковой должен использоваться внутри элемента dl . |
<figcaption> | HTML-элемент <figcaption> или элемент подписи иллюстрации представляет собой подпись (заголовок) или легенду, описывающую остальную часть содержимого родительского элемента figure . |
<figure> | HTML-элемент <figure> (Иллюстрация с необязательной подписью) представляет самостоятельный контент, часто с подписью (заголовком), которая указывается с помощью элемента (figcaption ). |
<hr> | HTML <hr> элемент служит для тематического разделения абзацев.Рисует горизонтальную прямую |
<li> | HTML-элемент <li> используется для создания элементов списка. |
<ol> | HTML-элемент <ol> используется для упорядоченного списка — в частности для пронумерованного списка. |
<p> | HTML-элемент <p> представляет собой абзац. |
<pre> | Элемент HTML <pre> представляет собой предварительно отформатированный текст, который должен быть представлен точно так, как написано в HTML-файле. |
<ul> | HTML-элемент <ul> используется для неупорядоченного списка — в частности для маркированного списка. |
Используйте встроенную в HTML текстовую семантику, чтобы определить смысл, структуру или стиль текста, линий или части текста.
Элемент | Описание |
---|---|
<a> | HTML-элемент <a> определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами. |
<abbr> | Элемент HTML «аббревиатура» (<abbr> ) представляет собой аббревиатуру и, опционально, может показывать её расшифровку. Расшифровка записывается в атрибут title . Иные значения title , кроме расшифровки аббревиатуры не допускаются. |
<b> | HTML элемент <b> является частью текста стилистически отличающейся от нормального текста, не носящий какого-либо специального значения или важности, и как правило выделен жирным шрифтом. |
<bdi> | HTML элемент <bdi> (bidirectional isolation, или изоляция двунаправленности [текста]) изолирует от окружающего текста текстовый фрагмент, направление в котором может отличаться от направления окружающего текста (но не обязательно отличается). |
<bdo> | HTML-элемент переопределения двунаправленного текста (<bdo> ) переопределяет текущее направление текста так, что текст внутри отображается в другом направлении. |
<br> | HTML-элемент <br> устанавливает перевод строки в тексте (возврат каретки). Он полезен при написании поэмы или адреса, где важно деление на строки. |
<cite> | HTML-элемент <cite> (от англ. Citation) представляет из себя ссылку на источник цитаты. Он должен включать в себя название произведения или URL, который может быть в сокращённом виде в соответствии с правилами, используемых для добавления метаданных цитирования. |
<code> | Элемент HTML <code> отображает его содержимое в стиле, предназначенном для указания на то, что текст является коротким фрагментом компьютерного кода. |
<data> | HTML-элемент <data> связывает данное содержимое с машиночитаемым представлением. |
<dfn> | Элемент определения HTML (<dfn>) используется для указания термина, определяемого в контексте фразы или предложения. |
<em> | HTML <em> элемент отмечает акцентируемый текст. Элемент <em> может быть вложенным, причём каждый уровень вложенности указывает на большую степень акцента. |
<i> (en-US) | |
<kbd> | HTML элемент ввода с клавиатуры (<kbd> ) указывает на то, что текст внутри элемента описывает пользовательский ввод с клавиатуры, голосовой ввод или ввод с использованием любого другого типа устройств ввода текста. |
<mark> | HTML элемент <mark> представляет текст, выделенный в справочных целях из-за своей актуальности в определённом контексте. Например, он может быть использован на странице с результатом поиска, в которой выделяется каждый экземпляр искомого слова. |
<q> (en-US) | |
<rp> (en-US) | |
<rt> (en-US) | |
<ruby> | HTML элемент<ruby> предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим. |
<s> (en-US) | |
<samp> (en-US) | |
<small> (en-US) | |
<span> | HTML-элемент <span> является основным строковым контейнером для фразового контента, который, по существу, ничего не представляет. Он может использоваться для группировки элементов в целях стилизации (использование атрибутов class или id ) или потому, что они имеет общие значения атрибутов, например lang . |
<strong> | Элемент сильной значимости (<strong> ) указывает на то, что его содержание имеет большое значение, серьёзность или срочность. Браузеры обычно отображают содержимое жирным шрифтом. |
<sub> (en-US) | |
<sup> (en-US) | |
<time> | Элемент HTML <time> используется для представления либо времени в 24-рехчасовом формате, либо точной даты по Григорианскому календарю (с опциональным указанием времени и часового пояса). |
<u> | The HTML Unarticulated Annotation Element (<u> ) represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. |
<var> (en-US) | |
<wbr> | Элемент HTML <wbr> предоставляет возможность переноса слова – позицию в тексте, где браузер может по желанию разбить строку, в противном случае его правила разрыва строки не будут создавать разрыв в этом месте. |
HTML позволяет использовать различные мультимедийные ресурсы, такие как изображения, аудио и видео.
Элемент | Описание |
---|---|
<area> | The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. |
<audio> | HTML-элемент <audio> используется для встраивания звукового контента в документ. Он может содержать один или более источников аудио, представленных с помощью атрибута src или элемента source – браузер выберет один наиболее подходящий. Он так же может предназначаться для потокового мультимедиа, используя интерфейс MediaStream . |
<img> | HTML-элемент <img> встраивает изображение в документ. Это замещаемый элемент. |
<map> | HTML-элемент <map> используется с элементами area для определения карты изображения (интерактивной области ссылок). |
<track> | HTML-элемент <track> используется как дочерний элемент медиа-элементов audio and video . Позволяет указать синхронизированные текстовые дорожки (или данные на основе времени), например, для автоматической обработки субтитров. Файлы треков используют формат WebVTT (.vtt файлы) — Web Video Text Tracks или Timed Text Markup Language (TTML). |
<video> | Для встраивания видео контента в документ используйте элемент HTML <video>. Видео элемент может содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать атрибут src или элемент source ; браузер сам определит наиболее подходящий источник. |
Элемент | Описание |
---|---|
<embed> | HTML-элемент <embed> вставляет расширенный контент в выбранное место документа. Этот контент может быть представлен от внешнего приложения или другого источника интерактивного контента, такого как плагин для браузера, например. |
<iframe> (en-US) | |
<object> (en-US) | |
<param> (en-US) | |
<picture> | HTML-элемент <picture> служит контейнером для одного или более элементов source и одного элемента img для обеспечения оптимальной версии изображения для различных размеров экрана. |
<portal> (en-US) | |
<source> | HTML-элемент <source> указывает несколько медиа-ресурсов для элементов picture , video и audio . Это пустой элемент. Он обычно используется для обслуживания одного и того же медиа-контента в нескольких форматах, поддерживаемых различными браузерами. |
Чтобы создавать динамический контент и веб-приложения, HTML поддерживает использование скриптовых языков, наиболее известным является JavaScript. Некоторые элементы поддерживают эту возможность.
Элемент | Описание |
---|---|
<canvas> | HTML <canvas> Элемент может быть использован для отрисовки графики через скрипты (обычно используется JavaScript). Например, его можно использовать для отрисовки графиков, делать композиции фото или даже выполнять анимации. Вы можете (и должны) дать альтернативное содержание внутри блока <canvas> . Этот контент будет рендерится в обоих браузерах, в старых которые не поддерживают canvas и в браузерах с отключённым JavaScript. |
<noscript> | Элемент HTML <noscript> определяет секцию html кода, которая будет вставлена, если в браузере пользователя нет либо отключена поддержка JavaScript. |
<script> | HTML Элемент <script> |
Эти элементы позволяют вам отметить определённые части текста.
Элемент | Описание |
---|---|
<del> | Элемент HTML <del> представляет диапазон текста, который был удалён из документа. |
<ins> | Элемент HTML <ins> представляет собой диапазон текста, который был добавлен в документ |
Эти элементы используются для создания и обработки табличных данных.
Элемент | Описание |
---|---|
<caption> | HTML элемент заголовка таблицы (<caption> ) определяет название (заголовок) таблицы. Если этот элемент используется, он всегда должен быть первым вложенным элементом тэга table . |
<col> | HTML элемент <col> определяет столбец в таблице и используется для определения общей семантики на всех ячейках. Обычно он находится в элементе colgroup . |
<colgroup> (en-US) | |
<table> (en-US) | |
<tbody> (en-US) | |
<td> | HTML элемент <td> определяет ячейку таблицы которая содержит данные. Участвует в табличной модели. |
<tfoot> | HTML элемент подвала таблицы (<tfoot> ) определяющий набор строк суммирующих столбцы таблицы. |
<th> (en-US) | |
<thead> (en-US) | |
<tr> (en-US) |
HTML содержит некоторое количество элементов, которые используются вместе для создания форм, которые пользователь может заполнить и отправить на сервер. Доступно множество информации по этой теме в руководстве по HTML формам.
Элемент | Описание |
---|---|
<button> | HTML-элемент <button> создаёт кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает user agent, но вы можете изменить внешний вид кнопки, используя CSS. |
<datalist> | HTML-элемент <datalist> содержит набор опций (option ), доступных для выбора. Выбранное значение будет установлено для элемента input , с атрибутом list . |
<fieldset> | HTML-элемент <fieldset> используется для группировки нескольких элементов управления без веб-форм. |
<form> | Элемент HTML form (<form> ) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер. |
<input> | Элемент HTML <input> используется для создания интерактивных элементов управления в веб-формах для получения данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления. Из-за огромного количества возможных сочетаний типов ввода и атрибутов это один из самых мощных и сложных элементов HTML. |
<label> | HTML элемент <label> представляет собой подпись к элементу пользовательского интерфейса. |
<legend> | HTML-элемент <legend> представляет собой заголовок содержания родительского элемента fieldset . |
<meter> | HTML-элемент <meter> представляет собой скалярное значение в пределах известного диапазона или дробного значения. |
<optgroup> | HTML-элемент <optgroup> позволяет группировать опции, находящиеся внутри элемента select . |
<option> | HTML элемент <option> используется для определения пункта списка контейнера select , элемента optgroup , или элемента datalist . Элемент <option> может представлять раздел меню всплывающих окон и других перечней или списков HTML документа. |
<output> | HTML-элемент вывода (<output> ) является контейнерным элементом, в котором сайт или приложение могут выводить результаты вычислений или действий пользователя. |
<progress> | HTML-элемент <progress> отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения). |
<select> | HTML тэг <select> представляет собой элемент управления который содержит меню опций: |
<textarea> (en-US) |
HTML содержит в себе элементы, которые помогают создавать интерактивные объекты пользовательского интерфейса.
Элемент | Описание |
---|---|
<details> | HTML-элемент <details> используется для раскрытия скрытой (дополнительной) информации. |
<dialog> | HTML-элемент <dialog> определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы <form> могут интегрироваться с диалогом с помощью указания атрибута method="dialog" . Когда отправляется такая форма, диалог закрывается с returnValue равным value нажатой кнопки submit. |
<menu> | HTML элемент <menu> представляет группу команд, которые пользователь может выполнить или активировать. Он включает как меню-списки, которые могут отображаться в верхней части экрана, так и контекстные меню, например, такие, что могут появиться под кнопкой после нажатия. |
<summary> | The HTML Disclosure Summary element (<summary> ) element specifies a summary, caption, or legend for a details element’s disclosure box. |
Веб-компоненты — технология, относящаяся к HTML и делающая возможным создание и использование пользовательских элементов, как будто они в обычном HTML. Кроме того, вы можете даже создавать свои версии стандарта HTML элементов.
Замечание: Эти элементы определены в World Wide Web Consortium (W3C) Web Components collection of specifications скорее, чем в HTML спецификации. К тому же, спецификация Веб-компонентов не завершена и является темой для обсуждений.Элемент | Описание |
---|---|
<content> (en-US) | |
<shadow> (en-US) | |
<slot> | HTML элемент <slot> является частью набора технологии Web Components, является заполнителем внутри веб компонента, который можно заполнить собственной разметкой, которая позволяет создавать отдельные деревья DOM и представлять их вместе. |
<template> | HTML элемент контент шаблона <template> — это механизм для отложенного создания клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript. |
Предупреждение: Эти HTML элементы являются устаревшими, и их использование не рекомендуется. Вы не должны использовать их для новых проектов, а также должны заменить их в старых проектах как можно быстрее. Они перечислены здесь только в информационных целях.
Элемент | Описание |
---|---|
<acronym> | Элемент акронима (<acronym>) позволяет явно указать, что данная последовательность букв, являющуюся акронимом или аббревиатурой. |
<applet> | Элемент HTML апплет (<applet>) определяет включение апплета java. |
<basefont> | The obsolete HTML Base Font element (<basefont> ) sets a default font fa |
<bgsound> (en-US) | |
<big> (en-US) | |
<blink> (en-US) | |
<center> (en-US) | |
<content> (en-US) | |
<dir> (en-US) | |
<font> | HTML фонт элемент(<font> ) определяет размер шрифта, цвета и лицо для его содержимого |
<frame> (en-US) | |
<frameset> (en-US) | |
<hgroup> | HTML <hgroup> Элемент (HTML Headings Group Element — Элемент Группы Заголовков HTML) представляет заголовок раздела. Он определяет один заголовок, который участвует в схеме документа как заголовок явно или неявно заданного раздела, к которому он принадлежит. |
<image> | Элемент HTML <image> был экспериментальным элементом, предназначенный для отображения изображений. Он никогда не был реализован, вместо него должен использоваться стандартный элемент img . |
<keygen> (en-US) | |
<marquee> | HTML-элемент <marquee> используется для создания на странице прокручивающегося текста (бегущей строки). |
<menuitem> (en-US) | |
<nobr> (en-US) | |
<noembed> (en-US) | |
<noframes> (en-US) | |
<plaintext> (en-US) | |
<rb> (en-US) | |
<rtc> (en-US) | |
<shadow> (en-US) | |
<spacer> (en-US) | |
<strike> (en-US) | |
<tt> (en-US) | |
<xmp> (en-US) |
названия тегов | краткое описание тегов |
---|---|
<a> | Предназначен для создания ссылок (гипертекста). Атрибуты: name — Присваивает имя элементу. href — Присваивает адрес ресурса, к которому ведет ссылка. для создания ссылки вызова почтовой программы href=»mailto:e-mail» title— Всплывающая подсказка Синтаксис: Читать о теге подробно в учебнике HTML |
<abbr> | Выделяет в тексте аббревиатуру. Обычно подчеркивается пунктирной линией. Атрибуты: title— всплывающая подсказка Синтаксис: |
<acronym> | Выделяет в тексте акроним. Обычно подчеркивается пунктирной линией. Атрибуты: title— всплывающая подсказка Синтаксис: |
<address> | Указывает автора документа и его адрес. Обычно отображается курсивом. Атрибуты: title— всплывающая подсказка Синтаксис: |
<area> | Определяет области карты-изображения которые являются ссылками на тот или иной документ. располагается внутри тега <map> Атрибуты: alt — альтернативный текст для области изображения title— всплывающая подсказка href — указывает путь к открываемому документу shape — форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:
nohref — область без ссылки на другой документ target — указывает в каком окне следует открывать документ.
<area href=»primer.html» shape=»rect» coords=»15,15,80,80″ alt=»описание» title=»описание» target=»_blank»> не требует закрывающего тега Читать о теге подробно в учебнике HTML |
<b> | Делает текст полужирным. Аналогичен тегу <strong> |
<base> | в редакции.. |
<basefont> | в редакции.. |
<bdo> | Определяет направление вывода текста. Основное предназначение работа с текстами языковых групп, где чтение происходит справа — налево. Атрибуты: dir — Направление
Синтаксис: <bdo dir=»rtl» title=»Ваше описание»>Упер казак репу</bdo> |
<bgsound> | Внедряет в документ звуковой файл. Файл проигрывается в качестве фоновой музыки. Атрибуты: loop — Указывает на количество повторов воспроизведения файла.
Синтаксис: Не требует закрывающего тега. |
<big> | Делает текст крупным. |
<body> | «Тело» документа указывает содержание видимой части документа. Атрибуты: bgcolor — задаёт цвет фона документа. background — указывает адрес рисунка делая его фоном документа. text — цвет текста документа. link — цвет ссылок. vlink — цвет посещённых ссылок. alink — цвет нажатой, активной ссылки. bgproperties=»fixed» — делает рисунок фон фиксированным.(фоновое изображение не прокручивается при нажатии PageDown) Синтаксис: Читать о теге подробно в учебнике HTML |
<blockquote> | Предназначен для создания цитат. Атрибуты: title— Всплывающая подсказка Синтаксис: |
<br> | Перенос строки. |
<button> | в редакции.. |
<caption> | в редакции.. |
<center> | Горизонтальное выравнивание всех элементов по центру документа. |
<cite> | Выделяет в тексте цитату. Обычно курсивом. Атрибуты: title— всплывающая подсказка Синтаксис: |
<code> | Отмечает текст как некий программный код. Обычно отображается моноширинным шрифтом. Атрибуты: title — всплывающая подсказка Синтаксис: |
<col> | в редакции.. |
<colgroup> | в редакции.. |
<dd> | Описание списка определений. Атрибуты: title— Всплывающая подсказка Синтаксис: Закрывающий тег необязателен. Читать о теге подробно в учебнике HTML |
<del> | Выделяет удалённый текст в новой версии документа. Выделенный текст станет перечёркнутым. Атрибуты: title— всплывающая подсказка Синтаксис: |
<dfn> | Отмечает текст как определение. Обычно отображается курсивом. Атрибуты: title— всплывающая подсказка Синтаксис: |
<div> | Определяет блок HTML. Преимущественно используется совместно с CSS. Атрибуты: align — Выравнивание блока относительно страницы:
unselectable — Запрещает или разрешает пользователю выделять текст в блоке.
<div unselectable=»on» align=»center» title=»подсказка»>Текст в этом блоке нельзя выделить</div> Читать о теге подробно в учебнике HTML |
<dl> | Создаёт список определений. |
<dt> | Определение списка определений. Атрибуты: title— Всплывающая подсказка Синтаксис: Закрывающий тег необязателен. Читать о теге подробно в учебнике HTML |
<em> | Выделяет особенно важный фрагмент текста. Обычно браузерами отображается курсивом. Атрибуты: title— Всплывающая подсказка Синтаксис: |
<embed> | в редакции.. |
<fieldset> | в редакции.. |
<font> | Шрифт. Атрибуты: size — размер шрифта color — цвет шрифта face — задаёт шрифт из библиотеки шрифтов Синтаксис: Читать о теге подробно в учебнике HTML |
<form> | в редакции.. |
<frame> | Определяет фрейм в фреймовой структуре документа. Располагается внутри тега <frameset>. Атрибуты: srs — Путь к документу. Обязательный атрибут name — Присваивает имя фрейму. marginwidth — Отступ в пикселях от левого и правого края фрейма. marginheight — Отступ в пикселях от верхнего и нижнего края фрейма. scrolling — Определяет наличие полос прокрутки содержимого фрейма.
frameborder — Определяет наличие рамок у фрейма.
Синтаксис: Не требует закрывающего тега. Читать о теге подробно в учебнике HTML |
<frameset> | Определяет фреймовую структуру документа. Используется вместо тега <body>. Атрибуты: rows — Определяет количество и размеры горизонтальных фреймов в пикселях процентах или * — использовать всё свободное пространство. cols — Количество и размеры вертикальных фреймов. border — Определяет ширину рамок фреймов в пикселях. frameborder — Определяет наличие рамок у фрейма.
Синтаксис: Читать о теге подробно в учебнике HTML |
<h2> | Делает текст заголовоком. Может иметь значение от 1-6. Атрибуты: align -выравнивание заголовока по:
Синтаксис: Читать о теге подробно в учебнике HTML |
<head> | «Голова» определяет место в документе не для отображения видимой его части «тела» может располагать в себе теги предназначенные для поисковых машин, а так же название документа. |
<hr> | Рисует горизонтальную линию. Атрибуты: align -выравнивание линии по:
width — ширина линии color — присваивает цвет линии noshade — указывает на отсутствие тени линии Синтаксис: Читать о теге подробно в учебнике HTML |
<html> | Указывает программам просмотра html страниц начало и конец документа. |
<i> | Делает текст наклонным. |
<iframe> | Вводит на страницу не фреймовой структуры плавающий фрейм. Атрибуты: src — Путь к вводимому документу (обязательный атрибут) width — ширина плавающего фрейма в пикселях или процентах height — высота плавающего фрейма scrolling — показ полосы прокрутки:
<iframe src=»primer.html» align =»left» scrolling=»auto» frameborder=»1″></iframe> Читать о теге подробно в учебнике HTML |
<img> | Выводит графическое изображение (рисунок). Атрибуты: src — адрес рисунка. (обязательный атрибут) align -выравнивание рисунка по:
title— Всплывающая подсказка border — Толщина рамки bordercolor — Цвет рамки width — Ширина рисунка height — Высота рисунка hspace — Горизонтальный отступ vspace — Вертикальный отступ ismap — Изображение является навигационной картой на сервере usemap — Изображение является навигационной картой на стороне клиента. Синтаксис: Читать о теге подробно в учебнике HTML |
<input> | в редакции.. |
<ins> | Выделяет новый текст в новой версии документа. Выделенный текст станет подчёркнутым. Противоположен по значению тегу <del>. Атрибуты: Синтаксис: |
<kbd> | От английского keyboard — клавиатура. Указывает текст вводимый с клавиатуры. Обычно отображается моноширинным шрифтом. Атрибуты: title— всплывающая подсказка Синтаксис: |
<label> | в редакции.. |
<legend> | в редакции.. |
<li> | Обозначает элемент списка. Используется в нумерованных и ненумерованных списках. Атрибуты: title— Всплывающая подсказка Синтаксис: Закрывающий тег необязателен. Читать о теге подробно в учебнике HTML |
<link> | Указывает на связь документа с каким либо внешним файлом. Тег <link> является ссылкой, но не для людей а для программ, и ведет к внешнему файлу например иконке или таблице стилей.. Располагается в «голове» документа между тегом <head></head> и не выводится браузерами на экран. Атрибуты:
Синтаксис: Не требует закрывающего тега. |
<map> | Определяет место в коде документа в котором создаётся описание карты-изображения с помощью тега/тегов <area> Атрибуты: name — указывает имя графического изображения которое является картой Синтаксис: Читать о теге подробно в учебнике HTML |
<marquee> | Бегущая строка. Атрибуты: behavior — определяет тип скроллинга, может иметь следующие значения:
loop задает количество прокруток бегущей строки. direction — направление движения текста. значения:
height — высота строки, width — ширина строки. title— Всплывающая подсказка Синтаксис: Читать о теге подробно в учебнике HTML |
<meta> | Определяет мета теги информация в которых предназначена для браузеров и поисковых систем. Мета теги не видны пользователю и располагаются в заголовке HTML документа между тегами <head> </head> Атрибуты: Синтаксис: Не требует закрывающего тега. Читать о теге подробно в учебнике HTML |
<nobr> | Запретить перенос строки. Противоположенный по значению тег <br> |
<noembed> | в редакции.. |
<noframes> | Тег <noframes> выводит текст заключенный в него в том случае если браузер пользователя не поддерживает фреймы или они принудительно выключены в его настройках. |
<noscript> | Тег <noscript> выводит текст заключенный в него в том случае если браузер пользователя не поддерживает скрипты или они принудительно выключены в его настройках. |
<object> | в редакции.. |
<ol> | Определяет нумерованный (упорядоченный) список. Атрибуты: type-Тип маркера
start — Начальное значение для нумерованного списка Синтаксис: Читать о теге подробно в учебнике HTML |
<optgroup> | в редакции.. |
<option> | в редакции.. |
<p> | Создаёт параграф. Атрибуты: align — Выравнивание параграфа относительно страницы:
Синтаксис: Читать о теге подробно в учебнике HTML |
<param> | в редакции.. |
<pre> | Обрамляет предварительно отформатированный текст. Браузер при выводе текста на экран не удаляет пробелы и переносы строк. |
<q> | Предназначен для создания цитат. От <blockquote> отличается тем что цитата не имеет отступов. А в отличие от тега <cite> цитата обозначенная тегом <q> автоматически берётся браузерами в кавычки. Атрибуты: title— Всплывающая подсказка Синтаксис: |
<s> | Делает текст перечёркнутым. Аналогичент тегу <strike>. |
<samp> | Выделяет текст как образец. Используется для отметки текста являющемся результатом работы программ. Отображается моноширинным шрифтом. Атрибуты: Синтаксис: |
<script> | Внедряет на страницу скрипт. Атрибуты: defer — Указывает на то что перед выполнением скрипта следует полностью загрузить документ в который он внедрён. type — Определяет тип содержимого тега <script> language — Определяет язык скрипта.
Синтаксис: |
<select> | в редакции.. |
<small> | Делает текст малым. |
<span> | Определяет контейнер для внутреннего текста. Как правило используется совместно с CSS. Атрибуты: title — Всплывающая подсказка. unselectable — Запрещает или разрешает пользователю выделять текст в блоке.
<span unselectable=»on» title=»Описание»>Первое</span> слово в параграфе имеет собственыые свойства |
<strike> | Делает текст перечёркнутым. Аналогичент тегу <s>. |
<strong> | Выделяет особенно важный фрагмент текста. Обычно браузерами отображается полужирным. Атрибуты: title— всплывающая подсказка Синтаксис: |
<style> | Служит для определения стилей элементов страницы. Тег <style> распологается в заголовке страницы между <head></head>. Атрибуты: media — Указывает на устройство вывода, для работы с которым предназначена таблица стилей.
Стили style type=»text/css»> a:link { color: #008000; text-decoration: none; font-size: 14px; } a:hover { text-decoration: none; color: #ff0000; font-size: 18px; } </style> открыть страницу |
<sub> | Нижний индекс. |
<sup> | Верхний индекс. |
<table> | Создаёт таблицу. Атрибуты: align — Выравнивание таблицы по:
border — Толщина бордюра в пикселях. background — Задает фоновый рисунок в таблице. bordercolor — Цвет бордюра. cellspacing — Расстояние между ячейками таблицы. cellpadding — Расстояние между содержимым ячейки и рамкой. width — Ширина таблицы в процентах или пикселях. height — Высота таблицы в процентах или пикселях. cols — Определяет число колонок в таблице. Позволяет браузерам показывать содержимое таблицы ещё до окончания её полной загрузки. frame — Определяет в каких местах таблицы следует показывать бордюр.
table cols=»2″ border=»5″ frame=»vsides» align=»center» cellpadding=»5″ cellspacing=»2″ bgcolor=»#ffa0cf»> строка1 ячейка1 строка1 ячейка2 строка2 ячейка1 строка2 ячейка2 </table> Читать о теге подробно в учебнике HTML |
<tbody> | в редакции.. |
<td> | Создаёт отдельную ячейку в таблице. Атрибуты: width — Ширина ячейки в процентах или пикселях height — Высота ячейки в процентах или пикселях align — Выравнивает текст в ячейке:
rowspan — количество рядов занимаемое ячейкой bgcolor — Цвет фона ячейки background — Задает фоновый рисунок в ячейке. bordercolor — Цвет бордюра. title — Всплывающая подсказка nowrap — Запрещает перенос строк в ячейке. Синтаксис: Читать о теге подробно в учебнике HTML |
<textarea> | в редакции.. |
<tfoot> | в редакции.. |
<th> | Создаёт ячейку в таблице которая определяется как заголовок. Обычно браузеры выравнивают содержимое ячейки/заголовка по центру и делают текст жирным. Атрибуты: align — Выравнивает текст в ячейке:
rowspan — количество рядов занимаемое ячейкой bgcolor — Цвет фона ячейки background — Задает фоновый рисунок в ячейке. bordercolor — Цвет бордюра. title — Всплывающая подсказка nowrap — Запрещает перенос строк в ячейке. Синтаксис: |
<thead> | в редакции.. |
<title> | Заголовок и название документа. |
<tr> | Создаёт строку в таблице. Атрибуты: align — Выравнивает текст в ячейках строки:
bgcolor — Цвет фона ячеек строки Синтаксис: Читать о теге подробно в учебнике HTML |
<tt> | Делает текст моноширинным. |
<u> | Делает текст подчёркнутым. |
<ul> | Определяет ненумерованныый (неупорядоченный)список. Атрибуты: type-Тип маркера
Синтаксис: Читать о теге подробно в учебнике HTML |
<var> | Выделяет в тексте переменные. Обычно отображается курсивом. Атрибуты: title— Всплывающая подсказка Синтаксис: |
<wbr> | Разрешает перенос строки. Используется внутри тега <nobr> Синтаксис: Не требует закрывающего тега. |
<xmp> | Отображает текст в том виде в котором он и был набран. Пробелы, переносы строк не удаляются, кроме того спецсимволы выводятся как обычный текст. Синтаксис: |
Он-лайн конвертер HTML
Ошибка: количество входящих данных превысило лимит в 3.
Чтобы продолжить, вам необходимо обновить свою учетную запись:
Ошибка: общий размер файла превысил лимит в 100 MB.
Чтобы продолжить, вам необходимо обновить свою учетную запись:
Ошибка: общий размер файла превысил абсолютный лимит в 8GB.
Для платных аккаунтов мы предлагаем:
Премиум-пользователь
- Вплоть до 8GB общего размера файла за один сеанс конвертирования
- 200 файлов на одно конвертирование
- Высокий приоритет и скорость конвертирования
- Полное отсутствие рекламы на странице
- Гарантированный возврат денег
Купить сейчас
Бесплатный пользователь
- До 100 Мб общего размера файла за один сеанс конвертирования
- 5 файлов на одно конвертирование
- Обычный приоритет и скорость конвертирования
- Наличие объявлений
Мы не может загружать видео с Youtube.
Атрибут ALT (HTML тега img )
Alt (альт) – это атрибут тега img, позволяющий внести текстовое описание содержимого картинки. В HTML этот тег используется для добавления альтернативного описания изображения. Отсюда и такое название (alt – сокращенно от alternative). Теги альт используются для двух целей:
- ранжирование в поиске по картинкам для получения дополнительного трафика;
- показ текстового описания в случае, когда загрузка изображения невозможна или слишком медленна.
Ранжирование по картинкам
Известный факт, что в поисковиках «Яндекс», Google и др. помимо органической, есть и другие виды выдачи. Одной из них и является выдача по картинкам.
Многие веб-мастеры пренебрегают данным разделом поиска и не стремятся к попаданию в топ. И это большая ошибка. Миллионы пользователей ежедневно ищут материалы среди изображений. Для ресурсов, находящихся в топе, это дополнительный источник трафика. Чтобы картинка попала на как можно более высокие позиции, у нее должен быть грамотно прописан тег alt. Именно на него смотрят поисковики при ранжировании данного раздела выдачи. Следовательно, к альтернативному описанию предъявляются следующие требования.
- Не должен превышать 200–250 символов с пробелами. Оптимальный вариант – 5-6 слов.
- Обязан быть релевантным запросу пользователя.
- Описание должно совпадать с содержимым самой картинки.
- В тег alt желательно вписать ключевое слово/фразу, которое содержится в заголовке страницы title или в названии статьи h2. Это увеличивает шансы на попадание в топ.
- Альт должен быть только у контентных картинок. У фона и элементов интерфейса данный атрибут должен оставаться пустым.
При соблюдении всех вышеописанных требований ваши изображения станут более заметными для поисковых систем. Проработка тега альт является неотъемлемой частью внутренней SEO-оптимизации сайта. Но непосредственно на результаты органической выдачи он не влияет.
Альтернативное описание
Помимо попадания в топ выдачи по картинкам, альтернативное описание изображений служит для дополнительного информирования пользователей, у которых не загружаются медиафайлы. Это может быть связано с отключением загрузки картинок в браузере или с медленным интернет-соединением. Причины разные. Но img alt всегда должен быть прописан, чтобы у таких пользователей была возможность понять, о чем тот или иной графический контент.
Как заполняется
В HTML alt является лишь атрибутом, несмотря на то, что все его привыкли называть тегом. Тегом в данном случае является img и записывается он следующим образом:
[img alt=”текст”]
По умолчанию он пустой. Задача веб-мастера – добавить вместо «текст» альтернативное описание содержимого:
[a href=»/index.php»][img src=»images/home.png» alt=»Вернуться на главную страницу»][/a]
Так выглядит alt, когда изображение представлено в виде ссылки.
HTML-метр Тег
Пример
Используйте измерительный элемент для измерения данных в заданном диапазоне (датчик):
Использование диска C:2 из 10
Определение и использование
Тег
определяет скалярное измерение в пределах известного диапазона или дробное значение. Это также известно как датчик.
Примеры: использование диска, релевантность результата запроса и т. Д.
Примечание: Тег
не следует использовать для индикации прогресса (как в
индикатор). Для индикаторов выполнения используйте тег
Совет: Всегда добавляйте тег
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую элемент.
Элемент | |||||
---|---|---|---|---|---|
<метр> | 8,0 | 13,0 | 16,0 | 6,0 | 11,5 |
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
форма | form_id | Определяет, какая форма принадлежит элементу |
высокая | номер | Определяет диапазон, который считается высоким значением |
низкий | номер | Определяет диапазон, который считается низким значением |
макс | номер | Задает максимальное значение диапазона |
мин | номер | Задает минимальное значение диапазона.Значение по умолчанию — 0 | .
оптимальный | номер | Указывает, какое значение является оптимальным значением для датчика |
значение | номер | Обязательно. Задает текущее значение шкалы |
Глобальные атрибуты
Тег
также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег
также поддерживает атрибуты событий в HTML.
Связанные страницы
Ссылка на HTML DOM: Meter Object
Настройки CSS по умолчанию
Нет.
HTML-мета-HTTP-эквивалент Атрибут
❮ HTML тег
Пример
Обновлять документ каждые 30 секунд:
Попробуй сам »
Определение и использование
Атрибут http-Equiv
предоставляет заголовок HTTP для информации / значения атрибута content
.
Атрибут http-Equiv
можно использовать для имитации заголовка ответа HTTP.
Поддержка браузера
Атрибут | |||||
---|---|---|---|---|---|
http-экв | Есть | Есть | Есть | Есть | Есть |
Синтаксис
Значения атрибутов
Значение | Описание |
---|---|
политика безопасности содержимого | Задает политику содержимого для документа. Пример: |
тип содержимого | Задает кодировку символов для документа. Пример: |
по умолчанию | Задает предпочтительную таблицу стилей для использования. Пример: Примечание. Значение «обновить» следует использовать осторожно, так как оно отнимает у пользователя управление страницей. Использование «обновления» вызовет сбой в Рекомендации W3C по обеспечению доступности веб-контента. |
❮ HTML-тег
Мета-описание [2021 SEO] — Moz
Что такое мета-описание?
Метаописание — это атрибут HTML, который предоставляет краткое описание веб-страницы.Поисковые системы, такие как Google, часто отображают метаописание в результатах поиска, что может повлиять на рейтинг кликов.
Пример:
Пример кода
Оптимальная длина
Мета-описания могут быть любой длины, но Google обычно обрезает фрагменты до ~ 155–160 символов.Лучше всего хранить метаописания достаточно длинными, чтобы они были достаточно информативными, поэтому мы рекомендуем описания длиной от 50 до 160 символов. Имейте в виду, что «оптимальная» длина будет варьироваться в зависимости от ситуации, и ваша основная цель должна заключаться в обеспечении ценности и увеличении количества кликов.
Оптимальный формат
Теги мета-описания, хотя и не привязаны к ранжированию в поисковых системах, чрезвычайно важны для получения пользователями переходов по страницам результатов поиска. Эти короткие абзацы предоставляют веб-мастеру возможность «рекламировать» контент для пользователей, выполняющих поиск, и возможность для поисковиков решить, является ли контент релевантным и содержит ли информацию, которую они ищут по своему поисковому запросу.
Мета-описание страницы должно разумно (читай: естественным, активным, без спама) использовать ключевые слова, на которые нацелена страница, но также создавать убедительное описание, по которому поисковик захочет щелкнуть. Он должен иметь прямое отношение к описываемой странице и отличаться от описаний других страниц.
Фактор ранжирования Google?
Google объявил в сентябре 2009 года, что ни метаописания, ни мета-ключевые слова не влияют на алгоритмы ранжирования Google для веб-поиска.
Метаописания, однако, могут повлиять на CTR страницы (рейтинг кликов) в Google, что может положительно повлиять на способность страницы к ранжированию.
По этой причине, среди прочего, важно приложить некоторые усилия к метаописаниям.
Используйте сканирование сайта в Moz Pro для поиска и исправления неработающих метаописаний
Функция сканирования сайта Moz Pro определяет страницы с плохими или отсутствующими метаописаниями, чтобы вы могли быстро их исправить. Воспользуйтесь 30-дневной бесплатной пробной версией и посмотрите, чего вы можете достичь:
Начать бесплатную пробную версию
Лучшие методы SEO
Напишите убедительную копию объявления
Метатег описания выполняет функцию рекламной копии.Он привлекает читателей на веб-сайт из поисковой выдачи и, таким образом, является очень заметной и важной частью поискового маркетинга. Создание удобочитаемого, убедительного описания с использованием важных ключевых слов может улучшить рейтинг кликов для данной веб-страницы. Чтобы максимизировать CTR на страницах результатов поисковых систем, важно отметить, что Google и другие поисковые системы выделяют ключевые слова в описании жирным шрифтом, когда они соответствуют поисковым запросам. Этот полужирный текст может привлечь внимание поисковиков, поэтому вам следует как можно точнее сопоставить свои описания с поисковыми запросами.
Избегайте дублирования тегов метаописаний
Как и в случае тегов заголовков, важно, чтобы метаописания на каждой странице были уникальными. В противном случае результаты выдачи будут выглядеть следующим образом:
Один из способов борьбы с дублированием метаописаний — реализовать динамический и программный способ создания уникальных метаописаний для автоматизированных страниц. Однако, если возможно, ничто не может заменить оригинальное описание, которое вы пишете для каждой страницы.
Не включать двойные кавычки
Каждый раз, когда кавычки используются в HTML метаописания, Google обрезает это описание в кавычках, когда оно появляется в поисковой выдаче.Чтобы этого не произошло, лучше всего удалить все не буквенно-цифровые символы из метаописаний. Если кавычки важны в вашем метаописании, вы можете использовать объект HTML, а не двойные кавычки, чтобы предотвратить усечение.
Иногда нормально, что
, а не , записывают метаописанияХотя обычная логика считает, что в целом разумнее написать хорошее метаописание, чем позволять движкам очищать данную веб-страницу, это не всегда так.Используйте это общее эмпирическое правило, чтобы определить, следует ли вам писать собственное метаописание:
Если на странице нацелено от одного до трех активно используемых терминов или фраз, напишите собственное метаописание, ориентированное на пользователей, выполняющих поисковые запросы, включая эти термины.
Если страница нацелена на трафик с длинным хвостом (три или более ключевых слов), иногда может быть разумнее позволить движкам самостоятельно заполнять мета-описание. Причина проста: когда поисковые системы собирают мета-описание, они всегда отображают ключевые слова и окружающие фразы, которые пользователь искал.Если веб-мастер записывает мета-описание в код страницы, то, что он выбирает для записи, может фактически снизить релевантность, которую движки создают естественным образом, в зависимости от запроса.
Одно предостережение по поводу намеренного исключения мета-тегов описания: Имейте в виду, что сайты совместного использования в социальных сетях, такие как Facebook, обычно используют мета-тег описания страницы в качестве описания, которое появляется, когда страница публикуется на их сайтах. Без мета-тега описания сайты социальных сетей могут использовать только первый текст, который они могут найти.В зависимости от первого текста на вашей странице это может не создать хорошего пользовательского опыта для людей, которые сталкиваются с вашим контентом через социальные сети.
Внимание: поисковые системы не всегда будут использовать ваше метаописание.
В некоторых случаях поисковые системы могут отменять метаописание, указанное веб-мастером в HTML-коде страницы. Точно, когда это произойдет, непредсказуемо, но это часто происходит, когда Google не считает, что существующее метаописание адекватно отвечает на запрос пользователя и идентифицирует фрагмент с целевой страницы, который лучше соответствует запросу поисковика.
Продолжайте учиться
Глобальная структура HTML-документа
Глобальная структура HTML-документа7.1 Введение в структуру HTML документ
Документ HTML 4 состоит из трех частей:
- строка, содержащая версию HTML информация,
- декларативный раздел заголовка (разделенный заголовком HEAD элемент),
- тело, которое содержит фактическое содержание документа. Тело может быть реализуется элементом BODY или Элемент FRAMESET .
Пробелы (пробелы, символы новой строки, табуляции и комментарии) могут появляться перед или после каждого раздела. Разделы 2 и 3 должны быть разделены кодом HTML . элемент.
Вот пример простого HTML-документа:
<ГОЛОВА>Мой первый HTML-документ <ТЕЛО>Привет, мир!