Выбор Doctype
Приведем несколько простых рекомендаций по выбору doctype для документа типа text/html.
Документ будет содержать нестандартные теги и/или в разметке будут применяться различные нестандартные ситуации. (Создание подобных страниц - редкостная гадость.)
Doctype можно не указывать
Документ действителен как HTML 4.01 Transitional (может содержать нерекомендуемые(deprecated) элементы разметки) и работает с CSS2 блочной моделью (для совместимости с основанными на Mozilla браузерами это сделает "the full standards mode").
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Документ действителен как HTML 4.01 Strict и работает с CSS2 блочной моделью.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
При использовании XHTML doctype следует помнить, что наличие XML объявления переводит Windows IE 6 в Quirks mode. В чем легко можно убедиться кликнув по тексту ниже.
Клик сюда для проверки состояния браузера
Проверить свой HTML документ можете добавив в него следующий код: <script type="text/javascript">//<![CDATA[ alert('Этот документ браузер будет анализировать как:\n'+document.compatMode); //]]></script>
HTML таблицы, формирование и структуризация контента
Описание
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.
Синтаксис
<table>
<tr>
<td>...</td>
</tr>
</table>
Атрибуты
align - Определяет выравнивание таблицы.
background - Задает фоновый рисунок в таблице.
bgcolor - Цвет фона таблицы.
border - Толщина рамки в пикселах.
bordercolor - Цвет рамки.
cellpadding - Отступ от рамки до содержимого ячейки.
cellspacing - Расстояние между ячейками.
cols - Число колонок в таблице.
frame - Сообщает браузеру, как отображать границы вокруг таблицы.
height - Высота таблицы.
rules - Сообщает браузеру, где отображать границы между ячейками.
summary - Краткое описание таблицы.
Width - Ширина таблицы.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег обязателен.
Новый стандарт HTML5 подразумевает совершенно новый подход к структуре страниц, благодаря которой SEO оптимизация сайта становится менее затратной, а также более легкой и быстрой. Все элементы страницы несут свою смысловую нагрузку и отделены друг от друга, более прозрачна сегментация страницы, для которой используются теги
article, header, footer и sidebar, выделяющие разные блоки. С такой сегментированной страницей легче работать поисковым роботам. Они сразу выделяют основную часть с главной смысловой нагрузкой и пропускают менее значимую информацию в хедере или футере при индексации.
Основной контент страницы размещен в теге article . Здесь находится главная информация, предназначенная для пользователя, которая при правильной разметке HTML 5 – документа будет проиндексирована намного быстрее и правильнее, чем при использовании HTML 4 версии.
Название компании, ее логотип и навигационное меню размещены а теге header , что позволяет поисковым роботам быстрее находить важную информацию и индексировать ее.
Использование тега section способствует улучшению структуризации контента и разбивки страницы на секции, каждая из которых имеет свой подзаголовок. Таким способом структурированный текст будет ранжироваться выше и индексация страницы поисковым роботом значительно облегчится.
Конфиденциальную информацию, личную информацию о копирайтере, социальные кнопки можно найти в теге footer .
Использование тэга nav помогает роботу правильно проиндексировать страницу и дает представление об общей структуре страницы, представляя собой своего рода карту сайта.
HTML. Форматирование текста
Сохранён в отдельный документ
Работа с графикой
Выравнивание текста html-страницы
Атрибут ALIGN тэга <IMG>, принимающий значения top, middle, bottom позволяет задавать вертикальное положение текста относительно границ графического изображения. По умолчанию браузер выравнивает текст по нижней кромке изображения. Если в строке текста включено несколько изображений, то выравнивание может привести к неожиданным эффектам. Следует учесть и тот факт, что если атрибут ALIGN уже был применен для задания параметра обтекания графики текстом, установить признак выравнивания текста относительно графики в пределах конкретной страницы не удастся.
Пример:
HTML-код:
<p> <img src="img/majak.jpg" align="top">Выравнивание по верхней кромке</p> <p> <img src="img/majak.jpg" align="middle">Выравнивание по середине</p> <p> <img src="img/majak.jpg" align="bottom">Выравнивание по нижней кромке</p> |
Отображение в браузере:
Выравнивание по середине Выравнивание по нижней кромке |
Выравнивание
по верхней кромке