Html-теги и атрибуты, о которых вы, возможно, не знали

Теги изображений

Абзацы в языке HTML

Обычно, блоки текста разделяют между собой абзацами(параграфами). Это облегчает чтение больших кусков текста. Язык HTML для создания абзаца содержит парный тег «p». Синтаксис создания абзацев следующий:

Абзацы на html-странице отделяются небольшими отступом от предыдущего и последующего элементов. Тег «Р» также является блочным элементом. Что такое блочные элементы я писал в статье «Как создать web-страницу». Напомню, что блочные элементы характеризуются тем, что занимают всю доступную ширину html-страницы, высота элемента определяется его содержимым, и он всегда начинается с новой строки.

Рассмотрим пример применения абзацев на web-странице. Откроем текстовый редактор, наберем HTML-код и сохраним с расширением html:

При открытии данного файла будет примерно такая картина:

Пока, что наша страница содержит одни абзацы.

Для выравнивания текста в абзаце тег «Р» поддерживает атрибут align. Он может принимать одно из четырех значений:

• • left — выравнивание текста по левому краю;
  • center — выравнивание текста по центру;
  • right — выравнивание текста по правому краю;
  • justify — выравнивание по ширине, т.е. выравнивание текста одновременно по правому и левому краю. Для этого браузер помещает пробелы между словами.

По умолчанию атрибут align имеет значение left. Пример использования атрибута align:

И так это отобразится в браузере:

Список новых тегов в HTML5

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

• <main> – используется для определения основного контента страницы. Он дает понять поисковому боту, что здесь содержится главный контент.
• <header> – «шапка» страницы или раздела, в которой обычно располагается навигация по сайту. Но так же этот тег можно использовать в других секция сайта, определяя в нем заголовок этой самой секции.
• <nav> – задает навигацию по сайту.
• <section> – обычно применяется для группировки разделов. Например, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.
• <article> – может быть пост на форуме, статья в журнале или газете, заметка в блоге, сообщение пользователя или другая независимая контент-единица.
• <aside> – определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации.
• <audio> – добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице.
• <video> – добавляет, воспроизводит и управляет настройками видеозаписи на веб-странице.
• <canvas> – создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.
• <footer> – задает «подвал» сайта или раздела, в нем может располагаться имя автора, дата документа, контактная информация или дополнительная навигация по сайту.
• <command> – устанавливает команду, срабатывающую при активации элемента (нажатием или сочетанием клавиш). Элемент может иметь вид кнопки, переключателя или флажка и должен быть вложен в элемент <menu>, в противном случае он не будет показан.
• <datalist> – создает список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.
• <details> – используется для хранения информации, которую можно скрыть или показать по требованию пользователя. По умолчанию содержимое тега не отображается, для изменения статуса применяется атрибут open.
• <embed> – используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.
• <hgroup> – используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от <h1> до <h6>.
• <keygen> – отвечает за генерацию пары ключей (открытый и закрытый), которые используются для шифрования и расшифровки данных форм, а также для создания и проверки цифровой подписи. Открытый ключ отправляется на сервер вместе с данными формы, а закрытый сохраняется на локальном устройстве пользователя.
• <mark> – помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри <mark> выделяется желтым цветом.
• <meter> – используется для вывода значения в некотором известном диапазоне. Используется преимущественно для отображения числовых значений: например, количества результатов поиска, объема жидкости, давления и др.
• <output> – определяет область, в которую выводится информация, преимущественно с помощью скриптов.
• <progress> – используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript.
• <ruby> – используется вместе с <rt> и <rp>. Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим.
• <time> – помечает текст внутри тега <time> как дата, время или оба значения. Может указываться непосредственно внутри контейнера <time> либо задаваться через атрибут datetime.
• <wbr> — указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

Функции в PHP

Функция — это команда, которая выполняет какие-либо действия, например расчёты, управление файлами и т.д.

Определить функцию просто — у неё после названия идут круглые скобки:

Функция phpinfo() выводит на экран информацию с текущими настройками PHP.

Результат работы функции phpinfo

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

Функция ceil() получает переданное нами значение 91.5, обрабатывает его (округляет до 92) и возвращает результат. А команда echo получает возвращённое функцией значение и выводит его на экран. Результатом работы этого скрипта будет 92.

Функции будут подробно рассмотрены в отдельном уроке.

Изображения

Указывать название (alt) и размеры (width и height) для изображений. Alt является обязательным атрибутом и, в основном, служит для того, чтобы при «битой» картинке пользователь мог понять, что именно должно было отобразиться на странице. 

Атрибуты width и height являются необязательными, но указав их, мы можем предотвратить:

• «скачок» страницы при медленной загрузке, так как пространство под картинки уже будет зарезервировано до их получения;

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

Некорректно:

Корректно:

Проверять вёрстку на валидность позволяет валидатор. Если не знаете, как его настроить, помогут онлайн-сервисы, например — validator.w3. 

Пример #2: HTML тег круговой диаграммы

Прошлый пример создания пользовательского HTML тега был довольно-таки прост. Этот же принцип можно применить для создания тега любой сложности.

Теперь давайте реализуем что-то посложнее: круговую диаграмму. Для этого нам понадобится:

• Создадим папку самого проекта и назовём .
• Внутри папки создадим HTML файл и назовём его . Тут будет храниться весь HTML код.
• JavaScript реализацию тега поместим в файл .

Пользовательские теги зачастую используются как контейнеры с определённым функционалом. В нашем случае тег будет называться и представлять собой контейнер с круговой диаграммой. Если вы пропустили мой урок Как рисовать диаграммы с использованием JavaScript и HTML5 Canvas, то можете взглянуть. Мы воспользуемся уже готовым кодом создания графика и поместим его в наш тег.

Поправим файл и поместим функции из упомянутого урока:

• drawLine()
• drawArc()
• drawPieSlice()
• Piechart()

Теперь отредактируем файл и напишем свой тег на месте которого появится диаграмма:

<html>
    <head>
        <script type="text/javascript" src="codingdude-piechart.js"></script>
    </head>
<body>
    <codingdude-piechart width="200" height="200" colors="#fde23e,#f16e23, #57d9ff,#937e88">
      <codingdude-data category="Classical music">10</codingdude-data>
      <codingdude-data category="Alternative rock">14</codingdude-data>
      <codingdude-data category="Pop">2</codingdude-data>
      <codingdude-data category="Jazz">12</codingdude-data>
    </codingdude-piechart>
</body>
</html>

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

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

Отредактируем файл и после функции графика вставляем следующий код:

// сюда нужно вставить функцию из прошлого урока
// Как рисовать диаграммы с использованием JavaScript и HTML5 Canvas
//...
function customTag(tagName,fn){
  document.createElement(tagName);
        // поиск всех вхождений пользовательского тега в документе
        var tagInstances = document.getElementsByTagName(tagName);
        // для каждого тега запускаем функцию
        for ( var i = 0; i < tagInstances.length; i++) {
            fn(tagInstances);
        }
}

function PiechartTag(element){
    // add the canvas where to draw the piechart
    var canvas = document.createElement("canvas");
    // get the width and height from the custom tag attributes
    canvas.width = element.attributes.width.value;
    canvas.height = element.attributes.height.value;
    element.appendChild(canvas);

    // get the colors for the slices from the custom tag attribute
    var colors = element.attributes.colors.value.split(",");

    // load the chart data from the <codingdude-data> sub-tags
    var chartData = {};
    var chartDataElements = element.querySelectorAll("codingdude-data");
    for (var i=0;i<chartDataElements.length;i++){
        chartData.attributes.category.value] = parseFloat(chartDataElements.textContent);
        //remove the data sub-tags
        chartDataElements.parentNode.removeChild(chartDataElements);
    }

    // call the draw() function
    new Piechart(
        {
        canvas:canvas,
        data:chartData,
        colors:colors
        }
    ).draw();
}

customTag("codingdude-piechart",PiechartTag);

Функций точно такая же как и в Примере #1. Реализация тега помещена в функцию . В частности данная функция:

• Создаёт элемент где будет отрисован график. Ширина и высота элемента canvas будет извлечена из атрибутов нашего пользовательского тега.
• Ищет атрибут , преобразует его значение в массив цветов для элементов круговой диаграммы.
• Последовательно подгружает элементы и помещает их в разметку графика. Текст, указанный в данных элементах будет отображён браузером. Мы этого не хотим, поэтому удалим элементы со страницы после того как извлечём из них значения.
• В конце вызывает конструктор с необходимыми параметрами и выполняет функцию для отрисовки графика.

Если зайти на страницу , то можно увидеть следующий круговой график:

Атрибут “canonical”

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

Когда возникают страницы с одинаковым контентом, но разными УРЛами.

Такие явления возможны при пагинации или наличии фильтра товаров.

Как правильно настраивать фильтры товаров, а также использовать атрибуты index. follow и canonical смотрите здесь.

Также с помощью этого атрибута мы объясняем поисковой системе, каким должен быть УРЛ. c WWW и косой чертой в конце “/” или без.

Пример синтаксиса написания:

<link rel=canonicalhref="https://freehost.com.ua/"/>

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML Tags

<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

Раздел HEAD.

Раздел HEAD содержит техническую информацию о веб-странице — заголовок, ее описание и ключевые слова для поисковых машин, данные об авторе документа, времени создания страницы, базовом адресе страницы, кодировке документа и т. д. Единственным обязательным тегом в разделе HEAD является тег <title>.

Текст, расположенный между тегами <title> и </title>, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, иначе он не полностью поместится в заголовке веб-браузера:
<title>Заголовок страницы</title>

С помощью одинарного тега <meta> можно задать описание содержимого веб-страницы, а также ключевые слова для поискового портала. Если текст между тегами <title> и </title> используется в качестве текста ссылки на эту страницу, то описание из тега <meta> будет отображено под ссылкой на веб-страницу:

<meta name="description" content="Описание содержимого страницы">
<meta name="keywords" content="Ключевые слова через запятую">

HTML Введение
HTML Базовые теги

Устаревшие мета-теги

Мета-тег Keywords

Синтаксис

<meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3, ..." />

Тег должен находиться внутри контейнера <head>…</head> в любом месте.

Данный мета-тег уже долгое время не учитывается системой Google, Яндекс официально сообщает о том, что данный тег может использоваться при определении соответствия страницы поисковым запросам. Однако подтверждений тому, что мета-тег kewords помогает в ранжировании сайта в Яндексе нет. Тем не менее, приведем ниже требования SEO к правильному заполнению мета-тега, которые были актуальны порядка 10 лет назад.

Требования SEO

• Использовать не больше 5-6 слов,
• использовать не более 3-х повторов,
• не стоит использовать союзы, предлоги, междометия.

Примеры правильного заполнения тегов

автополив газонов, авто полив, системы, купить, цены,  москва

Ошибки и неудачные примеры мета-тегов

• автополив газонов, автополив газонов купить, автополив газонов цены, автополив газонов москва, система автополива газонов, авто полив газонов, авто полив газонов купить, авто полив газонов цены, авто полив газонов москва, система авто полива газонов
• автополив газонов, секс, порно, девки,

Мета-тег NoODP

Синтаксис

<meta name="robots" content="noodp" />

Тег должен находиться внутри контейнера <head>…</head> в любом месте. Этот тег использовался в следующих случаях. Если сайт был добавлен в каталог dMoz, то некоторые поисковые системы могли выводить описание сайта, взятое из dMoz. Если это было не нужно, то добавлялся этот тег. С 17 марта 2017 года dMoz больше не работает, поэтому данный мета-тег теперь является устаревшим.

Структура тегов

При загрузке в браузере сами теги не отображаются, но влияют на способ отображения своего содержимого. Если в написание тега допущена ошибка, он игнорируется целиком.

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

Давайте посмотрим на правильную структуру тегов содержащих атрибуты:

1.  <img src=»logo.jpg»>
2. <a href=»samsebewebmaster.ru»>Сам Себе Вебмастер</a>

Для примера я привел два совершенно разных тега. Первый <img> одинарный — отвечает за вывод изображений, атрибут — src=»logo.jpg». Второй  <a>…</a> парный отвечает за создание ссылок, атрибут — href=»samsebewebmaster.ru».

