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

10 ошибок начинающего верстальщика и как их избежать

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

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

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

1. Неправильные имена классов

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

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

2. Использование идентификатора #id для описания стилей блока

Стиль блока можно задать с помощью класса .class-name или идентификатора #id. Атрибут класса позволяет выбрать группу элементов, а #id — один элемент. Если на странице сайта будет задан один и тот же #id для нескольких элементов, то браузер проигнорирует оформление элемента или вообще не откроет CSS-файл.

Идентификатор #id также используется, чтобы передавать информацию в JavaScript. Поэтому можно запутаться среди разных #id, потому что некоторые используются для скриптов, а другие — для оформления.

Как избежать: использовать имена классов .class-name для описания стилей блока, а #id оставить для JavaScript.

3. Описание стилей для элементов внутри атрибута style

Когда только сталкиваетесь с html-разметкой, то непонятно, как связаны html и CSS и как задать нужные стили в CSS. Чтобы упростить задачу, начинающие верстальщики не трогают CSS-файл, а задают оформление элемента внутри атрибута style в html.

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

Как избежать: задавать стили для каждого элемента в СSS-файле.

4. Использование тега абзаца

для разметки

Браузер по умолчанию добавляет к

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

…

.

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

5. Много изображений в высоком разрешении на странице

Страница, которая перегружена изображениями с большим весом, долго загружается. Пользователям надоедает ждать полной загрузки и они просто закрывают страницу сайта или пытаются ее перезагрузить. Если открыть такую страницу с телефона, то, помимо долгого времени загрузки, она потребует большого трафика.

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

6. Не сброшены изначальные настройки

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

Как избежать: сбросить отступы для всех элементов можно с помощью СSS-кода:

Либо подключить специальный CSS-файл, внутри которого отступы уже изменены. Например, Normalize.css или CSSreset.css.

7. Использование блочного элемента внутри строчного

В HTML существует два типа элементов: блоки и строки.

, , и другие элементы. Их свойство по умолчанию — display:block.

Заголовок

Заголовок

Если все же нужно использовать блок внутри строчного элемента, то можно поменять свойство у строчного на display:block

8. Отступы между элементами сделаны с помощью тега переноса строки

Часто с помощью одного или нескольких тегов
создают отступы между элементами, картинками, словами. Этого делать не стоит, потому что тег
должен использоваться внутри тега с текстом

…

.

Чтобы не вставлять в разметку лишних тегов, просто пропишите нужные отступы в CSS.

9. Страница не проверялась валидатором

На сайте w3.org есть специальный валидатор html-файлов. Он проверяет код страницы и выдает незамеченные ошибки: незакрытый тег, пропущенную строку или свойство. Чем меньше ошибок нашел валидатор, тем лучше отобразится страница в браузере и быстрее будет работать сайт.

10. Не указан тип страницы

Чтобы сообщить браузеру, какая версия HTML-разметки используется на странице, нужно использовать тег DOCTYPE.

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

Как избежать: всегда вставлять тег в первую строку страницы. Например, если вы верстаете на HTML пятой версии, объявить тип документа можно так:

Чтобы научиться грамотно верстать страницы и совершать меньше ошибок, нужно следить за каждым шагом и уделять внимание мелочам. Чем тщательные вы следите за кодом, тем лучше страницы будет отображаться в браузерах.

Итак, ошибки, которые нужно избегать:

• Неправильные имена классов;
• Использование идентификатора #id для описания стилей блока;
• Описание стилей для элементов внутри атрибута style;
• Использование тега абзаца

  для разметки;

• Много изображений в высоком разрешении на странице;
• Не сброшены начальные настройки;
• Использование блочного элемента внутри строчного;
• Отступы между элементами сделаны с помощью тега переноса строки
  ;
• Страница не проверялась валидатором;
• Не указан тип страницы.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Средняя оценка 3.6 / 5. Всего проголосовало 8

Источник

Частые ошибки в HTML-коде

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

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

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

В этом примере элемент

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

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

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

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

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

    Ваш логин  .    Ваш пароль  

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

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

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

 
Курс для фронтендеров
 … 
Купить курс
 
 

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

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

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

 
Курс для фронтендеров
 … Купить курс 
 

Если перед вами раздел, которому сложно найти определение, получается что-то наподобие «новости и фотогалерея» или «правая колонка» — можно разметить как .

Семантические теги , , предназначены для выделения основных структурных блоков на странице сайта, а теги , , , — для разметки крупных смысловых разделов. Все теги должны быть использованы в соответствии со своим назначением.

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

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

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

 
Мы — молодая креативная компания
 
Обувь и аксессуары
 …
 
Мы надёжные партнёры и поставщики
 …
 
Уже много лет мы сотрудничаем с самыми крупными производителями
 …
 
 

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

 
Интернет магазин «Фактура»
 
Товары
 …
 
О нас
 …
 
Производители
 …
 
 

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

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

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

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

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

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

Комментарии начинаются последовательностью

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

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

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

Источник