Ошибки соответствия стандартам html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

10 распространенных ошибок в HTML коде, которые мешают успешной валидации

Дизайнеры тратят часы на оттачивание мастерства для тщательной подгонки мельчайших деталей в дизайне веб сайтов, которые выходят из-под их пера. Однако качество кода очень часто остается весьма низким. Вам нужны доказательства? Посмотрите галереи бесплатных шаблонов CSS. 90% шаблонов не пройдут проверку. Причем, основная часть ошибок является весьма примитивными и их очень легко исправить. В данном уроке рассмотрим типовые ошибки в коде HTML, которые мешают успешному завершению проверки.

Зачем проверять код?

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

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

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

Общие ошибки

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

Не указан тип документа

Самая плохая ошибка — не использовать Doctype! Отсутствие тега Doctype означает, что браузер будет «догадываться», какой язык использовался для создания документа. Для исправления ошибки нужно указать тип документа вашей страницы.

Не закрыт элемент

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

Неконвертированные символы в URL

В соответствии с предыдущим пунктом, специальные символы, особенно амперсанд, должны быть кодированы в строках URL. Ссылки на сайты, построенные с использованием PHP, часто содержат переменные с использованием символа & , их нужно писать с использованием кода HTML & .

Блочные элементы внутри строчных

Одно из основных правил HTML заключается в том, что блочные элементы НИКОГДА не должны находиться внутри строчных элементов.

Популярный пример ошибки — использование ссылки в заголовке:

bananas

— блочный элемент, поэтому он должен оборачиваться вокруг ссылки (строчный элемент):

bananas

.

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

Каждое изображение в документе HTML должно иметь атрибут alt с описанием содержания картинки. Даже если картинка служит для дизайнерских целей, она должна иметь атрибут alt , но в данном случае его надо оставить пустым, например, alt=»» . В другом случае нужно представить описание содержание изображения.

Использование атрибутов подобных width и height

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

Имя класса или ID начинается с цифры

Имя класса, ID или имя атрибута не может начинаться с цифры. Они могут включать цифры, но не в начале слова.

А какова ситуация с проверкой CSS кода?

В отличие от HTML, CSS используется для визуального представления страницы. Таким образом, вопрос “Если страница выглядит хорошо, то зачем проверять код?” в данном случае звучит более убедительно. Неправильный код CSS не оказывает такого влияния на веб страницы, как неправильный код HTML. Однако проверку стоит проводить на предмет обнаружения опечаток и ошибок в коде. Если вы используете новые свойства CSS3, они сделают ваш документ не прошедшим проверку, так как еще не включены в спецификацию, но если вы уверенны, что все правильно, то на такие ошибки можно не обращать внимание.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: line25.com/articles/10-common-validation-errors-and-how-to-fix-them
Перевел: Сергей Фастунов
Урок создан: 18 Декабря 2010
Просмотров: 62179
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

• 

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

30 сайтов для скачки бесплатных шаблонов почтовых писем

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

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

Источник