Ошибки html верстки

Время на прочтение
4 мин

Количество просмотров 43K

Ошибки и советы я написал по-своему опыту. Если найдутся ошибки типа «вредных советов», то буду рад услышать конструктивную критику. Пост предназначен для начинающих изучать HTML и CSS, но, возможно, специалистам тоже будет интересно ознакомиться с данным материалом.

1. W3C Validator

Рекомендуется проверять HTML и CSS сайта через сервис validator.w3.org. Данный сервис просканирует код и отобразит ошибки, например:

• не закрыт тег;
• не рекомендованные символы в ссылках;
• используется не рекомендованный тег;
• не указан обязательный атрибут;
• и другое.

2. Вёрстка в формате UTF-8

При вёрстке страницы, надо убедиться, что кодировка файла установлена в UTF-8 (без BOM). Каждый текстовый редактор устанавливает кодировку по-своему.

Файл в формате UTF-8 позволяет использовать нестандартные символы (например, символы различных языков, знак валюты и другие).

Также надо сообщить браузерам, что страница открывается в кодировке UTF-8. Это делается через тег ниже:

<meta charset="utf-8">

3. Одинаковые id у нескольких элементов

Значение атрибута id в HTML-коде не должно повторяться.

<!-- не правильно -->
<div id="block"></div>
<div id="block"></div>

<!-- правильно -->
<div id="block-1"></div>
<div id="block-2"></div>

4. Спрайты

Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.

Пример спрайта

Пример на JSFiddle

Сейчас также популярно вместо спрайтов использовать шрифты с иконками. Т.е. вместо букв выводятся иконки шестерёнки, смайлика и других иконок. В качестве примера можно привести иконки glyphicons, которые используются в Twitter Bootstrap.

Преимущества шрифтов к спрайтам, это сохранение качества при изменении размера иконок и меньший размер. Но недостаток, нельзя использовать больше одного цвета в иконке.

5. Много селекторов

Не рекомендуется использовать больше трёх селекторов, т.к. это влияет на производительность сайта.

/* не рекомендуется, большая вложенность */
.page .item .title a {}

/* можно сократить */
.page .item a {}

Браузеры читают CSS справа налево. Т.е. в коде выше, сначала будут выбраны все ссылки, что есть на странице, а потом будут выбраны те ссылки, которые находятся внутри элемента .item.

Если есть возможность, то выборку рекомендуется сокращать до одного селектора:

/* рекомендуется */
.form-submit a {}

/* предпочтительнее примера выше, если есть возможность */
.form-submit-link {}

6. Стили в HTML

HTML предназначен для вывода информации (текст, картинки). Оформления контента (изменить размер, цвет, шрифт) происходит в CSS.

<!-- не правильно -->
<p style="color: red">Ошибка в коде</p>

<!-- правильно -->
<p class="error">Ошибка в коде</p>

7. Неправильное названия классов

Многие верстальщики, когда надо сделать текст зелёным цветом, прикрепляют к нему класс .green.

<p class="message green">Текст сообщения</p>

Это неправильно, т.к. при смене дизайна, многие цвета могут измениться, например, текст сообщения может выводиться синим цветом вместо зелёного. Тогда придётся искать все теги, у которых есть класс .green и заменять его на .blue.

Чтобы избегать подобных ситуаций, не рекомендуется применять классы для смены цвета, выравнивания текста, изменения регистра. Надо называть сами элементы (шапка, подвал, сообщение), и применять к нему свои стили.

<!-- неправильно -->
<p class="message green">Текст сообщения</p>

<!-- правильно -->
<p class="message message-success">Текст сообщения</p>

8. Пиксели в дробных значениях

Некоторые браузеры позволяют указывать пиксели в дробных значениях, например «1.5px». Но это неправильно, т.к. пиксель это неделимая единица. Вместо «1.5px» лучше использовать «1.5em».

p {
    /* не правильно */
    letter-spacing: 1.5px;

    /* правильно */
    letter-spacing: .005em;
}

9. Использование классов вместо id

Рекомендуется делать выборку по классам вместо id, т.к. селекторы с id имеют больший вес, чем у классов, и их сложно будет переопределить.

#modal a {
    color: blue;
}

/* цвет ниже не получится переопределить,
   т.к. #modal имеет больший вес, чем у классов */
.modal-header a {
    color: #333;
}

/* в этом случае придётся добавить #modal */
#modal .modal-header a {
    color: #333;
}

