Шпаргалка «HTML теги»

Весь HTML сводился бы к тегам <div> и <span>, но придумали семантику [w3.org и whatwg.org].

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

<a href="URL">ссылка</a>
посмотреть смайлик
скачать смайлик к себе на компьютер
перейти в новой вкладке/окне к определённому месту веб-страницы
<dfn>термин</dfn> с определением

Часы — это прибор для определения времени.

<abbr title="всплывающая при наведении подсказка">аббревиатура</abbr>
Обзор учебной и научной деятельности МГУ.
<time>время</time>
Опубликовано .
<strong>важный отрывок текста, на который нужно обратить внимание в первую очередь</strong>
Учётной записи с таким логином не существует. Проверьте не нажата ли клавиша «Caps Lock» и попробуйте ввести пароль еще раз.
<em>отрывок текста, выделенный голосом и опровергающие иные утверждения</em>
В семантической разметке много лишних тегов!
<mark>актуальный отрывок текста</mark>
Вот здесь я ошибся: 2+3=5, а не 2+2=5
<cite>название или автор стороннего произведения, сторонней веб-страницы</cite>
NMitra

Так может быть оформлен комментарий на блоге.

<address>ссылка на страницу контактов автора, чей контент находится в родительском теге article</address>
Контактное лицо: NMitra
<i>технический термин, транслитерация или фраза из другого языка</i>

Сема́нтика (от др.-греч. σημαντικός — обозначающий) — раздел лингвистики, изучающий смысловое значение единиц языка.

<var>переменная</var>
Ваше имя: name
<kbd>клавиши клавиатуры</kbd>
Для открытия только что закрытой вкладки можно нажать Shift+Ctrl+T
<code>код</code>
<code>фрагмент кода</code>
<samp>результат вывода компьютерной программы</samp>
У меня скрипт не выполняется, пишет Warning: "sendmail_from" not set in php.ini?
<b>ведущая часть предложения или абзаца без эмоциональной окраски</b>

Стена между Россией и Украиной выгодна:

  1. Коррупционерам. Можно под благовидным предлогом выделить огромные средства на строение, о котором забудут уже через пару лет…
<small>оговорки, правовые ограничения, авторские права</small>
Цена одноместного номера составляет 2700 рублей (включая завтрак и ужин).
<u>орфографические ошибки или фамилии граждан Китая</u>
Ой, очепятка.
<s>устаревшее неверное содержание, сарказм</s>
Я сяду на диету сегодня завтра.
<del cite="URL с доп. информацией" datetime="время удаления">удалённое содержание</del>
Для группировки заголовков <h1>-<h6> следует использовать тег <hgroup>.
<ins cite="URL с доп. информацией" datetime="время добавления">добавленное содержание</ins>
Обновление от . <hgroup> удален из спецификации HTML5.
<q cite="URL источника">строчная цитата</q>

Данная моя статья иллюстрирует слова Дюма: Для Атоса это слишком много, а для графа де ла Фер — слишком мало.

<blockquote cite="URL источника">блочная цитата</blockquote>
Кушать подано. Садитесь жрать, пожалуйста!
<p>абзац</p>

При хорошем стандарте знаешь, что именно тут нужно применить именно этот тег. Теги не пересекаются друг с другом, как это делают, например, <s> и <del>. Помимо смыслового значения есть графическая разница, допустим, как у <abbr>, а не как у <em>, <i>, <dfn> и <cite>. Отсутствует необходимость добавлять дополнительные обёртки, в частности, в <blockquote> писать <footer>.

<bdi>направление текста не может быть изменено</bdi>
إيان объяснил, что <bdi> нужен при смешении в предложении, скажем, русского и арабского языка.
<bdo dir="ltr|rtl">направление текста</bdo>
с лева направо | с права налево
<ruby>
   <rb>китайское/японское слово</rb>
   <rt>правила произношения</rt>
   <rp>показан, когда нет поддержки браузерами</rp>
   <rtc>???</rtc>
</ruby>
<sup>верхний индекс</sup>
S = a2
<sub>нижний индекс</sub>
alogab = b
<br>перенос на новую строку

Наша Таня громко плачет:
Уронила в речку мячик.
- Тише, Танечка, не плачь:
Не утонет в речке мяч.

<hr> линия

Первый абзац


Тематически отличный второй абзац

длинное<wbr>слово<wbr>при<wbr>необходимости<wbr>переносится<wbr>где<wbr>я<wbr>показала (аналог)
длинноесловопринеобходимостипереноситсягдеяпоказала

