Шпаргалка по синтаксису HTML и типовым задачам
При работе с HTML очень полезно иметь под рукой простой способ вспомнить, как правильно использовать HTML-теги и как их применять. MDN предоставляет вам подробную справочную документацию по HTML, а также обстоятельный набор руководств по HTML. Однако во многих случаях нам просто нужны быстрые подсказки по ходу работы. Именно для этого и нужна эта шпаргалка: она содержит точные готовые фрагменты кода для распространённых случаев использования.
Примечание: HTML-теги следует использовать в соответствии с их семантическим значением, а не внешним видом. Внешний вид любого тега можно полностью изменить с помощью CSS, поэтому при работе с HTML уделяйте внимание значению, а не внешнему виду.
Строчные элементы
«Элемент» — это отдельная часть веб-страницы. Некоторые элементы крупные и содержат более мелкие элементы, например контейнеры. Некоторые элементы маленькие и «вложены» в более крупные. По умолчанию «строчные элементы» располагаются на веб-странице рядом друг с другом. Они занимают ровно столько ширины, сколько им необходимо, и помещаются по горизонтали, как слова в предложении или книги на полке. Все строчные элементы можно размещать внутри элемента <body>.
| Применение | Элемент | Пример |
|---|---|---|
| Ссылка | <a> | <a href="https://example.org"> A link to example.org</a>. |
| Изображение | <img> | <img src="beast.png" width="50" /> |
| Строчный контейнер | <span> | Used to group elements: for example, to <span style="color:blue">style them</span>. |
| Выделение текста | <em> | <em>I'm posh</em>. |
| Курсивный текст | <i> | Mark a phrase in <i>italics</i>. |
| Полужирный текст | <b> | Bold <b>a word or phrase</b>. |
| Важный текст | <strong> | <strong>I'm important!</strong> |
| Выделенный текст | <mark> | <mark>Notice me!</mark> |
| Зачёркнутый текст | <s> | <s>I'm irrelevant.</s> |
| Подстрочный индекс | <sub> | H<sub>2</sub>O |
| Мелкий текст | <small> | Used to represent the <small>small print </small>of a document. |
| Адрес | <address> | <address>Main street 67</address> |
| Текстовая цитата | <cite> | For more monsters, see <cite>The Monster Book of Monsters</cite>. |
| Надстрочный индекс | <sup> | x<sup>2</sup> |
| Строчная цитата | <q> | <q>Me?</q>, she said. |
| Перенос строки | <br> | Line 1<br />Line 2 |
| Возможный перенос строки | <wbr> | <div style="width: 200px"> Llanfair<wbr />pwllgwyngyll<wbr />gogerychwyrndrobwllllantysiliogogogoch. </div> |
| Дата | <time> | Used to format the date. For example: <time datetime="2020-05-24"> published on 23-05-2020</time>. |
| Форматирование кода | <code> | This text is in normal format, but <code>this text is in code format</code>. |
| Аудио | <audio> | <audio controls>
<source src="/shared-assets/audio/t-rex-roar.mp3" type="audio/mpeg" />
</audio>
|
| Видео | <video> | <video controls width="250" src="/shared-assets/videos/flower.webm" > <a href="/shared-assets/videos/flower.webm">Download WebM video</a> </video> |
Блочные элементы
«Блочные элементы», напротив, занимают всю ширину веб-страницы. Они также занимают целую строку веб-страницы и не располагаются рядом друг с другом. Вместо этого они выстраиваются друг под другом, как абзацы в сочинении или кубики в башне.
Примечание: Поскольку эта шпаргалка ограничена несколькими элементами, представляющими определённые структуры или обладающими специальной семантикой, элемент div намеренно не включён: элемент div ничего не обозначает и не обладает специальной семантикой.
| Применение | Элемент | Пример |
|---|---|---|
| Обычный абзац | <p> | <p>I'm a paragraph</p> <p>I'm another paragraph</p> |
| Развёрнутая цитата | <blockquote> | They said: <blockquote>The blockquote element indicates an extended quotation.</blockquote> |
| Дополнительная информация | <details> | <details> <summary>HTML Cheat Sheet</summary> <p>Inline elements</p> <p>Block elements</p> </details> |
| Маркированный список | <ul> | <ul> <li>I'm an item</li> <li>I'm another item</li> </ul> |
| Нумерованный список | <ol> | <ol> <li>I'm the first item</li> <li>I'm the second item</li> </ol> |
| Список определений | <dl> | <dl> <dt>A Term</dt> <dd>Definition of a term</dd> <dt>Another Term</dt> <dd>Definition of another term</dd> </dl> |
| Горизонтальная линия | <hr> | before<hr />after |
| Заголовок | <h1>-<h6> | <h1> This is Heading 1 </h1> <h2> This is Heading 2 </h2> <h3> This is Heading 3 </h3> <h4> This is Heading 4 </h4> <h5> This is Heading 5 </h5> <h6> This is Heading 6 </h6> |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet
