Найдите ответ и попробуйте пример

Справочник HTML

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

<a>

Тег <a>: ссылки и переходы

Как связать страницы, перейти к разделу документа и написать понятный текст ссылки.

<img>

Тег <img>: изображения на странице

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

<p>

Тег <p>: абзацы текста

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

<h1>

Теги <h1>–<h6>: заголовки и иерархия

Как построить структуру статьи с заголовками, понятную читателю и вспомогательным технологиям.

<div>

Тег <div>: универсальный контейнер

Когда нужен div, как объединять элементы и когда лучше выбрать смысловой тег.

<span>

Тег <span>: оформление части строки

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

<main>

Тег <main>: основное содержимое

Как отделить основную часть страницы от повторяющегося меню и подвала.

Тег <section>: тематический раздел

Когда использовать section и почему разделу обычно нужен заголовок.

Тег <article>: самостоятельный материал

Как обозначить публикацию или карточку, которая сохраняет смысл отдельно от страницы.

<nav>

Тег <nav>: навигация по сайту

Как разметить основное меню, хлебные крошки и навигацию по разделам.

Тег <header>: шапка страницы и материала

Как использовать header на уровне сайта и внутри отдельной статьи.

Тег <footer>: подвал и метаданные

Что размещать в footer и чем подвал статьи отличается от подвала сайта.

<ul>

Тег <ul>: маркированные списки

Как группировать равноправные пункты и сохранять их смысл при изменении оформления.

<ol>

Тег <ol>: шаги и нумерация

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

<li>

Тег <li>: пункты списка

Какие элементы можно помещать в пункт списка и как делать вложенные уровни.

Тег <button>: доступные кнопки

Как выбирать тип кнопки и почему действие лучше реализовывать настоящим button.

<form>

Тег <form>: сбор и отправка данных

Как связать поля, выбрать метод отправки и отделить интерфейс от обработки данных.

<input>

Тег <input>: поля ввода

Как подобрать тип input, связать поле с подписью и включить полезное автозаполнение.

<label>

Тег <label>: подписи к полям

Как сделать понятное имя поля и увеличить удобную область клика.

Тег <textarea>: многострочный текст

Как добавить поле сообщения, задать начальное значение и сохранить удобство редактирования.

Тег <select>: выбор из вариантов

Как создать список вариантов с понятными значениями и видимой подписью.

<table>

Тег <table>: табличные данные

Как разметить строки, заголовки и подпись таблицы без использования таблиц для макета.

Тег <details>: раскрывающиеся блоки

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

Тег <figure>: пример с подписью

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

<link>

Тег <link>: подключение CSS

Как подключить таблицу стилей и чем link отличается от обычной ссылки a.

<meta>

Тег <meta>: кодировка и метаданные

Как задать UTF-8, мобильный viewport и краткое описание документа.

<style>

Тег <style>: CSS внутри документа

Когда удобно писать CSS прямо в HTML и как перенести стили в отдельный файл.

<html>

Тег <html>: каркас документа

Из каких частей состоит минимальная страница и зачем указывать язык документа.

Тег <strong>: важность текста

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

<em>

Тег <em>: смысловое ударение

Как выделять слова, меняющие интонацию, и когда курсив лучше задать через CSS.