HTML

Структура документа

<!DOCTYPE html>

Декларация типа документа или «доктайп».

<html>

Контейнер, в котором находится всё содержимое страницы.

<head>

Предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными.

<body>

Предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.

<title>

Заголовок HTML-страницы. Текст, который отображается в левом верхнем углу браузера, а также во вкладках. Задается внутри тега <head>.

<meta charset="utf-8">

Кодировка HTML-страницы. Задается внутри тега <head>, для того, чтобы веб-браузер мог правильно отображать текст на странице.

<meta>

Мета-теги (ключевые слова). Задаются внутри тега <head>.

Например, описание ключевых слов:

<meta name="keywords" content="разные, ключевые, слова">

Описание содержания страницы:

<meta name="description" content="краткое описание">

Некоторые из атрибутов:

  • content
  • http-equiv
  • name
  • scheme

Подключение стилей

Стили можно писать внутри html-кода страницы или подключать их как внешний файл.

  • «Инлайновые» (встроенные) стили прописываются внутри тега <style>. Тег размещается внутри <head>.
  • Внешние стили подключаются из внешнего файла с расширением .css. Для этого используется тег <link> внутри тега <head>.

Например:

<head>
  <link href="external.css" rel="stylesheet">
</head>

Подключение скриптов

Скрипты можно писать внутри html-кода страницы или подключать их как внешний файл.

  • Встроенные скрипты прописываются внутри тега <script>. Тег размещается в самом конце перед закрывающим тегом </body>.
  • Внешние скрипты подключаются из внешнего файла с расширением .js. Для этого используется тег <script>.

Например:

<script src="external.js"></script>

<header> и <footer>

Хедер и футер сайта или раздела.

<main>

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

<article> и <section>

<article> — («статья») самостоятельный, цельный и независимый раздел документа. Этот раздел можно в неизменном виде использовать в различных местах, в том числе и на других сайтах. Примеры: статья, пост в блоге, сообщение на форуме и так далее.

<section> — («раздел») смысловой или логический контейнер, объединяющий содержание по смыслу. Например, блок «о компании», список товаров, раздел личной информации в профиле и так далее.

<div>

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

<nav>

Специальный элемент для навигационных блоков.

<aside>

Дополнительное содержание, не связанное напрямую с основным. Такие блоки часто называют «сайдбарами» или боковыми панелями.

<time>

Специальный тег для обозначения даты и времени.

Имеет атрибут datetime — для указания даты в машиночитаемом формате iso 8601. Браузер отображает только содержимое тега, а содержимое datetime не отображается.

<time datetime="2014-04-20">вчера</time>

<figure> и <figcaption>

<figure> — цельный и независимый блок содержания. Внутри этого тега размещают демонстрационный материал: изображения, схемы, куски кода и так далее.

<figcaption> — разъясняющий комментарий или «легенда». Размещается первым или последним элементом внутри <figure>.

<video>

Предназначен для вставки видео. Основные атрибуты:

  • width и height — задают ширину и высоту видео.
  • controls — пустой атрибут, при наличии которого отображается панель управления видео.
  • preload — задаёт режим предзагрузки видео, имеет 3 возможных значения:
    • none — не загружать ничего.
    • metadata — загрузить служебную мета-информацию (длительность, первый кадр и так далее).
    • auto — можно загрузить всё видео.

    Значение по умолчанию зависит от браузера.

  • src — задаёт адрес видеофайла.
  • autoplay — пустой атрибут, при наличии которого воспроизведение видео начинается автоматически.
  • poster — задаёт адрес картинки-обложки, которая отображается, когда видео ещё не загрузилось или не воспроизводится.

С помощью тегов <source> необходимо указывать адреса файлов в самых распространённых форматах.

<video
  controls
  preload="metadata"
  width="400" height="225">
  <source src="uxtesting.mp4" type="video/mp4">
  <source src="uxtesting.ogv" type="video/ogg">
  <source src="uxtesting.webm" type="video/webm">
