Красивые HTML является основой красивого сайта.
Когда я учу людей о CSS, я всегда начинаю, говоря им, что хорошо CSS может существовать только с одинаково хорошей разметки HTML.Дома только так сильны, как его основания, не так ли?Преимущества чистой, семантической HTML много, но так много сайтов, страдает от плохо написанных markup.
Let’ посмотрим на некоторые плохо написанный HTML, обсудить свои проблемы, а затем взбейте его в форму!Имейте в виду, мы не проходящие любое суждение о content или design этой странице, только разметку, которая строит его.Если вы заинтересованы, взглянуть на плохо code и хорошее code прежде чем мы начнем, таким образом Вы можете видеть картину в целом.Теперь let’ начнем прямо на top.
1.Строгий DOCTYPE
Если мы собираемся это сделать, let’ просто сделать это правильно.Нет необходимости в дискуссии о том, чтобы использовать HTML 4.01 или XHTML 1.0: оба из них предлагают строгие версия, которая будет держать нас хорошие и честные, как мы пишем наши code.
Код нашей doesn’ T использовать любые таблицы для разметки в любом случае (nice!), так там действительно нет необходимости в переходный DOCTYPE.
Ресурсы:
- W3C: DTD, рекомендованные для использования в веб-document
- исправить Ваш сайт с правой DOCTYPE !
- Не более Переходные DOCTYPEs, please
2.Набор символов & А; кодирование characters
В нашем < head> раздел, самое первое, что должно быть заявление нашего набора символов.We’ повторное использование UTF-8 здесь, что зыбь, но it’ S перечисленные после нашего < title>.Let’ S идти вперед и переместить его вверх, так что браузер не знает, какой набор символов it’ имеет дело с ранее он начинает читать любую информацию в all.
В то время как we’ говорим о символах, let’ S идти вперед и убедитесь, что все забавные персонажи мы используем должным образом закодированы.У нас есть амперсанд в нашем названии.Чтобы избежать возможного неправильного толкования, что we’ будете конвертировать его в & instead.
Ресурсы:
3.Правильное indentation
Все права, мы около трех линий и I’ м уже раздражает отсутствие отступа.Отступы не имеет никакого отношения, как страница отображается, но она имеет огромное влияние на читаемость кода.Стандартная процедура заключается в абзаце одну вкладку (или несколько пробелов), когда вы начинаете новый элемент, который является дочерним элементом теги над ним.Затем вернуться в закладку, когда вы закрываете, что element.
Правила отступа далеко не высечено в камне, не стесняйтесь придумать свою собственную систему.Но я рекомендую быть последовательным с тем, что вы выбираете.Красиво отступом разметки проходит долгий путь в украшении вашего кода и делает его легким для чтения и прыгать вокруг in.
Ресурсы:
4.Держите CSS и JavaScript external
У нас есть CSS, который пробрался в нашу < head> раздел.Это тяжкий фола, потому что она не только грязная наша разметка, но она может применяться только к этой одной HTML-страницы.Поддержание вашей CSS-файлов отдельно означает, что будущие страницы могут ссылаться на них и использовать тот же код, поэтому изменение дизайна на несколько страниц становится easy.
Это могло произойти как “ быстрый fix” в какой-то момент, что вполне объяснимо и происходит со всеми нами, но let’ S получаем, что переехала в более подходящее место во внешнем файле.Существует не наличие в нашей голове раздел, но то же самое касается that.
5.Гнезда свои метки properly
Названии нашего сайта, “ My Cat сайта, ” правильно внутрь < h1> теги, которые имеет смысл.И, как в норме, название является ссылкой на главную страницу.Тем не менее, якорь ссылки, < a>, обертывания теги заголовков.Easy ошибку.Большинство браузеров справиться с этим штрафом, но технически it’ SA нет-нет.Якорь ссылке “ inline” элемент, и заголовок теги “ block” элементов.Блоки shouldn’ T зайти внутрь встроенных элементов.It’ ы, как пересечение потоков в охотников за привидениями.It’ просто не очень хороший idea.
6.Уберите ненужные divs
I don’ знаю, кто первым придумал это, но я люблю термин “ divitis, ” который относится к злоупотреблению дивы в HTML разметку.Иногда во время учебного этапа Веб-дизайн, люди узнают, как обернуть элементы в DIV, чтобы они могли предназначаться для них с CSS и применить стиль.Это приводит к распространению DIV элемента и их использованияслишком либерально к ненужным places.
В нашем примере, мы имеем дел (“ topNav”), который описывает неупорядоченный список (“ bigBarNavigation”).Обе дивы и неупорядоченные списки являются элементами уровня блока.Там действительно нет необходимости ни за < ul> быть завернуты в дел;., Что вы можете делать с этим дел можно сделать с помощью < ul>
Ресурсы:
< ...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров