9 ошибок, которые вы не должны делать при создании веб-страницы

Реклама

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

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

1. Inline Styling

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

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

Здесь ваш текст.

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

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

Вместо этого используйте таблицу стилей CSS. Вот стиль, который вы бы использовали для предыдущего абзаца:

p.important {размер: 120%; цвет синий; }

Теперь, вместо использования встроенного стиля, вы можете просто использовать эту строку:

Здесь ваш текст.

И твой абзац будет большим и синим. И когда вы вносите изменения в «важный» класс в вашем CSS, они все меняются.

2. Таблицы для макета

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

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

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

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

3. Устаревший HTML

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

Например, если вы привыкли использовать тег для жирного и тег для курсива, вы отстали от времени. и (для «акцента») теперь стандартные тэги.

, , , и другие также устарели.

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

4. Встроенный JavaScript

Некоторые веб-страницы используют JavaScript для добавить дополнительную функциональность JavaScript и веб-разработка: использование объектной модели документаЭта статья познакомит вас со скелетом документа, с которым работает 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 может это исправить.

И если кто-то использует читатель экрана VoiceOver делает устройства Apple более доступными, чем когда-либоПрезидент Американского фонда слепых считает, что «Apple сделала больше для доступности, чем любая другая компания на сегодняшний день», и VoiceOver сыграл в этом большую роль. Прочитайте больше или другая особенность доступности, этот атрибут alt может быть всем, что они получают из изображения.

Конечно, есть и потенциальные преимущества SEO. Поисковые системы могут индексировать короткие, описательные атрибуты alt. Но самое большое преимущество здесь - это помощь вашим читателям.

7. Не закрывающие теги

Есть некоторые HTML-теги, которые можно скрыть, например:

и

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

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

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

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

8. Не включая DOCTYPE

В начале HTML-документов вы обычно увидите объявление DOCTYPE, например:

Это то, о чем не часто говорят, но это важный элемент на вашей странице. Объявление DOCTYPE сообщает браузеру, какой тип HTML вы используете. Это позволяет правильно отображать HTML.

Если вы пропустите объявление DOCTYPE, страница отобразится в «режиме причуд». Это защита современного браузера от устаревших веб-страниц. И это меняет способ отображения вашей страницы. Быстрый взгляд на Режим причуд Firefox показывает, что чувствительность к регистру изменяется, свойства шрифта не наследуются в таблицах, размеры шрифтов рассчитываются по-разному, а изображения без атрибутов alt иногда отображаются неправильно.

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

И чтобы сделать это, вам нужен DOCTYPE. (Если вы не уверены, что использовать, просто используйте .)

9. Пренебрежение разметкой схемы

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

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

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

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

А с помощью инструмента разметки схемы Google этот процесс на самом деле довольно прост.

Привыкайте к HTML Best Practices

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

Какие еще полезные привычки вы считаете полезными при создании веб-страниц? Вы не согласны с какой-либо из вышеперечисленных практик? Поделитесь своими мыслями в комментариях ниже!