Супершпаргалка по верстке для новичков: все основные 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-теги, вы захотели глубже изучить верстку, ознакомьтесь с небольшой подборкой наших материалов: