ћерион Ќетворкс

ќсновой любого сайта €вл€етс€ 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. ћы постарались включить в нее самые полезные советы, которыми можно начинать пользоватьс€ уже сегодн€.


—кидки 50% в Merion Academy

¬ыбрать курс