Введение в язык гипертекстовой разметки HTML (часть 1)
Лыкошин Александр
2020-24
Frontend roadmap
Что такое HTML?
Литература
- Основы HTML (en,ru-частично) - Mozilla Developer Network
- Справочник по HTML (en,ru-частично) - Mozilla Developer Network
- HTML Tutorial (en) - w3school
- HTML Book (ru)
Стандарты HTML
Взгляд назад
- Первый веб-сайт info.cern.ch - 1991 - архивная копия >>
- NCSA Mosaic - 1993 - отображение текста и изображений на одной странице *
- Netscape Navigator (сейчас Mozilla Firefox) - 1994 *
- JavaScript - 1995
- Поддержка JavaScript в Netscape 2 - 1996 *
- Первая война браузеров - 1995..2001
- Частичная поддержка CSS1 браузерами - 1996..2000*
- Стандарты CSS
Yahoo.com - 1996
https://web.archive.org/web/19961017235908/http://www2.yahoo.com/
apple.com - 1997
http://web.archive.org/web/19970715124703/www.apple.com/
geocities.yahoo.com - 1999
https://web.archive.org/web/19991125045341/http://geocities.yahoo.com/home
Элементы HTML
- Основные элементы
- Метаданные документа
- Секционирование содержания
- Текстовое содержание
- Встроенные текстовые семантики
- Изображения и мультимедиа
- Встроенное содержание
- Скриптинг
- Разграничительные правки
- Содержание таблиц
- Формы
- Интерактивные элементы
- Веб-компоненты
- Устаревшие и осуждаемые элементы
Элемент <html>
- Корневой элемент HTML-документа. Все остальные элементы должны быть потомками этого элемента.
- Разрешенное содержимое - один элемент <head>, за которым следует один элемент <body>.
- К этому элементу применимы глобальные атрибуты.
| Элемент | Описание |
|---|---|
<base> |
Определяет основной адрес (URL), используемый для всех относительных адресов (URLs) в документе. Может
быть только один <base> элемент в одном документе. Основной адрес (URL) документа можно запросить скриптом используя document.baseURI. |
<head> |
Предоставляет общую информацию (метаданные) о документе, которая включает в себя заголовок и ссылки на скрипты и стили. |
<link> |
Указывает на внешние ресурсы, обычно на файлы CSS |
<meta> |
Этот элемент включает в себя глобальные атрибуты. |
<style> |
Содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS. |
<title> |
Определяет заголовок документа, отображаемый в строке заголовка браузера или на вкладке страницы. Данный тег может содержать только текст; любые теги, содержащиеся внутри, игнорируются. |
| Элемент | Описание |
|---|---|
<address> |
Задает контактные данные для ближайшего родительского <article>
или<body>; В последнем случае применяется ко всему документу, визуально выделяется
курсивом. |
<article> |
Представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для дальнейшего распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент контента. |
<aside> |
Представляет собой раздел документа с контентом, косвенно связанным с основным контентом документа (часто представленным как боковая панель). |
<footer> |
Представляет нижний колонтитул (футер, подвал) для своего ближайшего элемента секционного корня. Футер обычно содержит информацию об авторе секции, информацию об авторском праве или ссылки на связанные документы. |
<header> |
Группирует вводный или навигационный контент. Он может содержать как заголовки, так и прочие элементы: например логотип, форму поиска по сайту и так далее. |
<h1>..<h6> |
6 уровней заголовков секций. <h1> это наибольший заголовок и<h6>
- наименьший |
<hgroup> |
Представляет заголовок раздела. Он определяет один заголовок, который участвует в cхеме документа как заголовок явно или неявно заданного раздела, к которому он принадлежит. |
<main> |
Объявляет основной контент документа |
<nav> |
Определяет отдельную секцию документа, назначение которой обозначение ссылок навигации (как внутри текущего документа, так и ведущих на другую страницу). В качестве примера такой секции можно привести меню, якорные ссылки. |
<section> |
Представляет собой автономную секцию функционала, содержащуюся внутри HTML-документа, чаще всего с заголовком, в которой нет прочих специфических определяющих элементов, чтобы представить данный функционал. |
| Элемент | Описание |
|---|---|
<blockquote> |
(от англ. Block Quotation) указывает на то, что заключенный в нем текст является развернутой
цитатой. По умолчанию текст выделяется наклонным URI на источник цитаты можно указать в атрибуте
cite, тогда как текстовое представление источника может быть задано элементом
<cite> (от англ. Citation) представляет собой ссылку на источник цитаты. Он должен
включать в себя название произведения или URL, который может быть в сокращенном виде в соответствии с
правилами, используемых для добавления метаданных цитирования.">.
|
<dir> |
Направление текста (слева направо или справа налево) |
<div> |
Элемент разделения (division) контента HTML является базовым контейнером для элементов основного
потока (flow content). Он не влияет (почти) на контент или формат пока не стилизован, используя CSS.
Являясь "чистым" контейнером, элемент <div>, используется для группировки контента
|
<dl>, <dd>, <dt> |
(от англ. Description List), служащий контейнером для списка пар терминов и их описаний. Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение). | <figure>, <figcaption> |
<figure> представляет самостоятельный контент, часто с подписью
(<figcaption>), и обычно используется как единое целое. |
<hr> |
Тематический разрыв между параграфами; обычно отображается горизонтальной линией. |
<li>, <ol>, <ul> |
<li> используется для создания элементов списка. Он должен находиться в
родительском элементе: нумерованном списке (<ol>), ненумерованном списке
(<ul>), или меню (<menu>). |
<main> |
Основной контент документа |
<p> |
Определяет собой абзац текста. |
<pre> |
Преформатированный текст, отображается шрифтом фиксированной ширины сохранением пробелов |
| Элемент | Описание |
|---|---|
<a> |
Определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. |
<abbr> |
Используется для разметки аббревиатур |
<b> |
Является частью текста стилистически отличающейся от нормального текста, не носящий какого-либо специального значения или важности, и как правило выделен жирным (bold) шрифтом. |
<bdi>, <bdo> |
(bidirectional isolation/override, определяют текстовый фрагмент, направление в котором может отличаться от направления окружающего текста. |
<br> |
Устанавливает перевод строки в тексте (возврат каретки). Он необходим там, где важно деление на строки. |
<cite> |
Ссылка на источник цитаты. Должен включать в себя название произведения или URL. |
<code> |
Используется для программного кода |
<data> |
Содержит значение, предназначенное для автоматической обработки (machine-readable) |
<dfn> |
Используется для разметки терминов и определений (definitions) в тексте |
<em> |
Используется для выделения значимого текста |
<i> |
Элемент отображается курсивом (italic); использование допустимо, но оформление с помощью стилей предпочтительнее. |
<kbd> |
Указывает на то, что текст внутри элемента описывает пользовательский ввод с клавиатуры, голосовой ввод или с другого устройства. |
<mark> |
Представляет текст, выделенный в справочных целях из-за своей актуальности в определенном контексте. Например, он может быть использован на странице с результатом поиска, в которой выделяется каждый экземпляр искомого слова. |
<q> |
Короткая цитата(см.также <blockquote>) |
| Элемент | Описание |
|---|---|
<ruby>, <rb>, <rp>, <rt>,
<rtc>
|
Предназначен для добавления небольшой аннотации, преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим. |
<s> |
Элемент отображается |
<samp> |
Предназначен для результата выполнения программ |
<small> |
Элемент отображается меньшим размером шрифта |
<span> |
Внутристрочный контейнер, используемый для разметки части текста или документа |
<strong> |
Указывает на то, что его контент имеет большое значение, серьезность или срочность, обычно отображается жирным шрифтом. |
<sub> |
Элемент отображается ниже обычной линии текста |
<sup> |
Элемент отображается выше обычной линии текста |
<time> |
Используется для представления времени или даты. |
<tt> |
Устарел |
<u> |
Добавляет подчеркивание к тексту, рекомендуется использовать стили. |
<var> |
Служит для выделения имен переменных в тексте. |
<wbr> |
Указывает, где в тексте |
Изображения и мультимедиа
HTML позволяет использовать различные мультимедийные ресурсы, такие как изображения, аудио и видео.
| Элемент | Описание |
|---|---|
<img> |
Предназначен для добавления изображений. |
<area>, <map> |
Используются для указания областей изображения, реагирующих на нажатия кнопок мыши |
<audio> |
Используется для встраивания аудиоконтента в документы. Он может содержать один или несколько
аудио-источников, представленных при помощи аттрибута src или при помощи
<source> элемента.
|
<video> |
Предназначен для встраивания видео контента в документ. Видео элемент может содержать один или
несколько источников видео. Для указания источника видео используется атрибут src или
элемент <source>. |
<track> |
Указывает текстовые дорожки для элементов <audio> и <video> |
Встраиваемый контент
Контент мультимедийных HTML включает в себя другие материалы, даже если они не всегда легко взаимодействуют с текстом.
| Элемент | Описание |
|---|---|
<applet> |
Позволяет включать апплеты Java.</applet> |
<embed> |
|
<iframe> |
|
<noembed> |
|
<object> |
|
<param> |
|
<picture> |
Служит контейнером для одного или более элементов <img> для обеспечения оптимальной
версии изображения для различных размеров экрана. |
<source> |
Указывает несколько медиа-ресурсов для элементов <picture>,
<video> и <audio>. Это пустой элемент. Он обычно используется для
обслуживания одного и того же медиа-контента в нескольких форматах, поддерживаемых различными
браузерами.
|
Скриптинг
Для создания динамического контента и реализации веб-приложений, HTML поддерживает использование скриптовых языков, основным из которых является JavaScript.
| Элемент | Описание |
|---|---|
<canvas> |
Используется для отрисовки графики через скрипты (обычно используется JavaScript). Например, его можно использовать для отрисовки графиков, делать композиции фото или даже выполнять анимации. |
<noscript> |
Определяет секцию html кода, которая будет отображена, если браузер пользователя не поддерживает (либо отключен) JavaScript. |
<script> |
Позволяет добавлять фрагменты кода или ссылки на внешние файлы с кодом. |
Разграничительные правки
Эти элементы позволяют указать правки в документе.
| Элемент | Описание |
|---|---|
<del> |
Указать |
<ins> |
Указать добавленный фрагмент |
Табличный контент
Элементы, используемые для создания и обработки табличных данных.
| Элемент | Описание |
|---|---|
<table> |
Базовый элемент, объявляющий таблицу |
<caption> |
Определяет название таблицы. Если этот элемент используется, он всегда должен быть первым вложенным
элементом тега <table>. |
<thead> |
Заголовок таблицы |
<th> |
Ячейка заголовка таблицы |
<tbody> |
Основной контент таблицы |
<tfoot> |
HTML элемент подвала таблицы (<tfoot>) определяющий набор итоговых строк
суммирующих столбцы таблицы. |
<tr> |
Строка таблицы |
<td> |
HTML элемент <td> определяет ячейку таблицы которая содержит данные. Участвует в
табличной модели.
|
<col> |
Этот элемент обычно используется вместе с <colgroup>. |
<colgroup> |
Используется для группировки колонок |
Формы
HTML содержит элементы, которые используются вместе для создания форм, заполняемых пользователем для отправки на сервер.
| Элемент | Описание |
|---|---|
<button>
|
|
<datalist> |
Содержит набор опций (<option>), доступных для выбора. Выбранное значение будет
установлено для элемента <input>, с атрибутом list. |
<fieldset> |
|
<form> |
Элемент HTML form (<form>) представляет (собой) раздел документа,
содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на
веб-сервер. |
<input> |
Элемент HTML <input> используется для создания интерактивных элементов управления в
веб-формах. |
<label> |
HTML элемент <label> представляет собой подпись к элементу пользовательского
интерфейса. |
<legend> |
HTML-элемент <legend> представляет собой заголовок содержания родительского
элемента <fieldset>. |
<meter> |
|
<optgroup> |
HTML-элемент <optgroup> позволяет группировать опции, находящиеся внутри элемента
<select>.
|
<option> |
HTML элемент <option> используется для определения пункта списка контейнера
<select>, элемента <optgroup>, или элемента
<datalist>. Элемент <option> может представлять раздел меню
всплывающих окон и других перечней или списков HTML документа.
|
<output> |
|
<progress> |
|
<select> |
HTML тег <select> представляет собой элемент управления который содержит меню
опций: |
<textarea> |
<input> (часть 1)
| Type | Description | Basic Examples | |
|---|---|---|---|
| button | Кнопка, отображающая значение атрибута value, пустая по умолчанию. |
<input type="button" name="button" />
| |
| checkbox | Кнопка-флажок, позволяющая выбрать или отменить выбор. |
<input type="checkbox" name="checkbox"/>
| |
| color | Управляющий элемент для выбора цвета. |
<input type="color" name="color"/>
| |
| date | Управляющий элемент для ввода даты (год, месяц, день, без времени). |
<input type="date" name="date"/>
| |
| datetime-local | Управляющий элемент для ввода даты и времени без временной зоны. |
<input type="datetime-local" name="datetime-local"/>
| |
Поле для редактирования адреса электронной почты. Выглядит аналогично text, но обладает
дополнительными параметрами для валидации. |
<input type="email" name="email"/>
| ||
| file | Управляющий элемент, позволяющий пользователю выбрать файл. С помощью атрибута accept
указываются типы файлов, которые пользователь может выбрать. |
<input type="file" accept="image/*, text/*" name="file"/>
| |
| hidden | Управляющий элемент, который не отображается, но его значение передается на сервер. | ||
| image | Графическая кнопка для отправки формы submit. |
<input type="image" name="image" src="" alt="image input"/>
| |
| month | Позволяет вводить месяц и год без временной зоны. |
<input type="month" name="month"/>
|
<input> (часть 2)
| Type | Description | Basic Examples | |
|---|---|---|---|
| number | Предназначен для ввода чисел. |
<input type="number" name="number"/>
| |
| password | Однострочное текстовое поле, вводимые данные в котором не отображаются. |
<input type="password" name="password"/>
| |
| radio | Позволяет выбрать одно значение из списка (с тем же значением атрибута name). |
<input type="radio" name="radio"/>
| |
| range | Предназначен для ввода числа, точное значение которого не важно, из диапазона значений. |
<input type="range" name="range" min="0" max="25"/>
| |
| reset | Конпка, которая сбрасывает значения элементов формы к значениям по умолчанию. Не рекомендуется. |
<input type="reset" name="reset"/>
| |
| search | Однострочное поле для ввода строк для поиска. Символы конца строки автоматически удаляются. |
<input type="search" name="search"/>
| |
| submit | Кнопка, которая отправляет данные формы на сервер. |
<input type="submit" name="submit"/>
| |
| tel | Предназначен для ввода телефонного номера. |
<input type="tel" name="tel"/>
| |
| text | Однострочное поле для ввода текста. Символы конца строки автоматически удаляются. |
<input type="text" name="text"/>
| |
| time | Позволяет вводить время без указания временной зоны. |
<input type="time" name="time"/>
| |
| url | Поле для ввода URL. Выглядит как text, но с валидацией ввода. |
<input type="url" name="url"/>
| |
| week | Позволяет вводить дату, состоящую из номера недели и года или номера недели, без указания временной зоны. |
<input type="week" name="week"/>
| |
| Устаревшие значения | |||
| datetime | |||
Автозаполнение элементов ввода
(Атрибут autocomlete)
Предназначен для автозаполнения текстовых и числовых значений элементов <input>, элементов <textarea> elements, <select> elements, и <form>
| Type | Description |
|---|---|
| off | Автозаполнение запрещено |
| on | Автозаполнение разрешено, но без указаний, какие данные содержатся в данном элементе |
| name | В данном поле ожидается значение полного имени |
| given-name | Имя |
| family-name | Фамилия |
| username | Имя пользователя или учетной записи |
| organization | Название организации |
Другие элементы/теги
Атрибуты id, class, data-*
Атрибут id предназначен для идентификации одного конкретного элемента HTML для дальнейшей
манипуляции этим элементом из сценария JavaScript или привязывания к нему стиля
Атрибут class предназначен для присвоения нескольких HTML элементам "тега", с помощью которого
группу таких элементов можно адресовать селекторами стилей или в сценарии JavaScript
Атрибут data-* предназначены для сохранения значений в элементах HTML, которые могут в дальнейшем
использоваться сценарием JavaScript
Отличие элементов <div> и <span>
Элемент <div> (и другие, типа article/section/...) выделяют блок (текста или других жлементов)
Элемент <span> выделяют фрагмент текста внутри блока текста (аналогично b, strong, u, em..., но без изменения форматирования)
Мета теги
Основные мета теги
| Элемент | Описание |
|---|---|
<meta charset="utf-8">
|
Определяет кодировку веб-страницы |
<title>Заголовок страницы</title>
|
заголовок веб-страницы, который также отображается в результатах поиска Google, Яндекс, Bing и др. Длину заголовка стоит уместить в 70 символов, так как остальное будет отсечено при отображении |
<meta name="description" content="[описание страницы]">
|
краткое описание содержания веб-страницы, которое также может быть использовано в выдаче поисковых систем. Длину описания стоит уместить в 150 символов |
<meta name="viewport" content="width=device-width, initial-scale=1">
|
описывает, как разметка и контент изменяются в зависимости от размера области просмотра устройства |
<base href="//cdn.example.com/>
|
Определяет базовый URL-адрес для ссылок на внешние файлы, такие, как CSS, Javascript и изображения. В результате браузер найдёт файл независимо от размещения текущей веб-страницы. |
<meta name="application-name" content="[имя приложения]">
|
Определяет «Имя приложения», которое появляется под иконкой страницы на мобильных устройствах, когда пользователь использует функцию «Добавить на главный экран» в веб-браузере |
Основные мета теги, описывающие взаимодействие с поисковыми системами
| Элемент | Описание |
|---|---|
<meta name="robots" content="all"/>
|
|
<meta name="googlebot" content="index,follow">
|
|
<meta name="yandex" content="index,follow">
|
|
<button>
|
Мета-тег viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=500, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
A pixel is not a pixel
Open Graph (Facebook, Pinterest, Вконтакте, Одноклассники)
Open Graph — разработанная Facebook разметка, позволяющая настраивать превью страницы, ссылка на которую
размещена в социальной сети. Open Graph поддерживают социальные сети вроде Вконтакте, Одноклассники,
Google+, Twitter и LinkedIn. Как основную используют Facebook и Pinterest.
<meta property="og:url" content="[ссылка]">
<meta property="og:type" content="article">
<meta property="og:title" content="[заголовок]">
<meta property="og:description" content="[описание]">
<meta property="og:image" content="[ссылка на изображение]">
<meta property="article:author" content="[ссылка на аккаунт Facebook">
<meta property="og:site_name" content="[название сайта]">
<meta property="article:published_time" content="2014-08-12T00:01:56+00:00">
Отладка метатегов OpenGraph
Метатеги Твиттер
Дополнительно
- HTML препроцессоры и шаблонизаторы
- Онлайн валидатор HTML - W3C Markup Validation Service
-
Генераторы случайных ресурсов
- Текста (для домашнего задания)
- Изображений (можно задавать размеры и другие характеристики)
- Генератор случайных котиков