7 полезных HTML-тегов, про которые мало кто знает
easy

7 полезных HTML-тегов, про которые мало кто знает

Теперь вы тоже про них узнаете

Стандарт HTML5 принят в 2014 году, и тогда же в HTML добавилось много новых тегов, про которые многие не знают до сих пор. Мы решили исправить это и рассказать о семи полезных HTML-тегах, которые можно использовать почти в любом проекте. Многие из них решают SEO-задачи, но есть и те, которые меняют внешний вид страницы.

<header> и <footer>

Видимый эффект: нет.

Задача этих тегов — разметить на странице блоки с шапкой и подвалом сайта (то есть верхней и нижней частью). Они не влияют на внешний вид сайта, но помогают поисковым системам разобраться в структуре страницы. Например, поисковик может взять из подвала время работы компании для карточки быстрого ответа или найти в шапке общую информацию о сервисе:

7 полезных HTML-тегов, про которые мало кто знает
Пример карточки Яндекса с быстрым ответом
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Новые теги</title>
    <style>
      body {
        font-family: arial;
        font-size: 18px;
        line-height: 1.3;
      }
      </style>
</head> 
<body>
  <header>
    <h1>
      Журнал «Код»
    </h1>
    <p>
      «Код» — журнал «Яндекс Практикума» о технологиях и программировании.
    </p>
    <p>
      Мы помогаем преодолеть барьер на входе в информационные технологии
    </p>
    <hr>
  </header>

  <!-- тут — основное содержимое страницы -->

  <footer>
    <h3>
      Кто пишет «Код»
    </h3>
    <p>
      Статьи — Миша Полянин
      <br>
      Редактор новостей — Инна Долога
      <br>
      Корректор — Ира Михеева
      <br>
      Главред — Максим Ильяхов
    </p>
  </footer>
</body> 
</html>
7 полезных HTML-тегов, про которые мало кто знает
Если убрать новые теги, то внешне страница будет выглядеть точно так же, но исчезнет внутренняя логическая разметка

<article>

Видимый эффект: нет.

Второй тег для помощи поисковикам. Его задача — сообщить роботу, что здесь начинается основное содержимое, ради которого пользователь и пришёл на сайт. Например, мы написали статью про анализ слов и хотим логически отделить её от остального текста на странице. Для этого мы оборачиваем всю статью в тег <article> — так поисковик будет знать, что основное лежит здесь.

Если на странице несколько материалов, например новостей или коротких подборок, то можно обернуть каждую таким тегом — в стандарте нет ограничений на количество таких разделов.

Для наглядности добавим тег с началом статьи к предыдущему коду:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Новые теги</title>
    <style>
      body {
        font-family: arial;
        font-size: 18px;
        line-height: 1.3;
      }
      </style>

</head> 
<body>
  <header>
    <h1>
      Журнал «Код»
    </h1>
    <p>
      «Код» — журнал «Яндекс Практикума» о технологиях и программировании.
    </p>
    <p>
      Мы помогаем преодолеть барьер на входе в информационные технологии
    </p>
    <hr>
  </header>

  <article>
    <p>
      Мы уже анализировали самые частые слова в тексте, но делали это быстро, на коленке и с помощью Экселя. Теперь подойдём к этому серьёзно и используем дата-сайенс и Python — с ним такой анализ будет проще, быстрее и эффективнее. Заодно научимся делать такое красивое облако самых частых слов — это из первого тома «Войны и мира».
    </p>
    <p> <strong> Что делаем </strong> </p>
    <p>
      Сегодня мы проанализируем текст всех томов «Войны и мира» и посмотрим, изменятся ли самые частые слова, как это будет выглядеть в облаке. Интересно, можно ли по таким облакам хотя бы примерно понять общее настроение или содержание текста.
    </p>
  </article>

  <footer>
    <h3>
      Кто пишет «Код»
    </h3>
    <p>
      Статьи — Миша Полянин
      <br>
      Редактор новостей — Инна Долога
      <br>
      Корректор — Ира Михеева
      <br>
      Главред — Максим Ильяхов
    </p>
  </footer>
</body> 
</html>
7 полезных HTML-тегов, про которые мало кто знает
Внутри тега может быть материал любого размера

<aside>

Видимый эффект: нужно настроить через стили.

Иногда бывает полезно к основному материалу добавить что-то на поля: мысль, комментарий или примечание. Для этого в HTML5 используется тег <aside> — он размещает на странице дополнительный контент, который не относится к основному материалу.

