Создать веб-страницу с использованием HTML и CSS довольно просто. Но легко ошибиться, и есть немало вещей, о которых вы могли бы и не подумать. В большинстве случаев эти небольшие ошибки не будут иметь большого значения.
Но в долгосрочной перспективе они могут сделать вашу жизнь сложнее. Эти девять ошибок легко сделать, но если вы укажете их раньше, чем позже, ваша страница будет выглядеть лучше, ее будет легче поддерживать и работать так, как вы хотите.
1. Inline Styling
Одна из замечательных особенностей HTML и CSS состоит в том, что вы можете отформатировать любую строку текста — любое отдельное слово, на самом деле — когда захотите. Но это не значит, что вы должны воспользоваться этой возможностью.
Вот пример встроенного стиля, который вы можете использовать, чтобы сделать абзац больше окружающих абзацев и выделить его другим цветом:
<p>Your text here.</p> Это дает абзацу стиль CSS Вам что заканчивается заключением абзаца. Кажется довольно эффективным, верно?
В этом есть одна большая проблема: если вы хотите многое изменить на своем веб-сайте, вам нужно будет найти каждый экземпляр встроенного стиля и изменить его. Если у вас есть 100 различных абзацев с текстом на 120% и синим цветом, вам нужно будет найти все 100 и изменить их на тот, который вы решили, что это лучший формат.
Вместо этого используйте таблицу стилей CSS. Вот стиль, который вы бы использовали для предыдущего абзаца:
p.important { size: 120%; color:blue; }
Теперь вместо использования встроенного стиля вы можете просто использовать эту строку:
<p class="important">Your text here.</p>
И ваш абзац будет большим и синим. И когда вы вносите изменения в «важный» класс в вашем CSS, они все изменятся.
2. Таблицы для макета
Люди привыкли использовать таблицы для форматирования макета страницы довольно регулярно. Используя таблицу, вы можете организовать элементы на странице по столбцам и строкам, а также применять различные выравнивания и стили. Даже одноклеточные таблицы будут использоваться для правильного выравнивания контента. Но это использование таблиц, как правило, осуждается.
Подобно встроенным стилям, проще использовать CSS вместо таблиц HTML для разметки. Опять же, если вы хотите внести изменения на десятки или сотни страниц, гораздо проще отредактировать вашу таблицу стилей, чем просматривать каждую страницу и настраивать таблицы.
В дополнение к более простому обслуживанию чтение макетов CSS, как правило, немного проще, чем чтение таблиц HTML. Особенно, если вы в конечном итоге вложите много уровней таблиц друг в друга. Возможно, будет непросто переключаться между вашим HTML-документом и таблицей стилей, чтобы точно увидеть, что происходит, но содержание вашей страницы будет более понятным и простым для редактирования.
Использование таблиц здесь и там для разделения страниц на столбцы не является смертным грехом. Иногда это проще и быстрее, чем возиться с CSS. Но если вы создаете гигантские многоуровневые таблицы, вам следует подумать о переформатировании с помощью CSS.
3. Устаревший HTML
Как и любой язык, HTML регулярно меняется. Официально признанные теги меняются, а некоторые становятся устаревшими. Даже если эти теги все еще работают, лучше их избегать.
Например, если вы привыкли использовать тег <b> для жирного шрифта и тег <i> для курсива, вы отстаете от времени. <strong> и <em> (для «выделения») теперь являются стандартными тегами. <center>, <align>, <color>, <size> и другие также устарели.
Большинство устаревших тегов были заменены на CSS, поэтому вам нужно будет использовать стили (желательно не встроенные), чтобы получить тот же эффект. Если вы не уверены, как заменить устаревший тег или какой-то конкретный тег все еще используется, проверьте официальную документацию HTML или просто выполните быстрый поиск.
4. Встроенный JavaScript
Некоторые веб-страницы используют JavaScript для добавления дополнительных функций Он может сделать веб-страницы интерактивными, проверять текст по мере его ввода, добавлять анимацию, предоставлять ответы на действия пользователя и так далее. Короче говоря, это может сделать страницу более полезной, предоставляя дополнительное поведение.
Как и CSS, вы можете добавить встроенный JavaScript в ваш HTML. Также как CSS, это вообще не рекомендуется. В дополнение к тому, что его потенциально сложно поддерживать, есть еще несколько причин, которые оправдывают это предостережение.
Встроенный JavaScript может использовать большую пропускную способность, чем скрипт, связанный с другим файлом. Процесс, называемый минимизацией, сжимает HTML и CSS перед отправкой пользователю, требуя меньшей пропускной способности по широкополосным или мобильным соединениям. Встроенный JavaScript, однако, не может быть уменьшен. Он также не будет кэшироваться, тогда как отдельный файл JavaScript может быть кэширован .
Все это делает встроенный JavaScript более требовательным к пропускной способности.
Его также сложнее отладить, так как вы можете использовать валидатор JavaScript для файла JavaScript … но он не будет работать на встроенном скрипте. И, опять же, это делает для более чистого и легкого в обслуживании HTML.
5. Несколько тегов H1
Метки заголовка отличные. Они облегчают просмотр страниц, они могут повысить SEO, и их можно использовать, чтобы подчеркнуть определенные моменты.
Но есть шесть уровней тегов заголовка по причине. На вашей странице должен быть только один тег H1. И это часто заголовок страницы (особенно в блогах и подобных сайтах). Вы можете подумать, что размещение нескольких ключевых слов в тегах H1 повысит вероятность того, что Google подберет их и повысит рейтинг вашего сайта в результатах.
Но на самом деле это делает вашу страницу более запутанной и трудной для чтения. Что сведет на нет все преимущества SEO, которые вы можете увидеть в любом случае.
Используйте H2, H3 и остальные теги заголовков, чтобы лучше очертить вашу страницу. Уровень заголовка должен дать читателю представление о важности следующего раздела. Если вы ввели их в заблуждение, они это узнают, и они не будут счастливы.
6. Пропустить изображение Alts
Каждому изображению может быть присвоен атрибут «alt», который отображает определенную строку текста, если изображение не может быть отображено. Это может показаться не таким уж большим делом, особенно в современных браузерах (как настольных, так и мобильных), которые могут отображать что угодно.
Но не добавление атрибутов alt является большой ошибкой, особенно в эпоху постоянного мобильного просмотра. Мобильные соединения не всегда хороши, и если браузер не может загрузить изображение, у вашего читателя не останется ни малейшего представления о том, что они должны там видеть. Атрибут alt может это исправить.
И если кто-то использует программу чтения с экрана, или другую особенность доступности, этот атрибут alt может быть всем, что они получают из изображения.
Конечно, есть и потенциальные преимущества SEO. Поисковые системы могут индексировать короткие, описательные атрибуты alt. Но самое большое преимущество здесь — это помощь вашим читателям.
7. Не закрывающие теги
Есть некоторые HTML-теги, которые вы можете не закрывать, например, <p> и <li>. Браузеры знают, что когда вы начинаете другой абзац или элемент списка, предыдущий заканчивается. Но это не значит, что вы должны пропустить закрывающие теги.
Прежде всего, несмотря на достижения в области браузерной технологии, определенно существует вероятность того, что браузер неправильно отобразит ваш контент, если вы не закрыли свои теги. Применение стилей может привести к непредсказуемым результатам, как демонстрирует пользователь Stack Exchange Роберт .
То, что сводится к тому, что браузеры ожидают закрывающих тегов. Им они абсолютно не нужны … но они определенно выиграют от правильного HTML, когда пытаются отобразить вашу страницу.
К счастью, закрытие тегов не займет много времени, особенно если вы используете хороший редактор HTML.
8. Не включая DOCTYPE
В начале HTML-документов вы обычно видите объявление DOCTYPE, например:
<!DOCTYPE html>
Об этом часто не говорят, но это важный элемент на вашей странице. Объявление DOCTYPE сообщает браузеру, какой тип HTML вы используете. Это позволяет правильно отображать HTML.
Если вы пропустите объявление DOCTYPE, страница отобразится в «режиме причуд». Это защита современного браузера от устаревших веб-страниц. И это меняет способ отображения вашей страницы. Беглый взгляд на режим причуд Firefox показывает, что чувствительность к регистру изменяется, свойства шрифта не наследуются в таблицы, размеры шрифтов рассчитываются по-разному, а изображения без атрибутов alt иногда отображаются неправильно.
Большинство из этих вещей относительно незначительны. Но если вы хотите, чтобы ваша страница отображалась правильно, вы должны убедиться, что в браузере включен режим полных стандартов.
И чтобы сделать это, вам нужен DOCTYPE. (Если вы не уверены, что использовать, просто используйте <! DOCTYPE html>.)
9. Пренебрежение разметкой схемы
Разметка схемы помогает поисковым системам лучше понять, что находится на вашей странице. Более конкретно, эта разметка сообщает поисковым системам, о чем вы пишете в каждом разделе.
Например, в статье вы можете использовать разметку схемы, чтобы сообщить поисковой системе название, автора, дату, издателя и другую полезную информацию о статье.
Существуют схемы для фильмов, книг, организаций, людей, ресторанов, продуктов, мест, мероприятий, различных типов данных, музыки, скульптур, бронирований, услуг, банкоматов, пивоваренных заводов и всего остального, о чем вы только можете подумать. Это довольно удивительно.
Вы можете определенно уйти без использования разметки схемы. Ваша страница будет отображаться правильно без него. Ваши читатели даже не узнают, что это там. Но многое можно извлечь из включения этой разметки. Поисковые системы смогут предоставить гораздо более подробную и полезную информацию о вашей странице, в том числе богатые фрагменты.
А с помощью инструмента разметки схемы Google процесс на самом деле довольно прост.
Привыкайте к HTML Best Practices
Превращение этих лучших практик в привычку может занять некоторое время. И иногда может показаться, что вы тратите много дополнительного времени на что-то, что не приносит вам большой пользы. Но убедитесь, что ваш HTML и CSS Вам интересно хорошо продуман, прост в работе и удобен в обслуживании, что сэкономит вам много времени в долгосрочной перспективе.
Какие еще полезные привычки вы считаете полезными при создании веб-страниц? Вы не согласны с какой-либо из вышеперечисленных практик? Поделитесь своими мыслями в комментариях ниже!