На что похож чистый HTML-код?

За написание этой статьи хочу сказать «спасибо» одному замечательночу человеку из мира Joomla. Звать его Beliyadmin. Как-то в разговоре обсуждали мой очередной сайт (верстку), короче, искали баги. В какой-то момент вспомнили о валидности HTML-кода.

Ведь действительно, если глянуть на многие исходные коды страниц — становится очень страшно. Код HTML бывает такой страшный!

Не зря умные люди придумали CSS для удобства и вообще для упрощении множества процедур, особенно при создании сайтов, да хотя бы простых статей при наполнении тех же сайтов.

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

DOCTYPE

Выглядит немного страшно, но DOCTYPE очень важен. Тип не только позволяет пройти коду страницы валидацию, но также указывает браузеру, как рендерить вашу страницу. Рекомендуем использовать:

<!doctype html>

Заголовок страницы <head>

Здесь обязательно надо указывать тег <Title>с указанием названия страницы. Также в <head> указывается исходная кодировка, подключаемые стили CSS, также подключаемые скрипты. Скрипты и CSS находятся в соответствующих папках. Так же указывем OpenGraph разметку и, конечно, не забываем про viewport:

<head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
    <meta name="description" content="Краткое описание страницы">
    <meta name="title" content="Заголовок страницы">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> /* Отвечает за адаптивную верстку */
    <link rel="shortcut icon" href="/favicon.ico">
    <meta property="og:type" content="website">
    <meta property="og:url" content="ссылка">
    <meta property="og:locale" content="ru">
    <meta property="og:locale" content="ru">
    <meta property="og:description" content="Краткое описание страницы">
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:title" content="Заголовок страницы">
    <meta property="og:title" content="Заголовок страницы">
    <link href="/css/app.css" rel="stylesheet">
</head>

Классифицируем <body>

Использование class для тела сайта позволяет использовать уникальные шаблоны и стили для каждой страницы, если, конечно, используете постраничную верстку. Например, вы можете задать для каждого class свое оформление заголовков h2 с использованием дочерних селекторов: .page1 h2 .page2 #two h2.

Семантически чистое меню

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

<ul id="menu" class="b__menu">
   <li class="active"><span>Главная</span></li>
   <li><a href="about.php">О нас</a></li>
   <li><a href="contact.php">Контакты</a></li>
</ul> 

Главный блок DIV для содержимого страницы

Использование блока DIV для содержимого даст вам неограниченные возможности по управлению страницей, особенно это касается «эластичных» страниц. Также можно для блока задать минимальную ширину.

.wrapper {
    max-width : 1280px;
    margin: 0 auto
}

Важный контент должен быть первым

Будет лучше, если ваш важный контент, с чтоки зрения SEO, такой как новости или приглашения, будет опубликован первым. Если правая или левая колонки содержат в себе навигацию (например, меню), то лучше сделать его как можно ниже в DOM.

Подключение активного содержимого

A это было первым, что я сделал, когда создал первый сайт при помощи PHP. Я разбил сайт на 4 логические части, и каждая подгружалась при помощи команды include. Лучше всего будет, если вы подгружаете отдельно верхнее меню, боковые и футер. В таком случае вам будет проще управлять содержимым.

Закрытые теги

Открыли strong, закрыли strong. Не будьте ленивыми, закрывайте теги, иначе у вас могут возникнуть проблемы с валидностью, да и просто ошибки при отображении в браузерах.

Иерархия заголовков

Не забываем, что на странице может быть только один заголовок H1. А под ним H2 и H3. Применимо только для страницы материала/карточки товара.

Содержимое, содержимое, содержимое

Это понимают все, надеюсь. Без содержимого сайт — просто пустышка, который стыдно показывать. Текст не забываем оформлять параграфами <p>. Использование переноса <br/> приводит к схлопыванию форматирования. Не всегда красиво. Также на забываем про отступ слева первой строки для красной строки или отступ снизу у параграфа.

Нет стилям в HTML

В коде страницы не должно быть никакого форматирования, особенно такого как <font>. Держите ваши стили в CSS файлах, и будет вам счастье.

Проверяем сайт в валидаторе.

Есть бесплатный сервис validator.w3.org — проверяем HTML и исправляем ошибки кода. CSS проверять CSS не стоит, так как много не проходят кроссбраузерные стили.

Не испольузем заголовки hX в названиях блоков.

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

<div class="block">
    <h3>Название блока</h3>
    <div>Содержимое</div>
</div>

Правильно:

<div class="block">
    <div class="title">Название блока.</div>
    <div>Содержимое</div>
</div>
Начать проект вместе с нами
Заполните форму и отправьте
нам сообщение!
Если у Вас возникли вопросы, предложения, либо Вы желаете оформить заявку на заказ услуги — Добро пожаловать!
Телефоны и мессенджеры:
Москва: +7 (499) 389-42-40
Санкт-Петербург: +7 (812) 456-72-40