Чтобы визуально это выглядело опрятно, к этому тегу и тегу статьи добавляют стили — они помогают сопоставить абзац основного текста и комментарий к нему:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Новые теги</title>

    <style>
      body {
        font-family: arial;
        font-size: 18px;
        line-height: 1.3;
      }
      aside {
        /* фон */
        background: yellow; 
        /* поля */
        padding: 10px;
        /* ширина */
        width: 200px;
        /* основной текст будет слева */
        float: right;
        /* фон */
        font-size: 13px;
       }
       .main {
        /* отступ справа */
        margin-right: 240px;
        /* указываем, что это блок */
        display: block;
       }
      </style>
</head> 
<body>

  <aside>
   <p>Как мы делали раньше</p>
  </aside>

  <div class="main">
    <p>
      Мы уже анализировали самые частые слова в тексте, но делали это быстро, на коленке и с помощью Экселя. Теперь подойдём к этому серьёзно и используем дата-сайенс и Python — с ним такой анализ будет проще, быстрее и эффективнее. Заодно научимся делать такое красивое облако самых частых слов — это из первого тома «Войны и мира».
    </p>
  </div>

  <p> <strong> Что делаем </strong> </p>
  
  <aside>
   <p>Что сделаем сегодня и зачем</p>
  </aside>

  <div class="main">
    <p>
      Сегодня мы проанализируем текст всех томов «Войны и мира» и посмотрим, изменятся ли самые частые слова, как это будет выглядеть в облаке. Интересно, можно ли по таким облакам хотя бы примерно понять общее настроение или содержание текста.
    </p>
    <hr>
  </div>

</body> 
</html>
7 полезных HTML-тегов, про которые мало кто знает

<section>

Видимый эффект: нет.

Ещё один способ логически объединить данные на странице в один блок. Это бывает полезно при вёрстке, чтобы было видно, где заканчивается один раздел и начинается другой. Внешне никак не проявляется, но верстать становится проще.

<section id = "part1">
  <aside>
   <p>Как мы делали раньше</p>
  </aside>

  <div class="main">
    <p>
      Мы уже анализировали самые частые слова в тексте, но делали это быстро, на коленке и с помощью Экселя. Теперь подойдём к этому серьёзно и используем дата-сайенс и Python — с ним такой анализ будет проще, быстрее и эффективнее. Заодно научимся делать такое красивое облако самых частых слов — это из первого тома «Войны и мира».
    </p>
  </div>
</section>

<section id = "part2">
  <p> <strong> Что делаем </strong> </p>
  
  <aside>
   <p>Что сделаем сегодня и зачем</p>
  </aside>

  <div class="main">
    <p>
      Сегодня мы проанализируем текст всех томов «Войны и мира» и посмотрим, изменятся ли самые частые слова, как это будет выглядеть в облаке. Интересно, можно ли по таким облакам хотя бы примерно понять общее настроение или содержание текста.
    </p>
    <hr>
  </div>
</section>

<mark>

Видимый эффект: слова выделятся просто так и особенно на поиске.  С помощью этого тега можно выделить на странице ключевые слова или результаты поиска. Раньше для этого использовали <span> со стилями, теперь сделали отдельный тег. По умолчанию всё выделяется жёлтым, как будто мы выделяем слова маркером на бумаге — отсюда и название тега:

 <p>
   Мы уже анализировали самые частые слова в тексте, но делали это быстро, на коленке и с помощью Экселя. Теперь <mark>подойдём к этому серьёзно</mark> и используем дата-сайенс и Python — с ним такой анализ будет проще, быстрее и эффективнее. Заодно научимся делать такое красивое <mark>облако самых частых слов</mark> — это из первого тома «Войны и мира».
 </p>
7 полезных HTML-тегов, про которые мало кто знает

<details>

Видимый эффект: появится интерактивный элемент — раскрывашка.

Это такой аналог ката, когда информация прячется за клик — например, чтобы не спойлерить или не засорять страницу лишними деталями, которые нужны только экспертам.

<details>
      <summary>Внимание, спойлер!</summary>
      <p>Минус такого решения в том, что поиск работает только с одинаковыми словами. Например, «исследователь», «исследовательский» и «исследование» — это три разных слова, за которыми стоит один смысл. Но они у нас будут на разных строках, и мы не сможем их сразу учесть все вместе.</p>
