Лучшие практики HTML: как правильно писать HTML код

Поэтому так важно придерживаться правильных методов написания кода. Если этого не делать, то посетители вашего сайта получат плохой пользовательский опыт.

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

В данной статье мы поговорим о лучших практиках HTML. Давайте начнем.

Лучшие практики HTML – это набор правил, помогающих создавать сайты, одинаково удобные для чтения и сопровождения.

При создании сайта на HTML необходимо придерживаться следующих принципов:

Используйте только один элемент <h1> для страницы

В HTML доступно 6 различных тегов заголовков – от <h1> до <h6>. Тегом <h1> отмечается основной заголовок (название веб-страницы), а тег <h6> используется для наименее важного заголовка.

Тег <h1> крупнее <h2>, <h2> крупнее <h3> и так до тега <h6>. Размер каждого заголовка уменьшается по степени его важности.

Очень важно не добавлять более одного элемента <h1> на странице.

Не делайте так:

<main>
<div>
<h1>Писать код – это весело?</h1>
<p>Чем больше вы пишете, тем опытнее становитесь</p>
</div>
<div>
<h1>Писать код – это весело</h1>
<p>Лучше писать код с удовольствием</p>
</div>
</main>

В примере выше мы используем тег <h1> в первом и втором блоке <div>. Такой код, конечно же, заработает, но это не самый правильный вариант оформления.

Лучше вот так:

<main>
<div>
<h1>Писать код – это весело?</h1>
<p>Чем больше вы пишете, тем опытнее становитесь</p>
</div>
<div>
<h2>Писать код – это весело</h2>
<p>Лучше писать код с удовольствием</p>
</div>
</main>

Кроме того, наличие одного элемента <h1> на странице – крайне важно для поисковой оптимизации (SEO). Через этот тег поисковики понимают, что находится на странице (главная мысль страницы).

Не забывайте про иерархию заголовков в HTML

Когда вы пользуетесь тегами заголовков, важно следовать установленной иерархии: после <h1> идет <h2>, за <h3> следует <h4> и т.д...

Не перескакивайте от <h1> к <h3>. Некоторые посетители сайта используют средства чтения с экрана. И таким пользователям бывает трудно понять содержимое вашей страницы при нарушенной иерархии элементов.

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

Не делайте так:

<h1>Писать код – это весело</h1>
<h3>Лучше писать код с удовольствием</h3>
<h5>Постоянство – это ключ</h5> 

Лучше вот так:

<h1>Писать код – это весело?</h1>
<h2>Чем больше вы пишете, тем опытнее становитесь</h2>
<h3>Писать код – это весело</h3>  

Добавляйте подписи к изображениям через элемент figure

Добавлять подписи к изображениям рекомендуется через элемент <figure>. А чтобы все заработало, нужно прописать не только <figure>, но и <figcaption>.

Не делайте так:

<div>
<img src=“a-man-coding.jpg” alt=“Мужчина за компьютером”>
<p>Это изображение мужчины, который работает за компьютером</p>
</div>

С точки зрения кода, пример выше написан хорошо. Но лучше сделать все иначе. Если изображение не загрузилось, отображается содержимое alt, и на экране показывается текст из элемента <p>. Но посетитель, использующий средства чтения с экрана, не сможет отличить тексты в <p> и alt.

Помните: даже если ваш код работает, это еще не значит, что вы делаете все правильно.

Лучше сделать вот так:

<figure>
<img src=“a-man-coding.jpg” alt=“ Мужчина за компьютером”>
<figcaption>Это изображение мужчины, который работает за компьютером</figcaption>
</figure>

Пример выше – отличный способ, как можно добавить подписи к изображениям.

Почему важно добавлять подписи к изображениям именно так:

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

Не используйте div для шапки и подвала; для этого подходят семантические элементы

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

Откажитесь от <div> в пользу семантики. Не используйте <div> для обозначения шапки и подвала страницы. Для этих целей есть семантические элементы <header> и <footer>.

Элемент <header> показывает навигацию или вводную часть страницы.

В элементе <footer> размещается информация об авторских правах или ссылки для перехода на страницы.

Не делайте так:

<div class="header">
<a href="index.html">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</div>
<div class="footer">
<a href="index.html">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</div>

В примере выше тег <div> используется в качестве контейнера для <header> и <footer>. Такой код будет работать, но это не самый правильный способ реализации.

Лучше вот так:

<header>
<h1></h1>
</header>
<footer>
<a href="index.html">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</footer>

Лучше всего добавлять <footer> и <header> на страницу именно так.

Почему важно добавлять <footer> и <header> с помощью семантических элементов HTML:

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

Не используйте <b> и <i> для выделения текста на странице

Теги <b> и <i> выделяют текст жирным шрифтом (b) или курсивом (i). Но не стоит ими пользоваться на сайте, поскольку оба тега не несут семантической нагрузки. Для выделения текста лучше подходит свойство CSS font-weight, либо теги <strong> и <em>.

Тегом <strong> отмечают важный текст на странице. Он выделяет текст или делает его жирным. Тег <em> подчеркивает текст или добавляет курсив (точно также, как <i>).

Не делайте так:

<p><i>Пишите код в своем собственном темпе</i><p>
<p><b>пишите код в своем собственном темпе </b><p>   

В этом примере текст выделяется жирным и курсивом. Но пользователи со средствами для чтения с экрана не заметят разницы. Данные теги не несут семантического значения.

Спецификация HTML 5 рекомендует нам использовать теги <b> и <i> только в самых крайних случаях и при отсутствие альтернативных вариантов.

Лучше делайте так:

<p><strong>Пишите код в своем собственном темпе</strong><p>
<p><em>пишите код в своем собственном темпе</em><p> 

Не используйте блочные элементы внутри строчных

Блочные элементы начинают новую строку на странице. По умолчанию действие этих элементов распространяется на всю строку – от ее начала до конца. Вы не сможете добавить строчные элементы внутри блочных без CSS.

К блочным элементам относятся <p>, <h1> – <h6> и <div>.

Строчные элементы действуют на небольшую часть страницы. Они не начинаются с новой строки.

К строчным элементам относятся <span>, <em> и <a>.

Вы не можете добавить блочные элементы внутри строчных.

Не делайте так:

<a href="#" >
<p>Посетите merion</p>
</a>

У вас не получится добавить <p> внутрь элемента <a>, поскольку <p> относится к блочным элементам, а <a> – к строчным.

Лучше сделать так:

<p>
Посетите <a href="wiki.merionet.ru" target="_blank">Merion</a>
для изучения IT
</p>   

Это отличный пример того, как можно вложить строчные элементы внутри блочных.

Важно помнить, что:

• Блочный элемент нельзя вложить внутри строчного.
• Строчный элемент можно вложить внутри блочного.
• Строчный и блочный элемент можно вложить внутри блочного.

Небольшое уточнение: «вложить» что-то в данном случае означает «добавить внутрь». Так что, говоря «это нельзя вложить», я имею ввиду, что вы не сможете добавить один такой элемент внутрь другого.

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

Кроме того, CSS позволяет преобразовать блочные элементы в строчные. Для этого используется display: inline-block и display: inline.

А еще важно помнить простую истину: даже если ваш код работает, это еще не значит, что вы делаете все правильно.

Именно поэтому я всегда рекомендую пользоваться валидатором разметки W3C и дополнительно проверять свой код.

Этот валидатор отслеживает правильность разметки веб-документов в HTML, XHTML, SMIL, MathML и т.д.

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

Заключение

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