Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
8 г. назад

На что похож чистый HTML-код?

За написание этой статьи хочу сказать «спасибо» одному замечательночу человеку из мира Joomla. Звать его Beliyadmin. Как-то в разговоре обсуждали мой очередной сайт (верстку), короче, искали баги. В какой-то момент вспомнили о валидности HTML-кода.

Ведь действительно, если глянуть на многие исходные коды страниц – становится очень страшно. Код HTML бывает такой страшный!

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

Давайте попробуем разоберемся, что да как, чтобы было очень красиво, валидно и понятно. Поехали!

DOCTYPE

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

<!doctype html>

Заголовок страницы <head>

Здесь обязательно надо указывать тег <Title>с указанием названия страницы. Также в <head> указывается исходная кодировка, подключаемые стили CSS, также подключаемые скрипты. Скрипты и CSS находятся в соответствующих папках.

Идентифицируем <body>

Использование ID для тела сайта позволяет использовать уникальные шаблоны и стили для каждой страницы, если, конечно, используете постраничную верстку. Например, вы можете задать для каждого id свое оформление заголовков h2 с использованием дочерних селекторов: #one h2 или #two h2.

Семантически чистое меню

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

<ul id="menu" class="b__menu">
   <li class="active"><a href="index.php">Главная</a></li>
   <li><a href="about.php">О нас</a></li>
   <li><a href="contact.php">Контакты</a></li>
</ul> 

Главный блок DIV для содердимого страницы

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

Важный контент должен быть первым

Будет лучше, если ваш важный контент, такой как новости или приглашения, будет опубликован первым. Если правая или левая колонки содержат в себе навигацию (например, меню), то лучше сделать его как можно ниже.

Подключение активного содержимого

A это было первым, что я сделал, когда создал первый сайт при помощи PHP. Я разбил сайт на 4 логические части, и каждая подгружалась при помощи команды include. Лучше всего будет, если вы подгружаете отдельно верхнее меню, боковые и футер. В таком случае вам будет проще управлять содержимым.

Закрытые теги

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

Иерархия заголовков

Не забываем, что на странице может быть только один заголовок H1. А под ним H2 и H3.

Содержимое, содержимое, содержимое

Это понимают все, надеюсь. Без содержимого сайт – просто пустышка, который стыдно показывать. Текст не забываем оформлять параграфами <p>. Использование переноса <br/> приводит к схлопыванию форматирования. Не всегда красиво. Также на забываем про отступ слева первой строки и отступ снизу у параграфа.

Нет стилям в HTML

В коде страницы не должно быть никакого форматирования, особенно такого как <font>. Держите ваши стили в CSS файлах, и будет вам счастье.

Комментарии

#Aleks_El_Dia04.07.2008 22:42
Неплохо было бы почитать подобную статью но о типичных ошибках валидности в Joomla!
Тоесть ошибки, возникающие при проверке сайта в validator.w3.orgОтветить
#PaLyCH27.03.2016 16:49
В голой Joomla валидацию не проходят только ссылки, как я понимаю из-за недопустимых символов в них, чтобы исправить нужно поставить SEF и тогда сайт будет проходить валидацию ( как у меня на сайте). Но множество сторонних компонентов к сожалению не ВАЛИДНЫ. Особенно типа DatsoGalery или Remository. Как в раз работую над первой, валидность есть Ответить

Добавить комментарий

Наверх