Как писать на html: зачем нужен, какие у него возможности и что такое HTML5 / Skillbox Media
Содержание
HTML — правила оформления кода
HTML — правила оформления кода
1. Синтаксис
1.1 Два пробела в качестве отступа
Отступы позволяют визуально оценить структуру документа и быстро переключаться между его фрагментами. Размер отступа настраивается в редакторе. Также во многих редакторах можно включить отображение пробельных символов и преобразовать отступы.
Хорошо
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Ваша страница</title>
</head>
<body>
<h2>Страница</h2>
<p>Текст</p>
</body>
</html>Плохо
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<title>Ваша страница</title>
</head>
<body>
<h2>Страница</h2>
<p>Текст</p>
</body>
</html>1.2 Теги и атрибуты записываются в нижнем регистре
Символы нижнего регистра не привлекают к себе большого внимания, и вам легче будет найти нужный.
Хорошо
<div> <img src="./i/userpic.png" title="Иванов Иван"> <a href="/profile/">Перейти в профиль</a> </div>
Плохо
<DIV> <Img Src="./i/userpic.png" titLE="Иванов Иван"> <A href="/profile/">Перейти в профиль</a> </DIV>
1.3 Отдельные логические блоки отбиваются пустой строкой
Это облегчает работу с кодом и визуально создает структуру документа.
Хорошо
<h2>Заголовок первого уровня</h2> <p>Первый параграф</p> <h3>Заголовок второго уровня</h3> <ul> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <h4>Заголовок третьего уровня</h4> <figure> <figcaption>Блок с картинкой</figcaption> <img src="../img/image.jpg"> </figure>
Плохо
<h2>Заголовок первого уровня</h2> <p>Первый параграф</p> <h3>Заголовок второго уровня</h3> <ul> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <h4>Заголовок третьего уровня</h4> <figure> <figcaption>Блок с картинкой</figcaption> <img src="../img/image.jpg"> </figure>
./img/image.jpg">
</figure>1.4 Используйте только двойные кавычки
При написании значений атрибутов используйте только двойные кавычки.
Хорошо
<div> <img src="first-img.jpg" alt="Первая картинка"> </div>
Плохо
<div> <img src='first-img.jpg' alt='Первая картинка'> </div>
1.5 Не ставим пробелов перед и после символа =
Поскольку правая часть непосредственно относится к левой, то атрибут и его значение должны быть написаны без пробелов.
Хорошо
<p>Это хороший пример</p>
Плохо
<p id ="first" class= "post">Это плохой пример</p>
1.6 Между атрибутами один пробел
Не используем переносов строк между атрибутами, только один пробел. Перенос строк принят в css-документах, но не в html-разметке. Пишите все атрибуты элемента в строку.
Хорошо
<figure> <img src="logo.
jpg" alt="Логотип">
<figcaption>Логотип компании</figcaption>
</figure>Плохо
<figure> <img src="logo.jpg" alt="Логотип"> <figcaption>Логотип компании</figcaption> </figure>
2. Валидность
Html-документ должен проходить проверку на валидность. Для проверки используйте валидатор.
3. !DOCTYPE
Первой строчкой в HTML-документе должен идти актуальный doctype. Это необходимо чтобы браузер верно отображал страницу. Это обеспечит единообразное отображение во всех современных браузерах.
<!DOCTYPE html> <html lang="ru"> <head>…</head> <body>…</body> </html>
4. Кодировка
Кодировка символов в html-документе всегда должна быть указана явно. Это обеспечит верное отображение текста. Кодировка utf-8 подходит всегда, за редким исключением.
<head> <meta charset="utf-8"> <title>Заголовок</title> </head>
5.
Подключение стилей
Файлы со стилями подключаются внутри тега <head> при помощи <link>. Атрибут type для тега <link> указывать не нужно, так как значение text/css устанавливается по умолчанию.
Хорошо: стилевой файл подключён в секции head
<!DOCTYPE html>
<html lang="ru">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>…</body>
</html>Плохо: стилевой файл подключён в секции body
<!DOCTYPE html>
<html lang="ru">
<head>…</head>
<body>
<link rel="stylesheet" href="style.css">
</body>
</html>6. Подключение скриптов
Скрипты при загрузке блокируют отображение содержимого страницы. По этой причине следует подключать их в самом конце html-документа.
При подключении скриптов в теге <script> атрибут type указывать не нужно, так как значение text/javascript устанавливается по умолчанию.
Хорошо: скрипт подключается перед </body>
<!DOCTYPE html>
<html lang="ru">
<head>…</head>
<body>
<!-- Содержимое страницы -->
<script src="app.js"></script>
</body>
</html> Плохо: скрипт подключается в секции <head>
<!DOCTYPE html>
<html lang="ru">
<head>
<script src="app.js"></script>
</head>
<body>…</body>
</html>7. Атрибуты и их порядок
У HTML-элементов атрибут class пишется первым. Единообразное написание помогает легче считывать код и по классам быстрее разбираться в назначении блоков.
Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для схожих элементов.
<a href="/" data-name="element">Ссылка</a> <input type="text" name="test"> <img src="img.jpg" alt="Картинка">
8.
Логические атрибуты
Для логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.
<!-- checked="checked" необязательно --> <input type="checkbox" required checked> <input type="text" disabled> <select> <option value="1" selected>1</option> </select>
9. Подписи
input
Для улучшения опыта пользователя, при нажатии на подпись поля, само поле должно активироваться. Для этого поле формы связывается с описанием при помощи идентификатора и атрибута for тега <label>.
Хорошо: элемент формы radio связан с подписью через id и for
<input type="radio"> <label for="choose">Радио кнопка</label>
Хорошо: элемент формы radio и подпись обёрнуты в label
<label> <input type="radio"> Радио кнопка </label>
Плохо: подпись не связана с элементом формы
<input type="radio"> Радио кнопка
10.
Атрибут языка
Для элемента <html> в атрибуте lang должен указываться верный язык документа. Это помогает системам перевода определить, какие использовать языковые правила.
<!DOCTYPE html> <html lang="ru"> <head>…</head> <body>…</body> </html>
Давайте писать HTML-код, как профессионалы
Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Подписаться
×
Перевод статьи
«Let’s write HTML like a pro».
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>
</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> <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 😥?</title> <meta charset="utf-8"> </head>
Приведенный выше пример кода невалиден,
название отобразится неверным образом.
Декларировать кодировку нужно выше.
<head> <meta charset="utf-8"> <title>This is a super duper cool title, right 😃?</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 и не используйте
встроенные стили. Это поможет как
разработчикам, которые будут работать
с кодом в дальнейшем, так и браузерам.
Заключение
Конечно, это лишь верхушка айсберга
— просто несколько вещей, которые
следует иметь в виду при написании
разметки. Чтобы познакомиться с этой
темой подробнее, можно обратиться к
следующим источникам (среди прочих):
- HTML
best practices on GitHub - W3C
school HTML style guide
Запишется так —