Также не рекомендуется использовать !important, т.к. его вес выше, чем у атрибута id, и его также будет сложно переопределить.

10. Меню

Меню должно быть оформлено как список.

<!-- неправильно -->
<p><a href="#">Главная</a> <a href="#">Новости</a> <a href="#">О компании</a></p>

<!-- правильно -->
<ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Новости</a></li>
    <li><a href="#">О компании</a></li>
</ul>

11. Пропущенный alt у картинок

В тегах надо указывать атрибут alt (можно пустой).

<!-- неправильно -->
<img src="pic.jpg">

<!-- правильно -->
<img src="pic.jpg" alt="Картинка">
<img src="pic.jpg" alt="">

12. Теги <h1>

На странице должен быть только один заголовок в теге <h1>. В основном, в этом теге находится название страницы.

13. Транскрипция

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

/* неправильно */
.tovar {}
.stranica {}
.zapros {}

/* правильно */
.product {}
.page {}
.query {}

14. Clearfix

Про clearfix сложно написать в двух словах, но укажу момент, которые многие верстальщики, по моему мнению, делают ошибку.

Класс .clearfix надо указывать в родительском теге, а не ставить рядом.

<!-- неправильно -->
<div>
    <div class="float-left"></div>
    <div class="float-right"></div>
    <div class="clearfix"></div>
</div>

<!-- правильно -->
<div class="clearfix">
    <div class="float-left"></div>
    <div class="float-right"></div>
</div>

15. HTML — язык программирования

Некоторые новички в HTML думают, что HTML это язык программирования. На самом деле HTML не является языком программирования, его можно сравнить с Microsoft Word. Например, чтобы текст сделать жирным, в Word надо нажать на кнопку, а в HTML надо прописать код. Т.е. HTML это просто инструмент, который добавляет текст, картинки, таблицы и другие элементы.

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

Что нужно, чтобы писать код правильно и не допускать ошибок? Знать самые распространённые ошибки и не совершать их.

Вложенный тег закрывается позже родительского

<section> 
  <p>Пример текста на сайте.</section>
</p>

В этом примере элемент <p> закрывается после <section>, хотя является вложенным. Это может привести к проблемам в отображении элементов. Такая ошибка повторяется из-за невнимательности и некорректной структуры HTML-документа. Если вы будете следить за вложенностью, то не ошибётесь, где должен закрываться вложенный тег, а где — его родитель.

Правильный способ вложения этих элементов:

<section>
  <p>Пример текста на сайте.</p>
</section>

Пример корректного написания кода, где видна вложенность и шансов совершить ошибку меньше:

<ul class="user-menu">
  <li>
    <a href="#">Закладки</a>
  </li>
  <li>
    <a href="#">Корзина</a>
  </li>
  <li>
    <a href="#">Оформить заказ</a>
  </li>
</ul>

Нет закрывающего тега

<section class="advantages">
  <h2>Что выделяет нас среди конкурентов?</h2>
  <ul class="advantages-list">
    <li>Используем только природные материалы</li>
    <li>Ежедневные отчёты о ходе работ</li>
    <li>Сами соберём мебель для вас</li>
    <li>Бесплатное гарантийное обслуживание в течение 10 лет</li>
</section>

В примере у списка отсутствует закрывающий тег — </ul>. В этом случае список и все его элементы отразятся некорректно. Будьте внимательны, такие мелкие ошибки могут принести много неприятностей.

Правильный вариант:

<section class="advantages">
  <h2>Что выделяет нас среди конкурентов?</h2>
  <ul class="advantages-list">
    <li>Используем только природные материалы</li>
    <li>Ежедневные отчёты о ходе работ</li>
    <li>Сами соберём мебель для вас</li>
    <li>Бесплатное гарантийное обслуживание в течение 10 лет</li>
  </ul>
</section>

Повторяются идентификаторы

<form action="https://echo.htmlacademy.ru" method="post">
  <table>
    <tr>
      <td>
        <label for="login-field">Ваш логин</label>
      </td>
      <td>
        <input type="text" id="login-field" name="login">
      </td>
    </tr>
  ...

<form action="https://echo.htmlacademy.ru" method="post">
  <table>
    <tr>
      <td>
        <label for="login-field">Ваш пароль</label>
      </td>
      <td>
        <input type="text" id="login-field" name="password">
      </td>
    </tr>

Тег id — это идентификатор, который связывает определённое поле ввода input с текстом подписи. В каждой форме должен быть свой уникальный id, чтобы формой можно было пользоваться и отправлять данные на сервер.

