Книга для SEO-оптимизаторов и тех, кто хочет ими стать.

Бондарев Сергей

<s>старая цена</s> – для старой информации, чтобы не удалять с сайта.

<ins>Новая версия</ins> – для выделения новой версии контента.

_{1_текст} – нижний индекс написания.

^{1^текст} – верхний индекс написания.

<ul><li> – элемент</li></ul> – списки маркированные.

<ol><li>1. элемент</li></ol> – списки нумерованные.

<blockquote>Текст</blockquote> – заметка или комментарий к абзацу от автора. Полезная информация, атрибут авторства site.

<abbr title=””> <abbr> – аббревиатуры и их расшифровка, редко используется.

<address>Текст</address> – для информации об авторе или прописывания адреса.

<samp>Текст</samp> – для вывода контента, кодов программ, стилей и пр. Выглядит красиво.

<kbd>Текст</kbd> – схожий с samp, пишет набираемый на клавиатуре текст моноширинным шрифтом.

Таблицы

Таблицы – довольно сложная и в то же время интересная тема. По сей день встречаются сайты, использующие внутреннюю табличную верстку. Важно понимать основы создания таблиц и уметь их правильно читать, чтобы успешно редактировать и развивать сайт.

<table><tr><td></td></tr></table> – таблицы. В них также встречаются дополнительные теги для форматирования и структурирования информации.

<tr></tr> – строка в таблице.

<th></th> – заглавная ячейка таблицы.

<td></td> – столбец или ячейка таблицы.

Сложности в форматировании таблиц:

<thead></thead> – тег для хранения одной или нескольких строк в шапке таблицы. Может быть только один в таблице.

<tbody></tbody> – тело таблицы, хранит основную информацию из строк и столбцов.

<tfoot></tfoot> – тег для хранения одной или нескольких строк внизу таблицы, подвал.

Можно обойтись без сложностей, для шапки задать свой стиль, для тела таблицы – свой, подвал тоже выделить.

Важные атрибуты таблиц:

colspan=" " – объединяет определенное количество ячеек.

rowspan = " " – объединяет несколько строк в одну.

Прочие полезные атрибуты:

cellspacing = " " – внешний отступ ячеек друг от друга в px.

cellpadding = " " – внутренний отступ от содержимого до границ ячеек в px.

border = " " – рамка для таблицы, ее толщина.

width = " " – ширина в px или % таблицы. Рекомендуется %.

height = " " – высота в px или % таблицы. Рекомендуется %. 10

Универсальные атрибуты для тегов

10

Внимание, большинство атрибутов без проблем заменяются стилями. Автор не призывает использовать атрибуты html. Но иногда это очень удобно!

Универсальные атрибуты можно задать практически любому тегу и контенту на странице, чтобы повысить его интерактивность.

title = " " – подсказка при наведении на элемент. Используется для определений, пояснений внутри страницы.

dir = " " – направление написания текста, слева направо или справа налево.

contenteditable="true | false" – дает возможность пользователям изменять текст или элемент текста.

align = " center | left |right | justify" – выравнивание текста по центру, левому/правому краю, по всей ширине.

class = " " – атрибут для подключения стилей CSS. Задаем class.

id = " " – атрибут для подключения стилей CSS. Задаем id.

style = " " – атрибут для прописывания стилей прямо в теге.

hidden = "hidden " – атрибут скрывает элемент от пользователей, но тот при этом остается на странице. Не очень часто используется.

spellcheck = "true | false " – указывает браузеру пользователя на необходимость проверки грамматики.

Изображения

<img src=" "/> – тег добавления изображений.

alt = " " – описание изображения.

title = " " – заголовок картинки, выводящийся при наведении на нее.

width = " " – ширина изображения, лучше задавать в процентах.

height = " " – высота изображения, лучше задавать в процентах.

hspace = " " – отступ от картинки по вертикали.

vspace = " " – отступ от картинки по горизонтали.

lowsrc = " " – адрес изображения низкого качества, для мобильной версии.

longdesc ="url" – путь к длинному описанию изображения. Обычно используется на фотостоках.

usermap = "#название навигации" – тег отвечает за формирования карты изображения. В некотором смысле так работают google maps, сайты погоды и некоторые другие проекты.

Пример:

<map name="Navigation">

<area shape="poly" coords="113,24,211,24, 233,0,137,0" href="#" alt="Информация"> </map>

Чего только не встретишь в рамках

HTML

! Автор не призывает использовать все перечисленные теги. Но если они вам понадобятся, вы сможете вспомнить об их существовании.

Ссылки

<a href = "url">text</a> – так задается простая гиперссылка в тексте. Она может быть абсолютнойили относительной /url.

title = " " – заголовок ссылки при наведении на нее.

alt = "текст" – описание ссылки, полезно для продвижения, но не обязательно.

rel = "follow" – индексирует ссылку, вес передается.

Конец ознакомительного фрагмента.