Базовый HTML-код

Тег <!DOCTYPE>

Определяет версию HTML. Указывается в первой строчке.

Тег <title>

Заголовок документа (название во вкладке).

<title>Interactive HTML</title>
для этой страници.

Теги <h1>...<h6>

Заголовки на странице.

Заголокок h1

Заголокок h2

Заголокок h3

Заголокок h4

Заголокок h5
Заголокок h6

Тег <hr>

Линия.

Тег <html>

Код страници.

Тег <head>

Сведенья о документе.

Не визуализируются на странице.

Тег <body>

Тело документа, всё, что есть на странице.

Тег <p>

Абзац.

Тег <br>

Перенос <br>
строки.

Тег <!--...-->

Комментарий.

Ссылки

Тег <a>

Гиперсылка, связь одной страници с другой.

Neil Josten

Блог о Лисьей норе

Тег <link>

Подключение внешних ресурсов. Например для этого сайта подключена внешняя таблица стилей (CSS).

Тег <nav>

Набор навигационных ссылок (что-то вроде меню).

Мета Инфо

Тег <base>

Указывает базовый URL-адрес/цель для всех относительных URL-адресов в документе.

Указыкаются в <head>.

Например, если указано <base href="/home/">
...
<img src="/mav/3.gif">
то полный путь будет /home/mav/3.gif

Тег <head>

Сведенья о документе. Пользователь их не видит.

Тег <meta>

Метаданные, их используют поисковые машины для поиска.

Указыкаются в <head>.

Изображения

Теги <figure> <figcaption>

<figure> автономное содержание (иллюстрации, диаграммы, фотографии, списки кодов и т.д.)

<figcaption> заголовок для <figure>

The foxhole court - Nora Sakavic
Рис. 1 - Лисья нора

Тег <img>

Изображение.

ALL FOR THE GAME

Нажми на изображение

Тег <map> <area>

<area> определяет область-ссылку на изображении.

<map> хранит в себе тег <area> и привязывает изображение.

HTML CSS JavaScript MDN infographic

Нажми на CSS/JS/HTML.

Тег <picture>

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

Содержит один или несколько тегов <source> и один тег <img>.

Если вы измените ширину окна, то картинка поменяется.

Тег <canvas>

Холст, чтобы рисовать нужно использовать скрипты.

холст не может загрузиться.

Тег <svg>

Маштабируемая векторная графика.

SVG

Форматирование

Тег <abbr>

Аббревиатура или акроним.

CSS HTML API

Тег <b>

Полужирный текст.

Тег <bdi>

Изолирует слова, непишущиеся слева направо.

С <bdi> إيان: 90
Без <bdi> إيان: 90

Тег <bdo>

Направление текста.

Можно писать так
Можно писать так

Тег <ins>

Подчёркнутый текст.

Тег <dfn>

Термин.

ASCII — это стандарт, приписывающий символаом слоты в
8-битном коде.

Тег <em>

Курсив.

Тег <meter>

Отображение числовых значений.

Тег <code>

Часть кода.

print("My fist site!")

Тег <pre>

Моноширный текст

Тег <address>

Контактные данные автора.

Moscow, Russia

Тег <strong>

Важный текст.

Тег <blockquote>

Цитирование из другого источника.

Цитата с сайта WWF:

Вот уже 50 лет ...

Тег <cite>

Название произведения.

Война и мир. Лев Николаевич Толстой.

Тег <del> <s>

Зачёркнутый текст.

Тег <i>

Слова, фразы, для выделения интонацией.

Используется, если нет более подходящего выделения.

Тег <mark>

Выделенный текст.

Тег <kbd>

Название клавиш или их комбинация.

Смена языка: Alt+Shift

Тег <progress>

Ход выполнения задачи.

Тег <q>

Короткие цитаты.

Теги <ruby> <rt> <rp>

<ruby> восточноазиатские символы.

<rt> информация
о произношении.

<rp>()
скобки.

漢 (kan) 字 (ji)

Тег <samp>

Вывод компьютерной программы.

print("Hello world!")

Hello world!

Тег <template>

HTML код, который будет в этом теге, не будет визуализироваться.

Нужен вроде шаблона.

Тег <sub> Тег <sub>

Нижний
регистр.

Верхний
регистр.

H2O

m2

Тег <var>

Переменная.

Тег <small>

Меньший текст.

print("Hello world!")

