Наиболее распространенные ошибки HTML и CSS, которых следует избегать

Начинающие  web мастера часто делают ошибки в HTML коде и файлах CSS стиля либо по неосторожности или неопытности. Чистота код очень важна, потому что она не только способствует совершенствованию навыков в качестве разработчика , а также сэкономить время при редактировании позже! Вот полезный список распространенных ошибок и оплошностей, которые наиболее часто распространены:

HTML ошибки

Незакрытые теги

Эта ошибка бывает часто, особенно у новичков. Некоторые теги требуют тегов закрытия, таких как теги DIV-ов, ссылок и многие другие. Другие теги требуют закрытия косой чертой в конце строки, такие как тег IMG .

<div> Текст внутри дел. </> Div
<img src="images/imagename.jpg" />

Неправильная DOCTYPE

HTML требует, чтобы вы начинаете документ с правильной декларации DOCTYPE. Она должна быть прежде всего в коде, начиная с документа, заявляя, какой тип HTML вы используете. Вот DOCTYPE для XHTML 1.0 Transitional .

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Неправильная вложенность тегов

Очень важно открывать и закрывать теги в правильном порядке. Закрываем в порядке обратном открытию. Ниже неправильно.

<div> <strong> текст </ DIV> </ STRONG>

Верхний регистр для обозначения тегов

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

<DIV> </> DIV

Отсутствие  открытия или закрытия кавычек

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

<img src="images/headerimage.jpg" />

Использование встроенных стилей

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

<a href="link.html" style="color: #000; text-decoration: none;"> ссылка < имя / >

Не кодирования специальных символов

Персонажи , как «© «и другие спецсимволы должен быть показаны с помощью соответствующего кодома HTML. Вот большой список символов HTML, которые нужно использовать.

Смешение классов и идентификаторов

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

CSS

Отсутствие закрытия стиля

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

# { divname
ширина: 40px;
высота: 30px ;
}

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

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

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

Стенограмма кода является еще одним способом улучшить таблицу стилей, уменьшить объем сайта, а также упростить редактирование в дальнейшем. Вместо вызова -top, -left, -bottom, и -right вы можете просто использовать :

padding: 5px 10px 0 10px;

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

Отказ от использования сокращенного стиля цвета

Если буквы в названии цвета повторяются, такие, как # FFFFFF и #000000 код может быть изменен на # FFF и #000 . Это еще один способ для улучшения кода и  приведения его в вид короткий и легкий для глаз.

Неправильное использование позиционирования

Позиционирование бывает трудно понять, когда вы впервые начинаете работать с CSS. Ваш выбор может быть статическим, относительным, абсолютное и зафиксированым. Статический вариант установлен по умолчанию и позиционируется в соответствии с обычной поток страницы. Относительная пункт расположен по отношению к себе, то есть вы можете переместить его вверх, вниз, влево или вправо, в зависимости от его места. Абсолютное позиционирование позволяет размещать объект в любом месте страницы. Обучение тому, как использовать позиционирование корректно является важным, но не должно использоваться чрезмерно. Я редко используют их во всех моих стилях.

Проверка

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

Автор: Shannon Noack для сайта webdesignledger.com
Перевод: only-me для сайта TextProfit.ru

Оставить комментарий

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

Сайт с платным доступом + Интернет-магазин на Вашем блоге WordPress!

Сайт с платным доступом + Интернет-магазин на Вашем блоге WordPress!
Я рекомендую!

ЛУЧШИЕ КУРСЫ РУНЕТА:

Все о web-дизайнe и создании сайтов от Евгения Попова

Фотошоп от Зинаиды Лукьяновой