</video>

<audio>

Предназначен для вставки звука. Основные атрибуты:

  • controls — пустой атрибут, при наличии которого отображается панель управления проигрывателем.
  • preload — задаёт режим предзагрузки аудио, имеет 3 возможных значения:
    • none — не загружать ничего.
    • metadata — загрузить служебную мета-информацию.
    • auto — можно загрузить весь файл.

    Значение по умолчанию зависит от браузера.

  • src — задаёт адрес аудиофайла.
  • autoplay — пустой атрибут, при наличии которого воспроизведение звука начинается автоматически.

С помощью тегов <source> необходимо указывать адреса файлов в самых распространённых форматах.

<audio controls preload="metadata">
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.oga" type="audio/ogg">
</audio>

<a>

Создает ссылку. У ссылок могут быть абсолютные и относительные адреса:

  • Абсолютные адреса содержат в себе протокол, имя сервера (домен или хост) и путь. Например: 
    <a href="https://ru.wikipedia.org">википедия</a>
  • Относительные адреса не содержат ни протокола, ни имени сервера, а путь не начинается со слэша /. Например: 
    <a href="../pages/1-basic-html.html">основы html>

Якорь ссылки — cимвол #, после которого идёт идентификатор. идентификатор создаётся с помощью атрибута id, который может быть задан у любого тега. Например:

<a href="#glava1">глава 1</a>

Всплывающая подсказка, задается атрибутом title. Например:

<a title="подсказка" href="#"></a>

<img>

Добавляет на страницу изображение. Например:

<img src="адрес" width="ширина" height="высота" alt="альтернативный текст">

Атрибуты:

  • src — адрес.
  • width — ширина
  • height — высота.
  • alt — альтернативный текст.

Таблицы

Таблица описывается с помощью тегов:

  • <table> — обозначает таблицу.
  • <tr> — обозначает строку таблицы, расшифровывается как «table row».
  • <th> — обозначает ячейку-заголовок, расшифровывается как «table header».
  • <td> — обозначает ячейку внутри строки таблицы, расшифровывается как «table data».
  • <caption> — обозначает подпись к таблице (или заголовок таблицы). Должен размещаться внутри тега <table>, причём непосредственно внутри него и первым, до остальных вложенных тегов.

Теги <td> и <th> располагаются внутри тегов <tr>, а те, в свою очередь, внутри <table>.

Атрибуты:

  • border — изменяет толщину рамок.
  • cellpadding — позволяет добавлять отступы внутри ячеек.
  • colspan — позволяет объединить ячейки по горизонтали (для тегов <td> или <th>).
  • rowspan — позволяет объединить ячейки по вертикали (для тегов <td> или <th>).

CSS-свойства:

  • border — позволяет задавать как внешние рамки таблицы, так и рамки каждой ячейки.
  • border-collapse
    • collapse — позволяет избавиться от двойных рамок. Схлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы.
    • separate — «расклеивает» ячейки, значение по умолчанию.
  • border-top, border-right, border-bottom, border-left — задают отображение только одной рамки ячейки: верхней, правой, нижней или левой соответственно.
  • border-spacing — позволяет добавлять отступы внутри ячеек. Задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.
  • padding — задаёт «внутренние отступы элемента» со всех сторон.
  • padding-top, padding-right, padding-bottom, padding-left — позволяет задавать внутренние отступы отступы для каждой из сторон отдельно.
  • caption-side — перемещение заголовка таблицы по вертикали. Значения: top и bottom.
  • text-align — выравнивание по горизонтали. Значения: left, right и center.
  • vertical-align — выравнивание по вертикали. Значения: top, middle и bottom.
  • background-color — задаёт цвет фона.
  • color — задаёт цвет текста.
  • border-color — задаёт цвет рамок.
  • width — задаёт ширину ячеек, столбцов и таблицы.
  • height — задаёт высоту ячеек, столбцов и таблицы.

