Супершпаргалка по верстке для новичков: все основные HTML-теги

Полное руководство для блогеров и начинающих верстальщиков. Разберем все самые необходимые HTML-теги и примеры их использования.

HTML-теги для форматирования текста

Заголовки

Заголовки подчеркивают особую важность заключенного в них текста. Вы можете использовать теги от <h1> до <h6>. Чем больше порядковый номер заголовка, тем меньше важность и размер текста по умолчанию.

<h1>Самый важный заголовок на странице</h1>
<h2>Чуть менее важный заголовок</h2>
<h6>Тоже заголовок, но почти неважный</h6>

Выравнивание заголовков

Заголовки можно выравнивать на странице, но для этого потребуется щепотка CSS:

<h1 style="text-align:center;">Заголовок выровнен по центру</h1>

Можно также использовать ключевые слова left, right или justify.

Абзацы

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

<p>Один параграф</p>
<p>Другой параграф</p>

Выравнивание абзацев

Все работает точно так же, как для заголовков:

<p style="text-align:center">Текст этого параграфа выровнен по центру</p>

Другие значения: left, right или justify.

Разрыв строки

Вместо абзацев можно использовать разрыв строки. Это позволит перенести текст на новую строку в рамках одного параграфа.

Конец одного предложения.<br>А это предложение начнется с новой строки.

Жирный текст

Установит жирное начертание:

<b>Текст с жирным начертанием</b>

Важный жирный текст

Кроме физического выделения жирным, добавляет семантическое. Выделенный текст будет считаться особенно важным для прочтения и понимания:

<strong>Важный жирный текст</strong>

Курсивный текст

Устанавливает курсивное начертание:

<i>Курсивный текст</i>

Курсивный текст с особой важностью

Выглядит точно так же, как обычный курсив, но добавляет семантическое значение, как будто вы сделали акцент на этом тексте.

<em>Курсивный текст с особой важностью</em>

Подчеркнутый текст

Подчеркивает текст:

<u>Подчеркнутый текст</u>

Перечеркнутый текст

Добавляет эффект перечеркивания:

<s>Перечеркнутый текст</s>

Семейство шрифта

Можно изменить шрифт текста с помощью CSS. Используйте безопасные шрифты или подключите Google fonts.

<span style="font-family: Arial, Helvetica, sans-serif;">Какой-то текст</span>

Размер шрифта

Для указания размера можно использовать px, em или проценты. Вот пример с пикселями:

<span style="font-size:48px;">Очень большой текст</span>

Цвет шрифта

Установите для текста любой HEX-цвет по вашему выбору.

<span style="font-color:#57fd8c;">Приятный зеленый цвет</span>

Выделенный текст

Выделите фрагмент текста с помощью CSS и фонового цвета:

<span style="background-color:#C2F2CA">Выделенный текст</span>

Цитата

Полезно для выделения цитат и важных фрагментов текста.

<blockquote>Весь мир - театр!</blockquote>

HTML-теги для ссылок

Обычные текстовые ссылки

Гиперссылкой можно сделать слово или целый фрагмент текста. Замените текст http://www.yourlink.com на нужный вам адрес:

<a href="http://www.yourlink.com">Текст гиперссылки</a>

Открытие в новой вкладке

Используется для открытия гиперссылки в новой вкладке браузера, а не на текущей странице:

<a href="http://www.yourlink.com" target="_blank">Текст гиперссылки</a>

Ссылка на email-адрес

Открывает почтовую программу на компьютере пользователя для отправки письма по указанному адресу:

<a href="mailto:you@youremailaddress.com">Текст гиперссылки</a>

Ссылка на email с указанием темы письма

Полезно, если вы хотите установить для письма клиента конкретную тему. Вместо пробелов используйте %20:

<a href="mailto:you@youremailaddress.com?subject=Your%20Email%20Subject">Текст гиперссылки</a>

Ссылка-якорь

Позволяет при клике «перепрыгнуть» на определенное место на странице. Ссылка-якорь состоит из двух частей. Первая – непосредственно конечная точка прыжка. Например, это может быть начало поста. Значение атрибута name должно быть уникальным в рамках страницы:

<a name="backtotop"></a>

Вторая – ссылка, клик по которой отправит пользователя в нужное место документа:

<a href="#backtotop">Back to top</a>

Фон

Фон для элементов необходимо указывать в главном CSS-файле сайта или в определенном разделе вашей админ-панели. Если у вас нет такого файла или раздела, вы можете разместить код между тегами <style> и </style> в секции <head> прямо на странице. В большинстве случаев рекомендуется все же создать отдельный внешний CSS-файл.

Фоновый цвет страницы

Смените фон для всей страницы с помощью следующего кода с любым HEX-значением цвета.

body {
  background-color: #c3c3c3;
}

Повторяющееся фоновое изображение

Подберите нужное изображение, которое должно повторяться на странице и используйте его адрес в следующем коде. Конечно, сначала вам потребуется его загрузить на свой сайт.

body {
  background-image:url(https://www.yourwebsite.com/background-image.jpg); 
  background-repeat:repeat;
}

Чтобы изображение повторялось только по вертикали, замените значение repeat на repeat-y. Аналогично для повторения только по горизонтали используйте repeat-x.

Неповторяющееся фоновое изображение

Чтобы изображение отображалось на фоне всего один раз, используйте следующий код:

body {
  background-image:url(https://www.yourwebsite.com/background-image.jpg);
  background-repeat:no-repeat;
}

Неповторяющееся фоновое изображение сверху в центре

Установите фоновую картинку вверху страницы:

body {
  background-image:url(https://www.yourwebsite.com/background-image.jpg);
  background-repeat:no-repeat;
  background-position: top center;
}

Вертикально повторяющееся фоновое изображение сверху в центре

Картинка отобразится наверху страницы и будет вертикально повторяться:

body {
  background-image:url(https://www.yourwebsite.com/background-image.jpg);
  background-repeat:repeat-y;
  background-position: top center;
}

Не забудьте заменить URL-адрес изображения.

Списки

Нумерованный список

Создание упорядоченного списка элементов:

<ol>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ol>

Маркированный список с буллитами

Буллиты заменяют собой цифры:

<ul>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ul>

Маркированный список с другими маркерами

Вид буллита можно изменить. Возможные варианты: circle, square, disc (установлено по умолчанию).

<ul>
  <li style="list-style-type:square">Элемент списка 1</li>
</ul>

Маркированный список с пользовательскими маркерами

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

<ul style="list-style-image:url('https://yourimageurl.com/yourbullet.jpg')">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Специальные символы HTML

Большую таблицу HTML-символов вы можете найти здесь.

Если, узнав базовые HTML-теги, вы захотели глубже изучить верстку, ознакомьтесь с небольшой подборкой наших материалов:

• • Подборка материалов по HTML и CSS
  • 10 способов проверить знания HTML/CSS
  • 10 вопросов, на которые должен ответить каждый, кто знает HTML