У пароля из примера выше должен быть свой уникальный id:

<form action="https://echo.htmlacademy.ru" method="post">
  <table>
    <tr>
      <td>
        <label for="password-field">Ваш пароль</label>
      </td>
      <td>
        <input type="text" id="password-field" name="password">
      </td>
    </tr>

Неправильное использование семантических тегов

<section class="products">
    <h2>Курс для фронтендеров</h2>
    …
    <div>Купить курс</div>
  </section>

Здесь <div> ошибочно используется вместо кнопки <button>.

Тег <div> — это универсальный контейнер без собственного значения. Он используется, когда нужно разметить некрупный элемент вёрстки или отдельный фрагмент с текстом. Его использование не создаст кнопку, которая может открыть другую страницу или форму для записи.

Кнопка <button> отвечает за выполнение определённой функции: добавить в корзину, купить, отправить, проголосовать и другие.

<section class="products">
  <h2>Курс для фронтендеров</h2>
    …
  <button class="button">
    Купить курс
  </button>
</section>

Семантические теги <header>, <main>, <footer> предназначены для выделения основных структурных блоков на странице сайта, а теги <nav>, <section>, <article>, <aside> — для разметки крупных смысловых разделов. Все теги должны быть использованы в соответствии со своим назначением.

• Что такое семантическая вёрстка и зачем она нужна
• Как сделать кнопку в HTML

Отсутствие атрибута alt для изображений img

<img src="image/logo.png" width="200" height="100">

Атрибут alt задаёт альтернативный текст, описывающий картинку для пользователей, у которых изображение очень долго загружается или вообще недоступно. Также alt помогает сайтам оставаться доступными, например, для категории пользователей, которая не имеет возможности видеть картинки.

<img src="image/logo.png" alt="Логотип" width="200" height="100">

6 простых правил хорошего alt-текста

Определение уровня заголовка по размеру текста на макете

<main>
  <h1>Мы — молодая креативная компания</h1>
  <section class="products">
    <h2>Обувь и аксессуары</h2>
    …
  </section>
  <section class="about">
    <h2>Мы надёжные партнёры и поставщики</h2>
    … 
  </section>
  <section class="companies">
    <h2>Уже много лет мы сотрудничаем с самыми крупными производителями</h2>
    …
  </section>
</main>

Не весь крупный текст — заголовки. Основная роль заголовка — резюмирующая, он сжато передаёт содержание последующего текста. Прочитав заголовок, пользователь должен легко понять, чему посвящён раздел. Также не все заголовки видимые на странице сайта, они могут быть прописаны в разметке и скрыты, так как их задача — помогать структурировать страницу.

<main>
  <h1>Интернет магазин «Фактура»</h1>
  <section class="products">
    <h2>Товары</h2>
    …
  </section>
  <section class="about">
    <h2>О нас</h2>
    …
  </section>
  <section class="companies">
    <h2>Производители</h2>
    …
  </section>
</main>

Также неверно обозначать заголовок не специальными тегами h1-h6, а использовать выделение текста тегами <b> или <strong>.

Включать в main то, что повторяется на других страницах

Это может быть навигация, копирайты и так далее.

<body>
    <h1>Интернет магазин «Фактура»</h1>
  <main>
    <nav class="user-nav">
      <ul class="user-menu">
        <li>
          <a href="https://htmlacademy.ru/blog">Меню</a>
        </li>
        <li>
          <a href="https://htmlacademy.ru/blog">Корзина</a>
        </li>
        <li>
          <a href="https://htmlacademy.ru/blog">Оформить заказ</a>
        </li>
      </ul>
    </nav>  
    <section class="about">
      <h2>О нас</h2>
      …
    </section>
  </main>
  <footer class="main-footer">
      <!-- Подвал сайта -->
  </footer>
</body>

Тег <main> выделяет основное содержание страницы, которое не повторяется на других страницах. И на странице используется один тег <main>. Если навигация одинаковая на всех страницах сайта, то лучше размещать её в <header>.

Неверное обозначение комментариев

Если комментарий неправильно разметить, то он будет виден на странице.

<-- Это комментарий -->

Комментарии начинаются последовательностью <!--, например:

<!-- Это комментарий -->

Не использовать <li> для элементов списка

<ul class="user-menu">
  <div>
    <a href="https://htmlacademy.ru">Закладки</a>
  </div>
  <div>
    <a href="https://htmlacademy.ru">Корзина</a>
  </div>
  <div>
    <a href="https://htmlacademy.ru">Оформить заказ</a>
  </div>
</ul>

Непосредственно в теге <ul> могут находиться только теги <li>, которые обозначают элементы или пункты списка. Пунктов может быть неограниченное количество, но не менее одного.

<ul class="user-menu">
  <li>
    <a href="https://htmlacademy.ru">Закладки</a>
  </li>
  <li>
    <a href="https://htmlacademy.ru">Корзина</a>
  </li>
  <li>
    <a href="https://htmlacademy.ru">Оформить заказ</a>
  </li>
</ul>

Материалы по теме

• Как проверить валидность HTML-разметки
• Как сделать картинку ссылкой
• Флексы для начинающих
• Шаблон HTML-формы

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Набор подходов и решений в области HTML-CSS-верстки, которые я считаю спорными или ошибочными (ошибки описаны мои, моих коллег, студентов). Все статьи цикла:

• Часть 1: методологические и организационные
• Часть 2: разметка
• Часть 3: стили

Разметка

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

Написание заведомо невалидной разметки

Пишете на каком-либо языке — соблюдайте правила языка.

Серьезные синтаксические ошибки разметки чреваты парадоксальным результатом при построении DOM. К примеру, даже если вы напишите внутри тега p тег div, в DOM вы увидите иную картину.

Положа руку на сердце, нельзя сказать, что обязательная валидность критично необходима (для HTML браузеры многое прощают), однако уподобляться горячему южанину на русском сайте знакомств («Я влодеть базовы руский давай делать секс») — некомильфо.

Современный валидатор разметки.

Неуказание doctype и/или кодировки

Чревато проблемами с отображением. В первую очередь, в старых IE (выбирают режим работы, исходя из doctype). Уже несколько лет мы используем HTML версии 5 с простым и понятным doctype.

Кодировка, в которой будет показана страница зависит не только от указанной в разметке (браузер может учесть полученные с сервера заголовки ответа и/или определить кодировку самостоятельно), но указать ее нужно: при прочих равных это позволит избежать проблем отображения. Метатег с кодировкой должен быть первым, что браузер встретит внутри head.

Игнорирование микроразметки

Как разумно заметил в комментарии к первой части этой статьи Игорь Тимохин, микроразметка (Schema.org, OpenGraph) — это не сложно и очень полезно для SEO.

Мне лично кажется, что микроразметка может уйти в прошлое в ближайшие несколько лет, ибо если специализированные ИИ-системы умеют распознавать лица на фото и менять эмоции на изображениях лица, отчего бы другим ИИ-системам не определять и семантический смысл элементов страниц? (Уверен, что такие системы уже используются поисковыми гигантами.)

Дополнение: признаюсь, я крайне редко добавляю микроразметку при работе.

Отсутствие логичной иерархии заголовков

Иерархия важна как для SEO, так и для восприятия страницы в случае отсутствия стилей (не загрузились по каким-то причинам). Добавляю по подсказке Вадима Макеева: заголовки, так же, очень важны для доступности страницы.

Проверить логичность иерархии можно в ходе проверки валидности документа (проставить чекбокс «outline»).

Отсутствие знакомства с рекомендациями для веб-мастеров

Если сайт будет запущен, владелец может захотеть вывести его на высокие позиции в поисковой выдаче. Верстка с учетом рекомендаций веб-мастерам поможет этому и улучшит вашу карму в глазах заказчика (критично для фрилансера). Помощь вебмастеру от Яндекса, рекомендации от google.

Набор разметки вручную

Если вы не используете какой-либо HTML-препроцессор, предпочитаете сами писать разметку, лучше делать это как можно быстрее. Очень странно набирать теги и атрибуты вручную, без emmet.

Emmet — это не только ценный мех разворачивание аббревиатуры в структуру тегов, в нём есть фильтры, удобное редактирование/убирание тегов, перемещение курсора между ключевыми точками и еще уйма вещей (см. документацию, в ней все показано с интерактивными примерами).

Использование сниппетов, так же, сильно ускоряет написание. Хорошо иметь сниппеты разметки для фрагментов форм (текстовое поле, радиокнопка etc.)

Игнорирование кодгайда

Даже если вы работаете как фрилансер, нужно выбрать и соблюдать единый кодгайд на всех проектах. Код должен быть красиво форматирован и написан с соблюдением четких правил, поскольку это:

• упрощает поиск ошибок,
• снижает вероятность поломки при модификации,
• ускоряет чтение кода.

