HTML — Довідник

35 елементів. Дивіться також довідник атрибутів.

Документ

<head>

Тег <head>

Призначення тегу <head>: контейнер для метаданих, title, стилів і скриптів.

<title>

Тег <title>

Призначення тегу <title>: назва вкладки браузера, заголовок у результатах пошуку.

<body>

Тег <body>

Призначення тегу <body>: контейнер усього видимого вмісту сторінки.

Метадані

<meta>

Тег <meta>

charset, name/content, property та http-equiv у тегу <meta> з прикладами.

<link>

Тег <link>

Атрибути rel, href та as тегу <link>: стилі, favicon, preload.

Структура

Тег <header>

Призначення тегу <header>: вступний вміст для сторінки або секції (логотип, навігація, заголовок).

Тег <footer>

Призначення тегу <footer>: завершальний вміст сторінки або секції (копірайт, посилання, контакти).

<nav>

Тег <nav>

Призначення тегу <nav>: групування основних навігаційних посилань сторінки.

<main>

Тег <main>

Призначення тегу <main>: унікальний основний вміст сторінки, без повторюваних елементів.

Тег <section>

Призначення тегу <section>: групування тематично пов'язаного вмісту, зазвичай із власним заголовком.

Тег <article>

Призначення тегу <article>: самодостатній блок вмісту (стаття, коментар, картка товару).

<aside>

Тег <aside>

Призначення тегу <aside>: контент, дотично пов'язаний з основним (сайдбар, посилання, реклама).

Текст

<ul>

Тег <ul>

Призначення тегу <ul>: список елементів без порядку, кожен пункт — <li>.

<ol>

Тег <ol>

Атрибути start, reversed, type тегу <ol> для нумерованих списків.

<li>

Тег <li>

Атрибут value тегу <li> усередині нумерованого списку.

<div>

Тег <div>

Призначення тегу <div>: контейнер без власного семантичного значення, для CSS-стилізації та групування.

Інлайн-семантика

<a>

Тег <a>

Атрибути href, target, rel та download тегу <a> з прикладами використання.

<span>

Тег <span>

Призначення тегу <span>: інлайн-контейнер без семантики, для стилізації частини тексту.

Тег <strong>

Семантична (не лише візуальна) важливість тексту через тег <strong>.

<em>

Тег <em>

Семантичний наголос (stress emphasis) на частині тексту через тег <em>.

<code>

Тег <code>

Позначення інлайнового фрагмента коду тегом <code>.

Медіа

<img>

Тег <img>

Атрибути src, alt, loading та srcset тегу <img> з прикладами.

Тег <picture>

Використання <picture> з кількома source для art direction та форматів зображень.

<video>

Тег <video>

Атрибути controls, autoplay, loop, muted, poster тегу <video>.

Вбудований контент

Тег <iframe>

Атрибути src, sandbox та allow тегу <iframe> з поясненням безпеки.

Таблиці

<table>

Тег <table>

Структура таблиці: thead, tbody, tr, th, td. Приклад та практичні нюанси.

Форми

<form>

Тег <form>

Атрибути action, method та enctype тегу <form> з прикладом.

<input>

Тег <input>

Типи та атрибути тегу <input>: type, name, value, required, pattern.

Тег <button>

Атрибут type тегу <button>: submit, button, reset. Різниця та приклади.

<label>

Тег <label>

Атрибут for тегу <label> для зв'язку підпису з input.

Тег <select>

Атрибути multiple, size, required тегу <select> з опціями option.

Тег <textarea>

Атрибути rows, cols, maxlength тегу <textarea> для багаторядкового тексту.

Інтерактивні

Тег <details>

Атрибут open тегу <details> та зв'язок із summary для нативного акордеону.

Тег <summary>

Призначення тегу <summary>: клікабельний заголовок для розгортання details.

Скрипти

Тег <script>

Атрибути src, type, async, defer тегу <script> та різниця між ними.