Примечание:

  1. теги, выделенные серым цветом, можно не использовать (подробнее).
  2. у родителя, помеченного только    , не должно быть блочного потомка.

Элементы формы HTML

<form action="URL.php" method="get|post" autocomplete="on|off" novalidate accept-charset="UTF-8" enctype="application/x-www-form-urlencoded|multipart/form-data|text/plain" name="myform" target="name_iframe|_blank|_self|_parent|_top">форма</form>

Результат сложения двоек?

<input type="text|password|hidden|search|tel|url|email|datetime|date|month|week|time|number|range|color|checkbox|radio|file|submit|image|reset|button"> (все типы)
<button type="submit|reset|button|menu">кнопка</button>
<textarea>несколько строк текста может изменяться пользователем</textarea>
<select>
   <optgroup label="заголовок группы option">
       <option>пункт раскрывающегося списка</option>
   </optgroup>
</select>
<datalist>
   <option>пункт раскрывающегося списка по мере заполнения input</option>
</datalist>
<label for="id у input|textarea|select">нажать на текст</label> фокус получает input, textarea, select (подробнее)
<output>результат расчёта (калькулятор стоимости, график погашения кредита и т.п.)</output>
+ = 0
<meter min="-200" low="0" high="100" max="150" optimum="120" value="50">50</meter> значение в пределах известного диапазона (подробнее)
50
<progress max="150" value="50">50</progress> процент завершения работ (подробнее)
50
<fieldset>
   <legend>заголовок группы элементов формы</legend>
</fieldset>

Универсальные обёртки HTML

<span>строчная обёртка</span>

Слово слово слово

<div>блочная обёртка</div>

Первый абзац

Второй абзац

Списки и группировки HTML

<table>
  <caption>заголовок к таблице</caption>
  <colgroup>
    <col span="2">
  </colgroup>
  <thead>
    <tr>
      <th>заголовок столбца 1</th>
      <th>заголовок столбца 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ячейка столбца 1 (см. как объединять ячейки таблицы)</td>
      <td>ячейка столбца 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>итоговая ячейка столбца 1</td>
      <td>итоговая ячейка столбца 2</td>
    </tr>
  </tfoot>
</table>
заголовок к таблице
заголовок столбца 1 заголовок столбца 2
ячейка столбца 1 ячейка столбца 2
итоговая ячейка столбца 1 итоговая ячейка столбца 2
<ol>
  <li>нумерованный первый пункт</li>
  <li>нумерованный второй пункт</li>
</ol>
  1. нумерованный первый пункт (подробнее про списки)
  2. нумерованный второй пункт
<ul>
  <li>пункт, не важно будет он первым или последним в списке</li>
  <li>пункт, не важно будет он первым или последним в списке</li>
</ul>
  • пункт, не важно будет он первым или последним в списке
  • пункт, не важно будет он первым или последним в списке
<dl>
  <dt>ключ</dt>
  <dd>значение</dd>
  <dt>ключ</dt>
  <dd>значение</dd>
</dl>
опубликовано:
390 сообщений
просмотров страниц:
5358438
<figure>
  <img src="" alt="">
  <figcaption>описание к диаграмме, изображению, цитате, видео, блоку кода</figcaption>
</figure>
котёнок мечтает стать львом
Рис.1 Когда-нибудь котёнок выберется из лужи
<details>
    <summary>заголовок-кнопка</summary>
    <p>появляющаяся информация
</details>
заголовок-кнопка
появляющаяся информация (подробнее)

Вёрстка HTML5

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Стихотворения для детей</title>
        <script src="javascript.js"></script>
        <link rel="stylesheet" href="style.css" />
        <link rel="icon" href="/favicon.ico">
        <link href='http://site.com/this-page.html' rel='canonical'/>
    </head>
    <body>
        <header>
          <nav></nav>
        </header>
        <main>
            <article>
              <h1>Детские стихи</h1>
              <section>
                <h2>Пушкин</h2>
              </section>
              <section>
                <h2>Некрасов</h2>
                <section>
                  <h3>Дедушка Мазай и зайцы</h3>
                </section>
              </section>
              <section>
                <h2>Чуковский</h2>
              </section>
            </article>
            <aside></aside>
        </main>
        <footer></footer>
    </body>
</html>
<header>
<nav>
<main>
<article> <aside>
<footer>
в f t
наверх ↑

12 комментариев:

Юрий
Наташа (извините, что так обращаюсь), только начал изучение html5. Честно говоря, скачал много шаблонов с этой версией в качестве образцов для изучения. Что интересно - практически во всех темах новые-старые теги(многие использовали их и раньше) встречаются довольно редко. До сих пор преобладает div.

Недавно смотрел на YouTube "Верстка на HTML5 со смыслом". Там не стесняются говорить, что если не знаешь, какой тег HTML5 следует применить, то лучше воспользоваться старым добрым div. Тем более, что верстка в данном случае будет все равно валидной (если она действительно валидна). Очевидно, что прямое назначение некоторых тегов трактуется по-разному. Может быть начинающим верстальщикам, действительно, пока что использовать основные теги, чередуя их с div?
NMitra
Скажу по себе. Предполагаю, что пока будет такое разночтение и пересечение, теги просто не будут правильно использоваться основной массой (или вообще не будут использоваться), а значит они не будут учтёны ни поиском, ни программами для чтения. Их наличие тогда теряет смысл. Для поисковиков так вообще всё равно, что за тег был выбран. Если текст жирный, то ему придадут важность. Это может быть даже span с присвоенными стилями. Я по прежнему жирные участки выделяю тегом b, оно поддерживается всеми версиями браузеров.

Если смысловая нагрузка теряется, то остаётся функциональность и внешний вид. Теги, на подобии mark, progress и новые типы input будут находить своего пользователя. Потому что они полезны и то, что требовало раньше кучи JavaScript-a решается HTML. При этом пользователи старых версий смогут заполнить форму, они не увидят только этой красоты и удобства. Это круто.

Такие теги как footer я использую только для футера body. Делить статью на секции и каждой присваивать свою шапку, заголовок, футер и тело считаю маразмом - в коде будет огромная куча бестолкового HTML, который отразиться на загрузке страницы.

Поэтому напрягаться по-поводу семантики особо не нужно, лучше страницу разметить Schema.org. Не просто Schema.org, а теми схемами, что поддерживают Google и Яндекс.

Я делаю так, если я вижу, что тег code улучшает восприятие кода, используемого в статье, то я его применяю. Часто ограничиваюсь только pre. "HTML" по идее нужно каждый раз окружать тегом abbr, но для меня это безумие. А вот для некоторых сокращений, с которыми мои читатели не знакомы, он может быть полезен.
Юрий
Наташа, а какой тег рекомендуется использовать в качестве обертки для отдельных блоков (например, для двух сайдбаров и блока с основным контентом)? Можно ли применять для этого section или лучше воспользоваться div?
NMitra
Есть тег main. Посмотрите пример с версткой в статье и всплывающую на нем подсказку.
Юрий
Простите, Наташа, очевидно, я неверно сформулировал вопрос... Имел в виду тег, который мог бы служить оберткой для абсолютно любого блока (т.е использоваться в документе многократно). За это время нашел ответ на сайте Влада Мержевича (причем, в комментариях). Для оберток, действительно и дальше будет использоваться div, поскольку div id ="wrapper" не имеет отношения к семантике и не несет никакой смысловой нагрузки. Все равно благодарен вам за ответ. Кстати, не видел всплывающих подсказок, т.к. при наведении курсора на латинский шрифт у меня автоматически всплывают подсказки яндекс-переводчика...
NMitra
Да, div универсален и не несёт никакой смысловой нагрузки, у него нет padding и margin, как у тега p и figure, например, всем хорош.
NMitra
Ещё маленькое дополнение: section должен почти всегда иметь заголовок группы h, им можно разметить, части статьи, например, для того, чтобы им дать разный фон, но как универсальная обёртка он не подходит.
Настя Солнечная (Федорова)
Прикольно) Спасибо
Анонимный
Здравствуйте, Наталья!

Спасибо за апдэйт! :)

У нас тоже много материала хранится в папках, датируемых ГОДАМИ выпуска.
Мы думаем, что: несмотря на ценность информации на странице, через какое-то время, если пользователь ищет вашу информацию, то при выдаче поиска в поисковом снипете он будет видеть дату страницы (URL) и считать, что информация "там старая" и не будет на него кликать для перехода.

Наверное, хорошим решением будет размещать статью в новой папке текущего года (например, ".../2014/10/"), а со старых страниц делать либо переадресацию, либо размещать ссылку на обновлённый материал.

...
NMitra
Здравствуйте, я меняю дату в сниппете с помощью микроформатов http://shpargalkablog.ru/2010/07/bez-dat.html
Межкомнатные двери
отлично спасибо
vittorio petriv
!!!