Clean HTML
What pure HTML looks like
Если глянуть на многие исходные коды страниц — становится очень страшно. Код разметки HTML бывает такой страшный!
Не зря умные люди придумали CSS для удобства и вообще для упрощении множества процедур, особенно при создании сайтов, да хотя бы простых статей при наполнении тех же сайтов.
Давайте попробуем разобраться, что да как, чтобы было очень красиво, валидно и понятно. Поехали!
DOCTYPE
Выглядит немного страшно, но DOCTYPE очень важен. Тип не только позволяет пройти коду страницы валидацию, но также указывает браузеру, как рендерить вашу страницу. Рекомендуем использовать:
Заголовок страницы <head>
Здесь обязательно надо указывать тег <Title>с указанием названия страницы. Также в <head> указывается исходная кодировка, подключаемые стили CSS, также подключаемые скрипты. Скрипты и CSS находятся в соответствующих папках.
Идентифицируем <body>
Использование ID для тела сайта позволяет использовать уникальные шаблоны и стили для каждой страницы, если, конечно, используете постраничную верстку. Например, вы можете задать для каждого id свое оформление заголовков h2 с использованием дочерних селекторов: #one h2 или #two h2.
Семантически чистое меню
Вы его видели раньше и не раз, и не только у меня на сайте, и придется еще раз увидеть. Использование списка для меню дает неограниченные возможности по контролю над ними, и конечно, стилевому контролю.
Главный блок DIV для содержимого страницы
Использование блока DIV для содержимого даст вам неограниченные возможности по управлению страницей, особенно это касается «эластичных» страниц. Также можно для блока задать минимальную ширину и высоту, об этом уже писал.
Важный контент должен быть первым
Будет лучше, если ваш важный контент, такой как новости или приглашения, будет опубликован первым. Если правая или левая колонки содержат в себе навигацию (например, меню), то лучше сделать его как можно ниже.
Подключение активного содержимого
A это было первым, что я сделал, когда создал первый сайт при помощи PHP. Я разбил сайт на 4 логические части, и каждая подгружалась при помощи команды include. Лучше всего будет, если вы подгружаете отдельно верхнее меню, боковые и футер. В таком случае вам будет проще управлять содержимым.
Закрытые теги
Открыли strong, закрыли strong. Не будьте ленивыми, закрывайте теги, иначе у вас могут возникнуть проблемы с валидностью, да и просто ошибки при отображении в браузерах.
Иерархия заголовков
Не забываем, что на странице может быть только один заголовок H1. А под ним H2 и H3.
Содержимое, содержимое, содержимое
Это понимают все, надеюсь. Без содержимого сайт — просто пустышка, который стыдно показывать. Текст не забываем оформлять параграфами <p>. Использование переноса <br/> приводит к схлопыванию форматирования. Не всегда красиво. Также на забываем про отступ слева первой строки и отступ снизу у параграфа.
Нет стилям в HTML
В коде страницы не должно быть никакого форматирования, особенно такого как <font>. Держите ваши стили в CSS файлах, и будет вам счастье.
