Что делает код HTML красивым? Вот небольшой список того, что говорит о мастерстве кодера:
- Объявлен Doctype. Для правильного отображения браузерами вашей страницы.
- Аккуратная секция head. Прописаны метатеги, присутствует
title, объявлена кодировка, добавлен файл со стилями, включая версию для печати (желательно для других устройств тоже). Внешние файлы (стили и скрипты) имеют отдельные папки «css» и «scripts». - Тегу body прописан id. Позволяет создавать стили применительно к отдельной странице.
- Семантическое меню. Для меню используются неупорядоченные списки.
- Основной внешний div. Обернув все содержимое на каждой странице в один
divпозволит легко контролировать ширину страницы. - Div вместо table. Вместо таблиц используются
div, таблицы используются для представления табличных данных. Присутствуют такие свойсива как caption, th и т.д. - Используются семантические элементы и атрибуты по их прямому назначению.
- Семантические class и id. Используются семантически-правильные названия классов и значения
id(напримерid=”news-box”, а неid=”left-green-block”). - В начале основное содержимое. Наиболее важная информация (новости, события) находится на первом месте в HTML.
- Подключаемые повторяющиеся элементы. Элементы повторяющиеся на каждой странице, подгружаются автоматически, например с помощью PHP.
- Читабельный код. Код состоит из нескольких секций и имеет вложенную структуру.
- У тегов img проставлены атрибуты
altиtitle. - Никаких инлайновых стилей. HTML сфокусирован на структуре и содержимом, а не на оформлении! Все стили прописаны отдельно.
- Оптимальный HTML. HTML имеет оптимальный размер и не перегружен лишним кодом.
Loading ...
Спасибо, отличная статья. Понравилась новая для меня (хоть и достатчочно очевидная) идея использования id для body.
Не согласен с использованием id у body. Разные стили для разных страниц должны быть реализованы средствами CMS.
У img тэгов обязательны атрибуты alt, но зачем title? Title нужно прописывать, например, для abbr или acronym.
Инлайновые стили, считаю, допустимы в случае редактирования контента. Например, чем-то ж надо заменить атрибут align. Я имею ввиду если использовать XHTML strict.
А вообще, спасибо за статью.
Я тоже не очень люблю инлайновые стили, но зато часто сталкиваюсь с ситуациями когда нужно использовать много разных по ширине строчек ввода текста (input type=»text»), для которых я задаю стиль в файле css, а вот их ширину я прописываю уже в самих документах: style=»width: 200px»… итд. Что же мне для каждого нового размера поля создавать отдельный класс? мне спокойно хватает инлайн стиля =)
Nikita, это вы ерунжу какую-то сказали про cms.
По статье:
- предпочитаю использовать class для боди.
- основной внешний div, иногда выше крыши body
- семантические class и id это вы прямо что-то новое изобрели, семантика не имет отношения к именованию =)
- в начале основное содержимое. сомнительная красота. иногда это трудно реализовать.
- подключаемые повторяющиеся элементы. это вообще выходит за рамки верстки
- никаких инлайновых стилей. в лэйауте да, но в сгенеренном визивигом cms контенте никак пока без этого…
- оптимальный HTML. снова что-то изобрели новое.
Но за статью всеравно спасибо!
Недавно надо было сделать небольшой статичный сайт без cms, где на каждой странице был свой логотип. Там id у body как раз пригодился.
Title можно использовать для дополнительной информации.
Конечно инлайновые стили допустимы, но нужно стремится к минимуму в их использовании. Свойство text-align – альтернатива align.
я бы добавил, что код должен проходить валидацию.
Под семантическими class и id я имел ввиду такие значения, которые передают в названии содержание элемента, а не описывают его визуальные признаки. Например class=»main_content», а не class=»center_redbox». Ведь положение и цвет возможно захочется поменять.
Валидность это само собой.
Nikita,
например title=»" у картинок пишется для несознательных браузеров, чтобы не всплывало его alt при наведении мыши.
А если совсем не писать ни alt, ни title? Чем это плохо?
Если не указывать alt то, если в браузере отключена опция загрузки (показа) изображений вместо них не появится альтернативный текст, а пользователи с ограниченными возможностями, просматривающие страницы с помощью специальных устройств не получат никакой информации. Если же не указывать title, то как уже было отмечено выше в некоторых браузерах будет выводится значение alt.
Alex, если валидность само собой, то половина пунктов тоже само собой. А остальная половина не всегда нужна или сомнительна:
title выводится только в ie, и если я для него написал экспрешен, который это лечит, я плохой верстальщик?
Zigzag, аргументируйте. Не умеете настраивать разные шаблоны в cms? Если лепить весь стиль в один файл, разделяя по id для body, неужели это будет удобнее, чем подключить дополнительный файл с дополнениями для другого шаблона?
Олег, это мешает? Влияет на юзабилити? И причём здесь title и «красивый HTML»?
Согласен со всеми пунктами!
Сам при вёрстке стараюсь соблюдать эти правила.
Единственное, не могу перейти на дивную вёрстку. Предпочитаю табличную.
— основной внешний div: (несемантично!) body как раз и есть этот див
— title: вылазит только в IE, и стабильно решается экспрешном
— никаких инлайновых стилей: не согласен, когда верстаешь сайт вместе с контентом, без них не обойтись; не всем же сайтам нужна СиЭмЭсс
— прописаны метатеги: не припомню, какие еще остались полезными (за исключением упомянутой кодировки)?
За исключением перечисленного, согласен очень сильно
Большое спасибо, буду оценивать соискателей по вашему списку…
[...] Дальше [...]
[...] скорее пример того как делать не надо. Как я уже раньше говорил названия id и class должны говорить о содержимом, а не о [...]
>HTML сфокусирован на структуре и содержимом, а не на оформлении! Все стили прописаны отдельно.
Ой, а у меня стили прямо в HTML прописаны. Это очень плохо?
Елена, никто конечно не запрещает использовать инлайновые стили, но это сводит практически все преимущество css на нет. Я их использую только если я точно знаю что это необходимо только в данном месте и больше нигде. Если же вы прописываете одни и теже стили хотя бы два раза то стоит уже задуматься…
>> Объявлен Doctype. Для правильного отображения браузерами вашей страницы.
а как же quirks mode?
>> Прописаны метатеги, присутствует title __объявлена кодировка__
Спорно. Когда-то даже считалось признаком дурного тона. Обычно кодировка в метатегах нужна для оффлайногого просмотра html, для онлайного лучше пользоваться заголовками сервера (через php или russian apache).
>> Семантическое меню. Для меню используются неупорядоченные списки.
Согласен, непонятно только причем здесь термин «семантика» — просто список подходит по смыслу для перечней элементов. И вообще, слижком часто пестрит термин «семантика», надо искать синонимы -)
>> В начале основное содержимое. Наиболее важная информация (новости, события) находится на первом месте в HTML.
Это не к гипертексту относится, а уже к структуризации информации. Кстати, в этом перечне довольно много путанницы, причем, к примеру, подключение повторяющихся блоков к ХТМЛ? (это работа не верстальщика а программиста).
Про остальное — эти правила не могут носить декларативный характер, иногда контейнер нужен, иногда — нет, кто-то проекты верстает на div’ах, а кто-то — обходится таблицами (единого рецепта быть не может, потому что ни css ни таблицы не создавались для позиционирования элементов интерфейса. Сравните, например, с языком XUL для mozill’оподобных браузеров). Про id в body — тоже частный случай.
(не по теме) Когда-то, да и сейчас, в общем-то, великие дизайнеры линчевали за отсутствие явного указания цвета фона на страницах и за «нерусские» «кавычки»
. А за сайт – спасибо =).
Тегу body прописан id. Позволяет создавать стили применительно к отдельной странице.
Редко пользуюсь этим приёмом. Не универсально! Для большинства программистов будет проблема создать новый шаблон, в котором используются аналогичные блоки из других шаблонов…
Div вместо table. Вместо таблиц используются div, таблицы используются для представления табличных данных. Присутствуют такие свойсива как caption, th и т.д.
Сколько же ещё верстальщики будут поддерживать войну между блоками и таблицами?! Никто ни разу не видел красивую табличную вёрстку и ужасную блочную?
Никаких инлайновых стилей. HTML сфокусирован на структуре и содержимом, а не на оформлении! Все стили прописаны отдельно.
Я бы переформулировал этот пункт так: стремиться использовать как можно меньше инлайновых стилей. Как минимум, тем, кто использует визивиг на сайте — без них точно не обойтись.
И ещё…
Объявлен Doctype. Для правильного отображения браузерами вашей страницы.
Думаю, что это делает код не столько красивым, сколько правильным
Спасибо всем за комментарии. Всегда интересно узнать, что другие думают про это.
[...] Как выглядит красивый HTML? Что делает код HTML красивым? Вот небольшой список того, что говорит о мастерстве кодера… [...]
Nikita, ты просто лох в программировании. Тебе только CMS и юзать, как максимум. Чего не скажешь о авторе этой статьи и вообще о сайте – все написано отлично. На 100% солидарен с автором.
Всем: Красивый и правильный – это одно и то же. Каждому хорошему программисту именно правильный код является красивым. Это не просто текст какой-то хорошо отформатированный – это код. умело составленный код.
«Читабельный код. Код состоит из нескольких секций и имеет вложенную структуру.»
ИМХО полый бред.
Для кого делать читабельную структуру? Для посетителей? Если для себя и разработчников – то да, если для посетителей, то зачем? Посетителям нужен результат. Просто вся читабельность рушится при использовании оптимизаторо (взгляните на коды гугла).
Ридее, именно для себя и возможно для тех кто после вас будет код редактировать.
Точно также ширину можно задать тэгу body, а фон – элементу html. И не нужен никакой лишний div с неясной семантикой.
Честно говоря, это уже детали реализации, которые к самому HTML-коду имеют непервостепенное отношение.
Народ просто помешался на div
При использовании колоночной верстки зачастую имеет смысл верстать не дивами, а списками – все зависит от конкретных случаев. В зависимости от смысловой (семантической) нагрузки.
Можно взять лабуду, которую генерирует M$ Word (будь он не к ночи помянут) при сохранении документа в HTML, и всё, что находится между открывающим и закрывающим тэгом <html> поместить в блок <![CDATA[ ... ]]>. В результате код будет валидироваться W3C-валидатором, только толку-то от этого? Не нужно зацикливаться на валидности кода… Стремиться – да, но без фанатизма. А то тэга <noindex> в XHTML тоже нет
Оптимальный код – это код когда ты в нем можешь сам с легкостью разобраться, а также любой другой человек из команды.
+ я считаю что лучше верстать на дивах
Добрый день, посоветуйте пожалуста сайт или софт, который может красиво сформулировать html и javascript. Тоесть есть уже готовый html, javascript код неободимо его сделать «красивым».
Пример, сейчас:
***
***
***
***
Нужно:
***
***
***
***
Дмитрий, попробуйте этот http://www.pseltd.com/xhtml_formatter.aspx. Да и в любом уважающем себя редакторе дожена быть подобная функция на мой взгляд.