Разметка текста

<p>

Абзац. По умолчанию абзацы начинаются с новой строки и имеют вертикальные отступы.

<h1>...<h6>

Заголовки и подзаголовки.

<ul> и <ol>

Неупорядоченный и упорядоченный списки. Могут содержать внутри себя теги <div>, обозначающие «элемент списка». Элементы неупорядоченного списка по умолчанию отмечаются маркерами, элементы упорядоченного списка — нумеруются.

Список определений

Создаётся с помощью трёх тегов:

  • <dl> — обозначает сам список определений.
  • <dt> — обозначает термин.
  • <dd> — обозначает определение термина.

Теги <dt> и <dd> пишутся парами внутри <dl>.

<strong> и <b> (важность)

Тег <strong> — определяет важность отмеченного текста.

Тег <b> — предназначен для выделения текста без придания ему особой важности.

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

<em> и <i> (акцентирование внимания)

Тег <em> — определяет текст, на который сделан особый акцент, меняющий смысл предложения.

Тег <i> — обозначает текст, который отличается от окружающего текста, но не является более важным. Обычно так выделяют названия, термины, иностранные слова.

<br> и <hr> (перенос и разделитель)

Тег <br> — вставляет в текст перенос строки, не создавая при этом абзац.

Тег <hr> — создает горизонтальную линию-разделитель.

Цитаты

Тег <blockquote> — предназначен для выделения длинных цитат, которые могут состоять из нескольких абзацев. Тег выделяет цитату как отдельный блок текста с отступами.

Тег <q> — предназначен для выделения коротких цитат в предложениях. Текст внутри этого тега автоматически обрамляется кавычками.

Тег <cite> — используется для того, чтобы выделить источник цитаты, название произведения или автора цитаты.

Верхние и нижние индексы

Тег <sup> — отображает текст в виде верхнего индекса.

Тег <sub> — отображает текст в виде нижнего индекса.

<del> и <ins> (помечание изменений)

Тег <del> — выделяет текст, который был удалён в новой версии документа.

Тег <ins> — выделяет текст, который был добавлен в новой версии документа.

<pre>

Обозначает «предварительно отформатированный текст». Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега <pre>.

<mark>

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

Использование нестандартных шрифтов

Прописываем шрифт внутри тега <head> тег <link>:

<link href="//fonts.googleapis.com/css?family=pt+sans:400&subset=cyrillic" rel="stylesheet" type="text/css">

А также в свойстве селектора в css:

font-family: "pt sans", "arial", sans-serif;

Сервисы с бесплатными шрифтами:

@font-face

Пример подключения веб-шрифтов с помощью css-правила @font-face:

@font-face {
  font-family: "roboto";
  src:
    local("roboto regular"),
    url("roboto.woff") format("woff");
}

Формы

<form>

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

Атрибуты:

  • action — задаёт адрес, url, отправки формы.
  • method — задаёт метод отправки формы.
  • enctype — задаёт способ кодирования данных формы при их отправке на сервер. Для возможности отправлять файлы из формы нужно использовать multipart/form-data.

Например:

<form action="https://ru.wikipedia.org" method="get">
  поля формы
</form>

Для отправки формы обычно используют методы get или post. Если не указать атрибут method, то будет использован get.

Метод get позволяет получить ссылку на результаты поиска и передать её кому-то.

Метод post посылает данные в теле http-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна.

<input>

Создаёт поле формы.

Атрибуты:

  • type — задаёт тип поля.
  • name — задаёт имя поля.
  • id — обозначает идентификатор, должен быть уникальным на странице.
  • value — задаёт значение поля по умолчанию.

<label>

Подпись для поля ввода.

Первый способ создать подпись — обернуть текст подписи и тег поля в тег <label>:

<label>
  подпись <input type="text" name="username">
</label>

Второй — связать подпись с полем с помощью атрибута id тега <input> и атрибута for тега <label>:

<label for="user-field-id">имя пользователя</label>
<input id="user-field-id" type="text" name="username">

<input type="text">

Текстовое поле.

<form action="https://ru.wikipedia.org" method="get">
  <input type="text" name="search">
</form>

<input type="password">

Поле для ввода пароля.

<input type="submit">

Создает кнопку отправки формы.

Надпись на кнопке можно задать с помощью атрибута value. Задавать имя необязательно.

<input type="submit" value="войти">

<input type="checkbox">

Создает чекбокс или «галочку».

Атрибут checked устанавливает «галочку» по умолчанию.

<input type="checkbox" name="subscribe" id="subscribe-field" checked>
<label for="subscribe-field">подписать вас на рассылку?</label>

<input type="radio">

Создает переключатель или «радиобаттон».

Атрибут value является для переключателей обязательным.

Атрибут checked устанавливает «галочку» по умолчанию.

<label>
  <input type="radio" name="question-one" value="p"> вариант p;
</label>
<label>
  <input type="radio" name="question-one" value="b" checked> вариант b;
</label>

<input type="file">

Поле для загрузки файлов. Атрибут name является обязательным.

Для передачи файла на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data.

<form action="https://ru.wikipedia.org" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
</form>

<input type="hidden">

Скрытое поле.

<input type="hidden" name="account_number" value="15">

<select>, <option> и <optgroup>

Создают раскрывающийся список или «селект».

Варианты ответов задаются с помощью парных тегов <option>, которые должны располагаться внутри тега <select>.

С помощью тега <optgroup> можно формировать теги <option> в группы. Атрибут label этого тега определяет заголовок группы.

<select name="variants">
  <optgroup label="группа вариантов 1">
    <option value="1">вариант 1</option>
    <option value="2">вариант 2</option>
  </optgroup>
  <optgroup label="группа вариантов 2">
    <option value="3">вариант 4</option>
    <option value="4">вариант 5</option>
  </optgroup>
</select>

Атрибуты <select>:

  • multiple — Превращает «селект» в «мультиселект», то есть список, в котором можно выбрать не один, а несколько вариантов.
  • size — Определяет высоту мультиселекта.

Атрибуты <option>:

  • value — задаёт значение варианта ответа, внутри тега <option> располагается подпись варианта ответа.
  • selected — позволяет отметить как выбранные по умолчанию одно или несколько значений.

<textarea>

Создает многострочное поле ввода.

Имеет атрибуты name и id, которые аналогичны атрибутам текстового поля.

Ширина и высота задаются с помощью атрибутов cols и rows, соответственно.

Текст, расположенный между открывающим и закрывающим тегом <textarea> является значением по умолчанию.

<textarea name="comment" id="comment-field" rows="10">текст комментария</textarea>

Формы и html5

<input type="reset">

Сбрасывает введённые значения и возвращает изначально установленные (не обнуляет, а возвращает те, которые были установлены в полях формы по умолчанию). 

<input type="reset" value="сбросить">

<input type="button">

Простая кнопка.

<input type="button" value="кнопка">

<input type="image">

В качестве кнопки отправки формы можно использовать изображение. Кнопка-изображение работает аналогично кнопке submit, но на сервер дополнительно передаются координаты точки, по которой был произведен щелчок.

Аналогично обычным изображениям на сайте у кнопки-изображения есть еще два атрибута:

  • src — адрес изображения.
  • alt — альтернативный текст, отображаемый в том случае, если изображение не загружено.

<button>

Создает кнопку. Внутри тега <button> можно размещать любые html-элементы, в том числе изображения. Например:

<button type="submit">войти<img src="enter-light.png"></button>

Если в атрибуте type тега <button> указать значение submit или reset, то кнопка будет отправлять данные на сервер или сбрасывать введенные значения.