Вывод 1: Атрибуты могут иметь парные и непарные теги.

Вывод 2: Атрибуты могут иметь только открывающие теги, закрывающие теги не имеют атрибутов.

Картинка для разъяснения:

Рисунок 1. Cтрутура тега html

Задача на внимательность и знание синтаксиса HTML

Давайте посмотрим на примере простой веб-страницы, которую мы рассматривали в уроке Введение в HTML:

1
2

 
Простейшая HTML страница

Тескт веб-страницы.

Задание: Проанализируйте и найдите две ошибки в коде использованного примера.

На этом урок закончен. Теперь вы знаете такое понятие, как Тег языка HTML.

Что такое пользовательский HTML тег?

Когда нам нужно сделать текст “жирным”, то мы пользуемся HTML тегом . Если же нужно вывести список, то мы вероятнее всего воспользуемся тандемом и . Браузеры используют разметку и таблицы стилей CSS, для того чтобы оформить внешний вид страницы, а в некоторых случаях и небольшой функционал.

Для создания современных веб-приложений текущего набора HTML элементов становится недостаточно. В большинстве случаев данная проблема решается путём использование целого набора HTML тегов, которые обрабатываются через JavaScript и CSS, но это не самое элегантное решение.

В идеале, решение должно выглядеть как собственный тег — между знаками , который будет понятен браузеру. Как и при работе с обычными HTML тегами у нас должна сохраниться возможность многократного использования тегов. Давайте посмотрим на реальный пример!

audio

Тег используется для встраивания аудио-контента (музыка и др.) в веб-страницу.

Для определения аудио-источника используется либо атрибут , либо тег . Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа аудио-контента используется атрибут ).

Текст между и отображается только в случае, когда браузер не поддерживает элемент .

В настоящее время поддерживается три формата аудио: , и .

Атрибуты:

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

Основные теги в HTML разметке

Рассмотрим три главных тега, которые содержит любой HTML документ:

<!DOCTYPE html> 

указывает тип существующего документа, в данном случае это HTML.

<html></html> — определяет границы HTML документа. Внутри него содержатся все теги, в том числе и основные парные <head></head> и <body></body>.

<body></body>

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

!DOCTYPE htmlhtmlhead<title>Название документа</title></head><body><h1>Главный заголовок страницы</h1><p>Отображаемый на странице в абзаце</p><body><html>

Классификация тегов

Всего тегов в HTML насчитывается более 90. Как правило, один тег воздействует только на часть документа, например, тег заголовка первого уровня <h1>…</h1>. В таких случаях используются парные теги: открывающий и закрывающий. Открывающий тег (например, <h1>) создает эффект, а закрывающий (</h1>) — прекращает его действие. Как видно из примера, закрывающий тэг всегда имеет вот такой символ () — прямой слеш. Такие теги называют парные.

Некоторые теги дают разовый эффект в месте своего появления. Например, тег горизонтальной полосы <HR> или тег отображения картинки <img>. Такие теги не имеют закрывающих тегов. Такие теги называют не парные.

Типы тегов

Кроме того теги подразделяют на несколько типов, которое различаются по выполняем функциям:

• теги верхнего уровня;
• теги заголовка документа;
• блочные элементы;
• строчные элементы;
• универсальные элементы;
• списки;
• таблицы;
• фреймы.

Это разделение не строгое, поэтому некоторые теги находятся в разных группах. Например, тэги для создания списков <ol> и <ul> относятся и к спискам, и к блочным элементам.

Nonbreaking Spaces

Suppose you want to use the phrase «12 Angry Men.» Here, you would not want a browser to split the «12, Angry» and «Men» across two lines −

An example of this technique appears in the movie "12 Angry Men."

In cases, where you do not want the client browser to break text, you should use a nonbreaking space entity &nbsp; instead of a normal space. For example, when coding the «12 Angry Men» in a paragraph, you should use something similar to the following code −

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

This will produce the following result −

Useful Video Courses

Video

19 Lectures
2 hours

More Detail

Video

16 Lectures
1.5 hours

More Detail

Video

