Что делает код HTML красивым? Вот небольшой список того, что говорит о мастерстве кодера:
- Объявлен Doctype. Для правильного отображения браузерами вашей страницы.
- Аккуратная секция head. Прописаны метатеги, присутствует
title
, объявлена кодировка, добавлен файл со стилями, включая версию для печати (желательно для других устройств тоже). Внешние файлы (стили и скрипты) имеют отдельные папки «css» и «scripts». - Тегу body прописан id. Позволяет создавать стили применительно к отдельной странице.
- Семантическое меню. Для меню используются неупорядоченные списки.
- Основной внешний div. Обернув все содержимое на
каждой странице в один
div
позволит легко контролировать ширину страницы. - Div вместо table. Вместо таблиц используются
div
, таблицы используются для представления табличных данных. Присутствуют такие свойсива как caption, th и т.д. - Используются семантические элементы и атрибуты по их прямому назначению.
- Семантические class и id. Используются семантически-правильные
названия классов и значения
id
(напримерid=”news-box”
, а неid=”left-green-block”
). - В начале основное содержимое. Наиболее важная информация (новости, события) находится на первом месте в HTML.
- Подключаемые повторяющиеся элементы. Элементы повторяющиеся на каждой странице, подгружаются автоматически, например с помощью PHP.
- Читабельный код. Код состоит из нескольких секций и имеет вложенную структуру.
- У тегов img проставлены атрибуты
alt
иtitle
. - Никаких инлайновых стилей. HTML сфокусирован на структуре и содержимом, а не на оформлении! Все стили прописаны отдельно.
- Оптимальный HTML. HTML имеет оптимальный размер и не перегружен лишним кодом.