По умолчанию значение атрибута type — submit.

Значение type="button" избавит кнопку от всей изначальной фунциональности. Кнопка будет выглядеть как кнопка, но ничего по умолчанию не делать. Это удобно, если нужно добавить кнопке дополнительное действие с помощью javascript.

<input type="date">

Поле выбора даты.

<input type="time">

Поле выбора времени.

<datalist>

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

<input type="text" list="browsers" name="browser">
<datalist id="browsers">
  <option value="firefox"></option>
  <option value="chrome"></option>
  <option value="safari"></option>
</datalist>

<input type="number">

Поле ввода числового значения. При помощи атрибутов min и max можно установить верхнюю и нижнюю границу допустимых значений. Атрибут step устанавливает величину шага изменения значения.

<input type="search">

Поле поиска.

<input type="datetime">

Поле выбора даты с указанием времени (c учетом временной зоны).

<input type="datetime-local">

Поле выбора даты с указанием времени (без учета временной зоны).

<input type="week">

Поле выбора порядкового номера недели в году и года.

<input type="month">

Поле выбора месяца и года.

<input type="range">

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

Атрибуты min и max устанавливают нижнюю и верхнюю границу допустимых значений. Атрибут step устанавливает величину шага изменения значения.

<input type="range" min="1" max="10">

<output>

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

<output name="sum">[значение по умолчанию]</output>

<fieldset> и <legend>

Тег <fieldset> — спользуется для группировки полей форм. По умолчанию браузеры отображают результат в виде рамки вокруг этой группы полей, но при помощи css можно изменить его внешний вид.

Тег <legend> — добавляет заголовок для каждой группы.

<fieldset>
  <legend>заголовок группы</legend>
  <input type="text">
</fieldset>

<input type="tel">

Поле ввода телефонного номера.

<input type="email">

Поле для ввода электронной почты. Автоматически проверяет формат введённых данных.

<input type="url">

Поле для ввода адреса сайта. Автоматически проверяет формат введённых данных.

<input type="color">

Поле выбора цвета, при клике на такое поле появляется окно с возможностью выбрать цвет из палитры.

Обязательные поля

Атрибут required — делает поле обязательным для заполнения.

<input type="text" required>

Автофокус

Атрибут autofocus — сообщает браузеру в какое поле установить курсор по умолчанию. Должен быть только один на странице.

<input type="text" autofocus>

Паттерны значений полей

Атрибут pattern — с помощью регулярного выражения добавляет автоматическую проверку формата номера в поле.

<input type="text" name="passport" pattern="[0-9]{3}-[0-9]{5}" required>

Подсказка при заполнении полей

Атрибут placeholder — создает подсказку у полей, в которые вводятся текстовые значения (textarea, разные типы input и так далее), выводится внутри текстового поля.

<input type="text" placeholder="текст подсказки">

Запрет редактирования полей

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

<input type="text" readonly>

Атрибут disabled — не дает пользователю изменять поле (вводить новый текст, модифицировать существующий). Нельзя поставить фокус в это поле, введенное значение нельзя выделять и копировать. Данные из этого поля не отправляются на сервер.

<input type="text" disabled>

Управление автозаполнением полей

Атрибут autocomplete — при вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать подходящее.

Может принимать два значения on и off. Первое включает автозаполнение, второе — отключает. Отключение автозаполнения обычно используется из соображений безопасности, например, чтобы не сохранялись пароли, номера банковских карт и так далее.

<input type="text" autocomplete="off">

Переключение между полями

Атрибут tabindex — при нажатии клавиши tab браузер передает управление (фокус) от одного элемента к другому в том порядке, в котором они были объявлены на странице.

<input type="text" tabindex="3">

Ограничение по числу символов

  • minlength — задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.
  • maxlength — устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
<input type="text" minlength="2">
<input type="text" maxlength="25">

localstorage (javascript)

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