Сайк Павел
На что похож чистый 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"><span>Главная</span></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/nu — проверяем HTML и исправляем ошибки кода. CSS проверять CSS не стоит, так как много не проходят кроссбраузерные стили.
Не испольузем заголовки hX в названиях блоков.
Не используем заголовки в блоках, которые не являются частью статьи или материала. Неправильно:
<div class="block"> <h3>Название блока.</h3> <div>Содержимое</div> </div>
Правильно:
<div class="block"> <div class="title">Название блока.</div> <div>Содержимое</div> </div>
У вас есть задачи?
Оказываем услуги по поддержке, сопровождению и продвижению сайта, которые включают в себя: дизайн, верстку, программирование, контекстная реклама и таргентинг, продвижение, работа с контентом.
Если у вас возникли какие-либо вопросы, предложения, либо вы желаете оформить заявку на заказ какой-либо услуги, заполните форму и отправьте нам сообщение.
Комментарии
Тоесть ошибки, возникающие при проверке сайта в validator.w3.orgОтветить