На что похож чистый HTML код?
За написании этой статьи хочу сказать спасибо одному замечательночу человеку из мира Joomla. Звать его Beliyadmin. Как-то в разговоре, обсуждали мой очередной сайт (верстку), короче искали баги. В какой-то момент вспомнили о валидности HTML кода.
Ведь действительно, если глянуть на многие коды исходные код страниц - становится очень страшно. Код HTML бывает такой страшный.
Не зря умные люди придумали CSS для удобства и вообще для упрощении множества процедур, особенно при создании сайтов, да хотя бы простых статей при наполнении тех же сайтов.
Давайте попробуем разоберемся, что да, как что бы было очень красиво, валидно и понятно. Поехали.
DOCTYPE
Выглядит немного страшно, но DOCTYPES очень важен. Тип не только позволяет пройти код страницы валидацию, но так же указывает браузеру как рендерить вашу страницу.
Заголовок страницы <head>
Здесь обязательно надо указывать тег <Title> с указанием названия страницы.Также в head указывается исходная кодировка, подключаемые стили CSS, также подключаемые скрипты. Скрипты и CSS находятся в соответствующих папках.
"Идентифицируем" <body>
Использованием ID для тела сайта, позволяет использовать уникальные шаблоны и стили для каждой страницы, если конечно используете постраничную верстку. На пример, вы можете задать для каждого id свое оформление заголовков h2 с использованием дочерних селекторов: #one h2 или #two h2.
Семантически чистое меню
Вы его видели раньше и не раз, и не только у меня на сайте, и придется еще раз увидить. Использование мписка для меню, это дает неограниченные возможности по контролю над ними, конечно стилевому.
<ul id="menu">
<li><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, будет с вами счастье.
Комментарии
Тоесть ошибки, возникающие при проверке сайта в validator.w3.org Ответить
В голой Joomla валидацию не проходят только ссылки, как я понимаю из-за недопустимых символов в них, чтобы исправить нужно поставить SEF и тогда сайт будет проходить валидацию ( как у меня на сайте). Но множество сторонних компонентов к сожалению не ВАЛИДНЫ. Особенно типа DatsoGalery или Remository. Как в раз работую над первой, валидность есть. Ответить