Примеры кодгайдов: руководство по написанию кода школы Epic Skills (целиком написано мной), Стиль кода Академии HTML (немного приложил руку), Code Guide by @mdo (кодгайд от Марка Отто (автор Bootstrap), именно этим материалом вдохновлены две предыдущие ссылки).

Работа без БЭМ

Если сравнивать методологии, серьезных конкурентов у БЭМ нет: самодокументирование и имитация пространства имен впервые появились именно в нём. Я коротко описал свои принципы работы с этой методологией тут: Как работать с CSS-препроцессорами и БЭМ. Полный стек лично у меня не прижился, главным образом из-за скорости работы его инструментов. Сейчас я использую что-то отдалённо напоминающее инструменты полного стека.

Реальными альтернативами БЭМ могут считаться веб-компоненты (дают, в числе прочего, настоящую изоляцию), но им нужна поддержка браузеров, которая пока плохая. Ещё есть CSS-модули, но они требуют особого инструментария и применимы не на всех проектах.

Игнорирование семантики тегов

Часть тегов универсальны, часть имеют семантику (разной степени). К примеру, есть div — универсальный блок, а есть section — часть чего-либо (к примеру, большого «подвала»), которая при вырывании из контекста частично теряет смысл, и есть article — блок с наиболее выраженной семантикой (будучи вырван из контекста, сохраняет осмысленность полностью).

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

Истиной в последней инстанции в вопросе использования тегов является спецификация.

Игнорирование и подмена функциональности тегов

Пример: если на странице есть флажок (чекбокс) и текст рядом, клик по тексту должен менять состояние флажка. Увы, не всегда это так. Встречал решения, когда автор страницы с помощью JS отлавливает клик и по такому событию проставляет/снимает отметку, вместо использования тега label, связанного с input-ом. (Сам предпочитаю писать input внутри label.)

Гораздо чаще, впрочем, встречаюсь с подменой ссылки на кнопку (и наоборот) или даже на какой-либо изначально неинтерактивный элемент. Не делайте так, это осложняет управление страницей без мыши и ухудшает доступность.

Именование классов транслитом, КАПС, избыточные сокращения в классах

Транслит — это странно (столь же странно, как веб-разработчик без знания английского языка). КАПС бывает применим лишь в тестовом режиме (имена классов со словами TEMP, TODO и подобными) и в случае блондинистости автора.

Избыточность сокращений — крайне субъективная штука. Я составил для себя короткий словарь сокращений, которые считаю допустимыми в силу их очевидности (есть еще хорошая подборка слов, часто использующихся в классах от Йоксель). Точно не стоит сокращать слова до одной буквы.

И транслит, и КАПС, и избыточные сокращения снижают скорость чтения (да и чисто эстетически это — не то, что вы хотите видеть в коде).

Дублирование блоков для представления на разных размерах вьюпорта

Бывает, что фрагмент страницы показывается в разных местах макета на разных ширинах. Нередко удается сверстать страницу с таким фрагментом без дублирования (более всего помогает свойство order, в меньшей степени — абсолютное позиционирование (проблемы с переполнением)).

Самый печальный пример такого дублирования — главная навигация, представленная в разметке в варианте для «мобильных» и в варианте для «настольных» (чуть дольше грузится, возможны проблемы с фокусом на ссылках, сложно использовать Critical Path и пр.).

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

Работа без процессинга разметки

Для средних по размеру проектов я считаю важным использовать процессинг разметки. Простейшим вариантом было бы написание разметки повторяющихся фрагментов в отдельных файлах и вставка их в нужные места при сборке страниц (простейший способ: gulp-file-include).

Примеры включаемых фрагментов разметки:

• код внутри head (не весь) и перед /body, где подключаются общие ресурсы,
• «шапка» и «подвал»,
• карточка товара, выводимая несколько раз на нескольких страницах,
• блоки, из которых набираются формы,
• модальные окна, присутствующие на большинстве страниц.

При включении можно передавать в подключаемый файл какие-либо данные (название товара, цену, имя поля формы и пр.).

Однако есть и более продвинутые варианты с HTML-процессорами. Один из самых известных — Pug. Переменные, циклы, экстенды, инклуды, примеси и пр. позволяют комфортно работать с проектами, в которых много повторяющихся частей и более двух общих раскладок блоков по странице. Минусами может стать синтаксическая табуляция и некоторые сложности с выведением пробельных символов между строчными тегами.

Читать далее: Ошибки и спорные моменты стилизации