Apple
Founded in 1976, California,USA

Тег <time>

Дата и время.

Тег <u>

Слова с ошибкой.

This is a parragraph.

Тег <wbr>

Разрыв строки.

Указывает, где в тексте было бы ОК, чтобы добавить разрыв строки.

Списки

Тег <ul>

Не нумерованный список.

  • Coffee
  • Tea
  • Milk

Тег <li>

Элемент списка.

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Тег <ol>

Упорядоченный список.

  1. Coffee
  2. Tea
  3. Milk

Тег <menu, menuitem>

<menu> устарел, рекомендуется использовать <ul>

<menuitem> устарел, рекомендуется использовать <li>

Теги <dl> <dt> <dd>

<dl>
список
описания

<dt>
термин или
имя

<dd> описывает термин или имя

Coffee
Black hot drink
Tea
Green drink

Стили и семантика

Тег <style>

Стиль для документа.

Определяется в <head>.

Рекомендуется выносить стили в отдельный файл.

<style>
div {
float: left;
}
</style>

Тег <article>

Представляет статью.

Этот текст находиться в теге <article>

Тег <header>

Контейнер для названия.

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

!Примечание: не может быть помещен в <footer>, <address>, <header>

Тег <aside>

Текст в стороне.

Этим летом я посетил Epcot центр.

Тег <main>

Представляет уникальное содержание страници.

Может быть только один в документе.

Не должен быть потомком <article>, <aside>, <footer>, <header>, <nav>.

Тег <span>

Представляет строку. Используется для стилизации элементов.

Тег <section>

Разделы страници (главы, заголовки, контитулы).

WWF

Всемирный фонд природы (WWF) является..

Тег <div>

Контейнер для элементов HTML.

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

Тег <data>

Связивает объект с его id, чтобы его находить.

Пример: у каждой вещи в интернет-магазинах есть свой id, так можно понять какой товар доставить.

Тег <footer>

Нижний контитул.

Информация об авторе, авторских правах, контакты, карта сайта, документы.

Мой ник: Maverick
GitHub: GitHub

Тег <dialog>

Диалоговое окно.

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

Теги <details> <summary>

<details> сведенья, которые пользователь может скрывать.

<summary> видимый заголовок для details

Copyright 1999-2014.

- by Refsnes Data.
All Rights Reserved.

Формы и ввод

Тег <form>

Форма для ввода данных.

First name: Second name:

Тег <button>

Теги <select> <optgroup> <option>

<select> раскрывающийся список.

<optgroup> группа параметров в списке.

<option> параметр в списке.

Тег <label>

Метка для <input>.

Тег <legend>

Заголовок для <fieldset>.

Тег <datalist>

Список параметров для <input>.

Тег <input>

Ввод данных.

Тег <textarea>

Строка ввода.

Тег <fieldset>

Метка для <input>.

Personalia: Name:
Email:
Date of birth:

Тег <output>

Результат вычисления.

0 100 + =

Таблица

Тег <table>

Определяет таблицу.

Month Days
January 31
November 30
2 month 61

Тег <td>

Ячейка.

January

Тег <thead>

Группирует ячейки заголовка таблицы <th>.

Month Days

Тег <tfoot>

Группирует содержимое нижнего колонтитула в таблице.

2 month 61

Тег <caption>

Заголовок таблицы.

Duration of month
Month Days
January 31

Тег <tr>

Строка.

January 31

Тег <th>

Ячейка заголовка таблицы.

Month Days
... ...

Тег <tbody>

Группирует тело таблицы <th>.

January 31
November 30

Теги <col> <colgroup>

<col> задаёт свойства столбцам.

<colgroup> объединяет <col>.

Month Days
January 31
November 30

Аудио/Видео

Тег <video>

Тег <audio>

Тег <source>

Определяет несколько треков, картинок, видео для воспроизведения/показа, взависимости от характеристик ПК.

Тег <track>

Текстовые дорожки для видео или аудио (субтитры).

Программирование

Тег <script>

Подключает скрипт к сайту.

...
<script src="..."> </script>
</body>

Тег <object>

Внедренный объект в документе HTML.

Например, аудио, видео, Java-апплетов, ActiveX, PDF и Flash.

Тег <noscript>

Браузер без поддержки JavaScript покажет текст внутри элемента noscript.

Тег <embed>

Подключение внешнего приложения или интерактивного содержимого.

Тег <param>

Параметры <object>.