Большинство веб-страниц, которые вам встречаются, представлены в виде HTML-документов. HTML(Hyper Text Markup Language) — язык разметки, используемый всемирной паутиной. В этой статье я поделюсь с вами 20 лучшими советами, которые помогут вам сделать ваш HTML простым и правильным.
1. Всегда объявляйте Doctype
Объявление doctype — должно быть первой вещью, которую вы будете делать в своих HTML-страницах. Тип doctype говорит браузеру, какой из HTML стандартов вы используете и помогает ему прочитать и отобразить вашу веб-страницу максимально правильно.
Я советую вам использовать doctype XHTML 1.0 strict. Некоторые скажут, что это сомнительный выбор, потому что конкретно этот этот стандарт является более строгим, чем loose или transitional, но, с другой стороны, этот доктайп будет поддерживать соответствие вашего кода новейшим стандартам.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. Используйте осмысленные Title теги
Теги <title> говорят вашим пользователям, что за страницу они открыли и делают ваш сайт более дружественным к поисковым системам. Например, текст внутри тега <title> отображается на страницах выдачи Google, а так же в заголовке окна или вкладки браузеров ваших пользователей.
Возьмем следующий пример:
<title>Six Revisions - Web Development and Design Information</title>
Пример выше отображается в выдаче гугла, как показано на рисунке:
3. Используйте содержательные Meta теги
Meta теги помогают поисковым машинам лучше индексировать ваш сайт.
Meta атрибут Description
Атрибут description описывает в общих чертах содержимое страницы. Для каждой страницы вам следует указывать краткое релевантное описание внутрите мета-тега description.
Например, это описание:
<meta name="description" content="Six Revisions is a blog that shares useful information about web development and design, dedicated to people who build websites." />
Выводится SERP Google следующим образом:
Не пытайтесь забивать спамом ваше описание с помощью повторяющихся слов или фраз потому, что боты поисковых систем достаточно «умны», чтобы обнаружить это. Вместо этого, постарайтесь быть кратким и точным в описании назначения страницы.
Meta атрибут Keywords
<meta name="keywords" content="web design, web development" />
Meta атрибут keywords содержит список ключевых слов, относящихся к данной странице, разделенный запятыми. Эти ключевые слова помогают поисковикам еще более точно определить суть страницы.
Так же, как и с атрибутом description, избегайте повторения слов и фраз в этом теге. Просто перечислите несколько самых важных слов, относящихся к содержимому страницы.
4. Используйте теги <div>, чтобы обозначить основные части страницы
Попробуйте в самом начале создания документа разделить его на блоки, из которых состоит дизайн. Пример:
Это поможет вам правильно расставлять отступы и не захламлять разметку лишними тегами. Это особенно важно, когда вы верстаете сложную и объемную страницу.
5. Отделяйте содержимое от представления
Вш HTML — это ваше содержимое. CSS предоставляет информацию о том, как содержимое должно отображаться в браузере. Никогда не смешивайте их.
Не используйте атрибуты style в вашем HTML-документе. Всегда создавайте отдельный CSS файл для стилей. Это поможет вам и другим разработчикам, если вы работаете в команде, вносить изменения гораздо быстрее. К тому же, облегчит индексацию поисковиками.
Как не стоит делать: Использование атрибутов style непосредственно в HTML
Ниже вы увидите параграф текста, который оформлен с помощью атрибута style. Это сработает, но это далеко не самый лучший прием.
<p style="color:#abc; font-size:14px; font-family:arial,sans-serif;">Ненавижу отделять содержимое от представления</p>
6. Минимизируйте размер и количество CSS файлов
Обычный веб-сайт имеет 1 основной CSS файл и, возможно, несколько вспомогательных, вроде сброса стилей или css специфичных для конкретного браузера.
Но, чтобы их прочитать, браузеру требуется делать отдельный HTTP запрос на каждый файл. Это замедляет загрузку страницы.
Чтобы ускорить загрузку, можно убрать лишние символы(пробелы, табуляции, переводы строки) из файлов и попытаться объединить их в 1 файл.
Недостаток этого подхода в том, что такие файлы тяжело читать и редактировать в последствии. Поэтому каждый раз приходится восстанавливать исходную версию файла с форматированием, а потом заново повторять процесс минимизации.
Для облегчения этой процедуры можно воспользоваться собственными наработками или одним из CSS оптимизаторов
Не забывайте, что ссылки на CSS файлы следует помещать внутри <head></head> секции.
7. Минимизируйте размер и количество Javascript файлов. А так же вызывайте их внизу страницы
Как и в случае с CSS, следует избегать Javascript кода прямо в HTML-разметке страницы и стараться делать его как можно меньше.
Но, в отличие от стилей, браузеры не могут загружать несколько Javascript файлов одновременно, поэтому пользователю может показаться, что ваш сайт грузится медленно.
Выходом из этой ситуации может служить перенос всех тегов <script> в нижнюю часть страницы, как можно ближе к закрывающему тегу </body>
Пример
Примечание переводчика: На мой взгляд, перенос всех жаваскриптов в нижнюю часть страницы — весьма сомнительное решение, так как зачастую пользователю не стоит видеть необработанную скриптами разметку. Например, карусель у меня на главной, отключите скрипты в браузере и обновите страницу. Не очень красиво, правда 
Если перенести все скрипты в нижнюю часть, пользователь какое-то время будет видеть страницу именно такой.
8. Разумно используйте заголовки
Учитесь использовать теги <h1> — <h6> для определения иерархии вашего содержимого. Это сделает ваш сайт более понятным для людей с ограниченными возможностями(например, слепых, использующих дисплеи Брайля) и поисковых систем.
Пример
<h1>Это заголовок верхнего уровня</h1> <h2>Это подзаголовок расположенный ниже тега <h1>.</h2> <h3>Это еще один подзаголовок третьего уровня, он расположен ниже <h2>.</h3>
Для блогов я рекомендую использовать тег <h1> в заголовках постов, а не в названии сайта, так как это самая важная часть страницы блога, с точки зрения поисковых систем.
Пример кода для WordPress
<h1 class="entry-title"><?php the_title(); ?></h1>
9. Используйте HTML-теги по назначению
Изучите все доступные в HTML элементы и правидьно их используйте, чтобы создать семантичную и осмысленную структуру содержимого.
Используйте <em> для акцентирования и <strong> for сильного акцентирования, вместо устаревших <i> или <b>.
Пример
<em>важная часть текста</em> <strong>очень важная часть</strong>
Используйте <p> для разбиения текста на параграфы. Не используйте <br /> для добавления пустой строки между параграфами. Вместо этого используйте CSS-свойства padding и/или margin.
Для набора схожих элементов можно использовать:
<ul>(unordered lists) — неупорядоченные списки<ol>(ordered lists) упорядоченные списки<dl>(definition lists) пары элемент/описание
Не используйте <blockquote>, чтобы создать отступы в тексте, используйте этот тег только для обозначения цитат.
10. Не используйте одни только дивы
Некоторые верстальщики оборачивают <div>, содержащий несколько вложенных дивов еще одним дивом, создавая гору спрошных дивов.
В соответствии с последним черновиком спецификаций HTML от W3C, элемент <div> — это не имеющий смысловой нагрузки тек, который должен использоваться только в случае, если все другие доступные элементы не подходят.
Но многие верстальщики используют этот тег абсолюто для всего, вплоть до списков и отображения строчных элементов, как блочных, вместо того, чтобы использовать display:block; в CSS.
Подобных практик стоит избегать умеренно используя различные HTML-теги и CSS-свойства по их назначению.
11. Используйте неупорядоченные списки (<ul>) для создания навигации
Навигация — важная часть любого сайта. Тег <ul> в содружестве с CSS как нельзя кстати подходит для семантичной и внешне привлекательной верстки этой части страницы(ведь навигационное меню является именно списком ссылок).
К тому же, использование тега <ul> является устоявшимся соглашением.
Пример неупорядоченного списка
<ul id="main_nav"> <li><a href="#" class="active">Главная</a></li> <li><a href="#">Обо мне</a></li> <li><a href="#">Портфолио</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Блог</a></li> <li><a href="#">Контакты</a></li> </ul>
Пример CSS для оформления списка в горизонтальное меню навигации
#main_nav { position:absolute; right:30px; top:40px;}
#main_nav li { float:left; margin-left:2px; }
#main_nav li a{ font-size:16px; color:#fff; text-decoration:none; padding:8px 15px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;}
#main_nav li a.active,
#main_nav li a:hover{ background-color:#0b86cb; }
А так это выглядит в браузере
12. Закрывайте теги
В соответствии со спецификацией W3C, все парные теги обязательно должны иметь закрывающий тег. Некоторые браузеры могут корректно отображать сайи и без этого, но такая страница никогда не пройдет валидацию.
Пример
<div id="test"> <img src="images/sample.jpg" alt="sample" /> <a href="#" title="test">test</a> <p>some sample text </p> </div>
13. Используйте нижний регистр в тегах
Нижний регистр в HTML-тегах уже стал индустриальным стандартом. Верхний регистр тоже работает и, скорее всего, не повлияет на вид страницы в разных браузерах, но такой код неудобно читать
Неправильно
<DIV> <IMG SRC="images/sample.jpg" alt="sample"/> <A HREF="#" TITLE="TEST">test</A> <P>some sample text</P> </DIV>
Правильно
<div id="test"> <img src="images/sample.jpg" alt="sample" /> <a href="#" title="test">test</a> <p>some sample text </p> </div>
14. Указывайте атрибуты Alt для изображений
Использование осмысленных атрибутов alt в изображениях является залогом валидного и семантичного HTML.
Плохо
<img id="logo" src="images/bgr_logo.png"/>
<!-- атрибут alt есть, но из него непонятно, что это за изображение --> <img id="logo" src="images/bgr_logo.png" alt="brg_logo.png" />
Хорошо
<img id="logo" src="images/bgr_logo.png" alt="Six Revisions Logo" />
15. Пишите атрибуты Title для ссылок (Если это необходимо)
Использование атрибута title в элементах <a> повышает доступность и удобность сайта, если использовать их с умом.
Важно помнить, что этот атрибут используется для уточнения текста указанного непосредственно в самом теге <a>.
Плохо
<!-- Атрибут повторяет текст ссылки --> <a href="http://blog.com/all-articles" title="Жми сюда.">Жми сюда.</a>
Когда устройство воспроизводит содержимое вашей страницы звуком, слушатель вынужден будет слушать 2 раза один и тот же текст, что еще хуже, чем если бы текста не было вовсе.
Если вы собираетесь указывать в title тот же текст, что и в ссылке, или не можете кратко описать страницу, на которую ведет ссылка, лучше не используйте этот атрибут вообще.
Хорошо
<a href="http://blog.com/all-articles" title="Перейти к списку статей.">Жми сюда.</a>
16. Используйте теги Fieldset и Label в формах
Используйте элемент <label>, чтобы пометить поля ввода. Разделяйте поля ввода на логические блоки с помощью <fieldset>. Давайте имена блокам <fieldset> с помощью тега <legend>. Все это сделает ваши формы более понятными для конечных пользователей и улучшит качество кода.
Пример
<fieldset> <legend>Личные данные</legend> <label for="name">Имя</label><input type="text" id="name" name="name" /> <label for="email">Электронная почта</label><input type="text" id="email" name="email" /> <label for="subject">Тема</label><input type="text" id="subject" name="subject" /> <label for="message" >Сообщение</label><textarea rows="10" cols="20" id="message" name="message" ></textarea> </fieldset>
17. Используйте условные комментарии
Вы можете использовать условные комментарии, чтобы исправить отображение страницы в определенных версиях Internet Explorer, если необходимо.
Пример для IE 7
<!--[if IE 7]> <link rel="stylesheet" href="css/ie-7.css" media="all"> <![endif]-->
Пример для IE 6
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie-6.css" media="all">
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#logo');
</script>
<![endif]-->
Старайтесь группировать подобные исправления, чтобы в будущем, когда можно будет отказаться от поддержки старых версий, вы могли просто удалить одну строку в 1 месте.
Кстати, для решения проблемы с прозрачными PNG в IE6 я рекомендую спользовать DD_belated PNG.
Примечание переводчика: Я тоже Хотя, если вы не больны «валидацыей» всего и вся, в большинстве случаев будет достаточно просто filter.
18.Валидируйте код
Валидность не должна быть мерилом качества работы. Только потому, что ваша верстка проходит валидацию, она еще не является хорошей. И наоборот, если валидатор находит ошибки, это еще не значит, что верстал школьник (если хотите убедиться, попробуйте провалидировать страницы Google или Yahoo!).
Но автоматические инструменты, вроде бесплатного валидатора от W3C, могут стать незаменимыми помощниками в поиске причин некорректного отображения страницы.
Пока пишете HTML, уделяйте время на запуск валидатора на различных стадиях, это убережет вас от поиска ошибок в разросшемся документе, когда вы уже закончили.
19. Правильно форматируйте код
Чистый отформатированный код не только показывает вас, как профессионала, но и демонстрирует вашу заботу о других специалистах, которые, возможно, будут работать с ним.
Всегда форматируйте свои html,css и js файлы. Так вашу работу будет легче читать и вам, и вашим коллегам.
20. Избегайте избыточного комментирования
Документирование кода облегчает понимание логики приложения в таких языках, как PHP, Java или C#.
Но хорошая HTML-разметка и так говорит сама за себя и не нуждается в документировании. Если вы видите, что очень много частей документа нуждаются в комментариях, проверьте, соответствует ли ваш код принципам семантичной верстки, а классы и id имеют осмысленные названия.
Это вольный перевод статьи опубликованной на Six Revisions. Как некоторые успели убедиться, мануалописатель из меня никакой так как я не могу разжевывать всякую ерунду. Попробую периодически публиковать переводы интересных мануалов, разжеванных другими авторами. Мож англицкий подучу заодно.
<ul>
да здравствует копипаст!