Давайте писать HTML-код, как профессионалы

0
726
views

Перевод статьи «Let’s write HTML like a pro».

HTML-код
Photo by Goran Ivos on Unsplash

HTML напоминает ребенка, с которым никто не играет, потому что JavaScript и CSS отвлекают внимание на себя. Сегодня мы рассмотрим несколько вещей, способных помочь вернуть этого «ребенка» в центр внимания.

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

DOCTYPE

Начнем с самого верха вашего index.html. Обязательно декларируйте DOCTYPE. Это активирует стандартный режим во всех браузерах и уведомляет их о том, как следует интерпретировать этот документ. Имейте в виду, что DOCTYPE не является элементом HTML.

В HTML5 это выглядит следующим образом:

<!DOCTYPE html>

Примечание: если вы используете фреймворк, эта часть будет заполнена без вашего участия. В противном случае я настоятельно рекомендую использовать сниппеты вроде Emmet, доступные в VS Code.

Хотите узнать побольше о других типах документов? Можете почитать об этом здесь.

Опциональные теги

Некоторые теги в HTML5 опциональны, главным образом потому, что элемент присутствует неявным образом. Это может показаться странным, но вы вполне можете пропустить тег <html>, и страница все равно прекрасно отобразится.

<!DOCTYPE HTML>

  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Welcome to this example.</p>
  </body>
</html>

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

<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->

  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Welcome to this example.</p>
  </body>
</html>

Этот код невалиден, потому что комментарий оказывается вне тега <html>.

Закрывающие теги

Теги всегда следует закрывать, поскольку в некоторых браузерах могут возникнуть проблемы с отображением вашей страницы. Закрытие тегов улучшает читаемость кода, а также имеет большое значение по другим причинам, о которых мы поговорим немного позже.

<div id="example">
  <img src="example.jpg" alt="example" />
  <a href="#" title="test">example</a>
  <p>example</p>
</div>

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

В следующих элементах самозакрывающиеся теги валидны, но не обязательны:

<br>, <hr>, <img>, <input>, <link>, <meta>, <area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>

Примечание: обычные теги не могут быть самозакрывающимися.

<title />

Это неправильное написание.

Charset

Заранее определяйте кодировку своего документа. Хороший тон — поместить эту информацию в самом верху, внутри элемента <head>.

<head>
  <title>This is a super duper cool title, right &#x1f625;?</title>
  <meta charset="utf-8">
</head>

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

<head>
  <meta charset="utf-8">
  <title>This is a super duper cool title, right &#x1f603;?</title>  
</head>

Язык

Еще одна причина не пропускать опциональные теги — использование атрибутов. Не отказываясь от тега <html>, вы можете (и это рекомендуется) определить язык вашей веб-страницы. Это очень важно с точки зрения доступности и поиска.

<html lang="fr-CA">
  ...
</html>

Тег title

Никогда не пропускайте тег <title>. Это очень ухудшает доступность. Кроме того, я бы не пользовался сайтом, где не используется этот тег. Если открыть страницу такого сайта, то 2 минуты и 20 вкладок спустя вы ее уже не найдете (вкладке будет нечего вам показать).

Тег base

Очень полезный тег, но пользоваться им нужно с известной осторожностью. Он устанавливает базовый URL для приложения. После его установки все ссылки будут формироваться относительно него, а это может привести к нежелательному поведению:

<base href="http://www.example.com/" />

Если в вашем приложении установлен базовый URL, как в примере выше, то href=»#internal» будет интерпретироваться как href=»http://www.example.com/#internal«.

Но при этом href=»example.org» будет интерпретироваться как href=»http://www.example.com/example.org«.

Description

Этот мета тег очень полезен, хотя и не является неотъемлемой частью лучших подходов. Он имеет огромное значение для поисковиков, когда они исследуют ваш сайт.

<meta name="description" content="HTML best practices">

Семантические теги

Хотя вы можете обойтись одними div-ами, это еще не значит, что так нужно делать. Семантический HTML наполняет вашу страницу смыслом. Такие теги как p, section, h{1-6}, main, nav являются семантическими. Если вы используете тег <p>, пользователи будут знать, что это абзац текста, а браузеры будут понимать, как его следует отображать.

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

Не используйте hr для форматирования

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

<p>Абзац о щенках.</p>
<p>Абзац о любимой еде щенков.</p>
<p>Абзац о породах щенков.</p>
<hr>
<p>Абзац о том, почему я брею голову.</p>

Будьте осторожны, используя атрибут title

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

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

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

Одинарные и парные кавычки

Во многих кодовых базах в разметке используются оба вида кавычек одновременно. Это не хорошо, особенно если в вашем фреймворке используются одинарные кавычки или если вы работаете без фреймворка, но используете кавычки в тексте. И, кроме того, нужно просто быть последовательным в написании кода. Не делайте так:

<img alt="super funny meme" src='/img/meme.jpg'>

Делайте так:

<img alt="super funny meme" src="/img/meme.jpg">

Опускайте булевы значения

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

<audio autoplay="autoplay" src="podcast.mp3">
<!-- лучше так -->
<audio autoplay src="podcast.mp3">

Опускайте атрибут type

Не нужно добавлять атрибут type в теги script и style. В некоторых сервисах, например, в W3C Validator, вы получите ошибку валидации при проверке вашего кода.

Проверяйте вашу разметку

Используйте для проверки разметки специальные сервисы, к примеру, тот же валидатор от W3C. Это позволит вам быть уверенным, что ваша разметка валидна.

Скажите «нет» встроенным стилям

В HTML-файле пишется контент. То, как он выглядит, это уже представление. Оставьте представление CSS и не используйте встроенные стили. Это поможет как разработчикам, которые будут работать с кодом в дальнейшем, так и браузерам.

Заключение

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

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here