18 Lectures
1.5 hours

More Detail

Video

57 Lectures
5.5 hours

More Detail

Video

54 Lectures
6 hours

More Detail

Video

Vector Graphics with SVG & HTML — Complete course + projects

Теги

Обычные теги. Теги оформляются строчными буквами. Давайте посмотрим на примерах.

Некорректно:

В примере выше теги div и Img прописаны с заглавных букв — такое написание не соответствует общим правилам, а читать код становится сложнее. Нужно опустить всё в нижний регистр.

Корректно:

Атрибуты. Это же правило распространяется на атрибуты тегов.

Некорректно:

Корректно:

Самозакрывающиеся теги. Есть два варианта написания самозакрывающихся тегов — тех, которые не нужно закрывать повторным тегом.

Оба варианта допустимы с точки зрения валидации, но в коде лучше придерживаться единообразия. Если вы выбрали вариант без слеша (/), то и другие теги в проекте нужно оформлять без него. Также стоит упомянуть, что вариант без слеша является более новым и убирает ненужный символ, поэтому многие выбирают его. Но если вы планируете использовать XML, то лучше использовать слеш.

Что такое PHP скрипт

PHP-скрипт — это обычный текстовый файлик с расширением .php. Точно такой же, как html и css.

Но есть одно важное отличие:

Скрипты запускаются только через http-запросы в браузере. Это значит, что для запуска скрипта script.php необходимо в адресной строке браузера написать site.ru/script.php

Если скрипт не работает — проверь текущий URL. Если там будет что-то вроде file:///D:/openserver/domains/site.ru/script.php — это значит, что ты пытаешься не перейти на страницу сайта, а открыть сам PHP файлик в браузере. Это неправильно.

Веб-серверы чаще всего настроены так, что при заходе на главную страницу (например site.ru) автоматически запускается файл index.php или index.html, лежащий в корне сайта.

Создай в корневой папке сайта файл с названием index.php и открой его в своём текстовом редакторе. При наличии файла index.html его нужно удалить.

Если у тебя пока нет текстового редактора — рекомендую лёгкий и бесплатный Notepad++, он гораздо удобней встроенного в Windows блокнота.

Обязательно следи за кодировкой скриптов. Кодировка должна быть либо UTF-8 без BOM (если такая доступна в твоём редакторе), либо просто UTF-8.

Выбор кодировки в Notepad++

Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
	
   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
	
</html>

This will produce the following result −

Теги форм

Теги для стилизации, семантические теги

Отступы

Начинающие разработчики часто забывают про отступы, без которых сложно отследить вложенность элементов. Разберём на примере.

Некорректно:

Можно ли тут сходу определить, какой тег в какой завёрнут? К сожалению, нет. Чтобы поправить нашу разметку, воспользуемся правилом: к каждому новому вложенному тегу добавлять ещё один отступ.

Корректно:

Отступ может быть равен двум или четырём пробелам — число пробелов в одном отступе можно настроить в среде разработки. Чаще всего для отступов используют два пробела, потому что так код получается более компактным. Чтобы поставить отступ, вы можете нажать нужное количество раз кнопку space (пробел) или же tab. 

Проверить себя поможет расширение indent-rainbow, которое будет подсвечивать отступы.

Теперь расскажем о правилах, которые не совсем относятся к кодстайлу, но являются хорошими практиками в HTML.

Заключение

Я думаю, вы поняли, что использовать семантические теги не так уж и сложно. Главное – понять, где их применять и зачем

Если подвести итог, можно определить два основных плюса:

1. Теги избавляют структуру от лишнего мусора в виде дополнительных атрибутов. Код становится проще и понятнее.
2. Теги помогают быстрее обрабатывать код поисковым роботам, вследствие чего у вашего сайта больше шансов попасть на первые страницы Google, Yandex и т.д.

На этом всё. Надеюсь, у вас появилось представление о том, зачем нужны семантические теги и как их использовать.

Узнать больше о новых элементах HTML5 можно тут:w3schools – предоставляет простое и ясное описание многих html-элементов и того, как/где их следует использовать.MDN – также предоставляет отличное описание всех элементов HTML + углубляется в каждый из них.