</details>
7 полезных HTML-тегов, про которые мало кто знает

<meter>

Видимый эффект: графический индикатор.

Когда нам нужно вывести на странице значения счётчиков или показать текущие параметры какого-то прибора, можно не делать кастомный индикатор, а использовать уже готовый — <meter>. Его плюс в том, что он сам следит за тем, насколько текущие значения укладываются в допустимые границы, и подсвечивает всё разными цветами. Например, если прибор работает штатно и показатели в норме, то он будет зелёным, а если выходят за границы диапазонов — то жёлтым.

Допустим, у нас есть датчик, который показывает давление воды в трубах. Минимально допустимое давление — 2 атмосферы, максимальное — 5. Вот как это может выглядеть на странице:

  <p>Индикатор давления</p>
  <p>Низкое <meter value="1" max="10" low="2" high="5"></meter> </p>
  <p>Нормальное  <meter value="3" max="10" low="2" high="5"></meter>  </p>
  <p>Высокое <meter value="7" max="10" low="2" high="5"></meter>  </p>
7 полезных HTML-тегов, про которые мало кто знает

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Новые теги</title>

    <style>
      body {
        font-family: arial;
        font-size: 18px;
        line-height: 1.3;
      }
      aside {
        /* фон */
        background: yellow; 
        /* поля */
        padding: 10px;
        /* ширина */
        width: 200px;
        /* основной текст будет слева */
        float: right;
        /* фон */
        font-size: 13px;
       }
       .main {
        /* отступ справа */
        margin-right: 240px;
        /* указываем, что это блок */
        display: block;
       }
      </style>
</head> 
<body>
  <header>
    <h1>
      Журнал «Код»
    </h1>
    <p>
      «Код» — журнал «Яндекс Практикума» о технологиях и программировании.
    </p>
    <p>
      Мы помогаем преодолеть барьер на входе в информационные технологии
    </p>
    <hr>
  </header>

  <section id = "part1">
    <aside>
     <p>Как мы делали раньше</p>
    </aside>

    <div class="main">
      <p>
        Мы уже анализировали самые частые слова в тексте, но делали это быстро, на коленке и с помощью Экселя. Теперь подойдём к этому серьёзно и используем дата-сайенс и Python — с ним такой анализ будет проще, быстрее и эффективнее. Заодно научимся делать такое красивое облако самых частых слов — это из первого тома «Войны и мира».
      </p>
    </div>
  </section>

  <section id = "part2">
    <p> <strong> Что делаем </strong> </p>
    
    <aside>
     <p>Что сделаем сегодня и зачем</p>
    </aside>

    <div class="main">
      <p>
        Сегодня мы проанализируем текст всех томов «Войны и мира» и посмотрим, изменятся ли самые частые слова, как это будет выглядеть в облаке. Интересно, можно ли по таким облакам хотя бы примерно понять общее настроение или содержание текста.
      </p>
      <hr>
    </div>
  </section>

   <p>
     Мы уже анализировали самые частые слова в тексте, но делали это быстро, на коленке и с помощью Экселя. Теперь <mark>подойдём к этому серьёзно</mark> и используем дата-сайенс и Python — с ним такой анализ будет проще, быстрее и эффективнее. Заодно научимся делать такое красивое <mark>облако самых частых слов</mark> — это из первого тома «Войны и мира».
   </p>

   <details>
    <summary>Внимание, спойлер!</summary>
    <p>Минус такого решения в том, что поиск работает только с одинаковыми словами. Например, «исследователь», «исследовательский» и «исследование» — это три разных слова, за которыми стоит один смысл. Но они у нас будут на разных строках, и мы не сможем их сразу учесть все вместе.</p>
  </details>

  <p>Индикатор давления</p>
  <p>Низкое <meter value="1" max="10" low="2" high="5"></meter> </p>
  <p>Нормальное  <meter value="3" max="10" low="2" high="5"></meter>  </p>
  <p>Высокое <meter value="7" max="10" low="2" high="5"></meter>  </p>

  <footer>
    <h3>
      Кто пишет «Код»
    </h3>
    <p>
      Статьи — Миша Полянин
      <br>
      Редактор новостей — Инна Долога
      <br>
      Корректор — Ира Михеева
      <br>
      Главред — Максим Ильяхов
    </p>
  </footer>


</body> 
</html>

Обложка:

Алексей Сухов

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
easy