Как выглядит красивый HTML код?

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

Иногда интересно обратить внимание на то, всегда ли в красивом внешне вебсайте использован "красивый" html код, т.е. точный, структурированный, безошибочный. Html код это своеобразное искусство. Он не такой развитый и многообразный, как динамический язык, и тем не менее может быть написан довольно изящно и мастерски.

Вот список тех особенностей с помощью которых можно определить написан ли код с мастерством или нет.

1. DOCTYPE, определенный должным образом. Эта строка позволяет не только определить ваш код, но и "говорит" браузеру о том, как следует отобразить вашу страницу.

2. Опрятный раздел в тегах <head>
Заголовок установлен. Кодировка объявлена. Таблицы стилей подключены. Скрипты подключены, а не написаны полностью.

3. Присвоение ID вашему документу позволяет создавать свойства CSS, которые уникальны для каждой страницы. Например, вы можете захотеть, чтобы Ваш <h2> тэг выглядел по-особенному, к примеру, на домашней странице. В таблице стилей CSS вы можете написать: #home h2 {}, чтобы достигнуть этого.

4. Чистое меню. Вы, наверно, часто встречались с тем, что в качестве меню используются списки. Это очень удобно, т.к. дает вам возможность контролировать его.

<ul id="menu">

<li><a href="index.php">Home</a></li>

<li><a href="about.php">About</a></li>

<li><a href="contact.php">Contact</a></li>

</ul>

5. Заключение всего содержания страницы в главный тег <div>. Этот пункт даст вам возможность все контролировать. То есть вы сможете установить максимальную и минимальную ширину страницы.

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

7. "Включение" элементов сайта. Большинство элементов сайта повторяются на каждой странице, значит их нужно включать, с помощью php-команды include.

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

9. Правильные заключительные теги. Исключите заключительные теги в непарных тегах, и проверьте, чтобы парные теги были закрыты.

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

11. Содержание, Содержание, Содержание. Не забудьте выделять содержание в параграфы и заключать их в теги <p>. Не переусердствуйте с тегами <br>, это сырое форматирование.

12. Никаких стилей! Ваш html код должен быть сосредоточен на структуре и содержании, а не на оформлении страницы! Все стили выносите в отдельный файл CSS.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.css-tricks.com
Перевел: Сергей Патин
Урок создан: 26 Февраля 2009
Просмотров: 60616
Правила перепечатки

5 последних уроков рубрики "HTML и DHTML"

^ Наверх ^