ЗАУВАЖЕННЯ: На цій сторінці приведено далеко не повний перелік наявних тегів. Ми пропонуємо вам завантажити Перелік тегів у алфавітному порядку.
1.2. Основні теги
Мова HTML складається з тегів. Теги − це ті самі цеглинки, з яких побудована кожна веб-сторінка. З деякими тегами та їх записом ви вже знайомі. На попередній сторінці ви познайомились із тегами структури документу та кількома тегами розмітки веб-сторінки.
Всі теги можна розділити на парні і одиночні. Кожен парний тег складається з двох частин: відкриваючого тегу і закриваючого. Усередині закриваючого тегу використовується символ /, наприклад:
<p> Абзац </p>
Теги можуть мати атрибути − властивості елементів, які дають додаткові можливості форматування. Деякі теги використовуються тільки з атрибутами. Найбільш яскравий приклад − тег <img>, який вставляє на сторінку зображення. Для нього обов'язково потрібно вказувати атрибут src, який задає адресу картинки (інакше браузер не зможе завантажити її).
У загальному випадку тег записується наступним чином:
<nobr>…</nobr> − забороняє перенос тексту на інший рядок;
<wbr>…</wbr> − дозволяє розривати довгі слова (наприклад, при виведенні довгих медичних термінів);
<!- - … - -> − тег коментарів; розміщений в ньому текст не відображається на web-сторінці.
Основні теги форматування тексту та елементів дизайну
<hn>…</hn> − керує розміром символів в заголовках (1≤n≤6); зі збільшенням n розмір шрифту зменшується.
<big>...</big> − збільшує розмір шрифту на 10% у порівнянні з базовим.
<small>…</small> − зменшує розмір шрифту на 10% у порівнянні з базовим.
<pre>…</pre> − позначає фрагмент тексту, форматування якого здійснено наперед; зручно використовувати при виведенні на екран текстів програм на мовах програмування, або при виведенні тексту, який містить спеціальні символи; в деяких випадках замінює тег <nobr>…</nobr>.
<code>…</code> − позначає фрагмент тексту усередині рядка, який вдповідає елементам коду.
<hr> − непарний тег горизонтальної лінії; може бути засобом організації тексту і дизайну.
Атрибути тега <hr>:
align=left (right, center) − вирівнювання лінії на сторінці;
sіze=n − товщина лінії в пікселях (1≤n≤175); за замовчуванням 2 пікселі;
color="колір" − колір лінії;
width=n% − ширина лінії у відсотках до ширини екрану;
noshade − атрибут без параметра; показує об'ємні лінії, встановлюється за замовчуванням;
shade − атрибут без параметра; показує контур лінії; якщо заданий колір, то атрибут не працює.
<left> ... </left> − вирівнювання тексту по лівому краю сторінки.
<right> ... </right> − вирівнювання тексту по правому краю сторінки.
<center> ... <center> − вирівнювання тексту по середині сторінки.
Наведені вище теги вирівнювання дещо застаріли. Для цього краще використовувати відповідні властивості CSS.
<b> … </b> − виділення напівжирним шрифтом.
<i> … </i> − виділення курсивом.
Слід зазаначити, що теги <strong> … </strong> і <em> … </em> також роблять текст, який в них заключений, напівжирним і курсивним, відповідно. Але, окрім цього, вони несуть і змістовне навантаження − текст, який розміщений в них, важливий. А якщо текст необхідно виділити лише візуально, то використовуть теги <b> та <i>.
<sub> … </sub> − нижні індекси.
<sup> … </sup> − верхні індекси.
<s> … </s> − закреслений текст.
<u> … </u> − підкреслений текст.
<del> … </del> − виділяє текст (закресленням), який необхідно позначити як видалений (застарілий).
<ins> … </ins> − виділяє текст (підкресленням), який необхідно позначити як вставлений.
<abbr> ... </abbr> − використовується для виділення абревіатур.
<acronym> ... </acronym> − використовується при виділенні акронімів (наприклад: і т.д.; і т.п.).
<address> ... </address> − виділення контактної інформації − електронної або поштової адреси, телефону і тощо.
Додаткові можливості форматування
<blockquote> … </blockquote> − позначає цитату; текст цитати розташовується з відступом від лівого краю вікна і може використовуватися в самих різних випадках. Якщо необхідно, лапки задаються явним чином.
Атрибути:
site=URL − адреса джерела цитати, якщо вона з мережі Інтернет.
<q>…</q> − використовується для виділення цитати усередині абзацу.
<cite>…</cite> - використовується для того, щоб виділити джерело цитати, назву твору або автора.
<marquee> ... </marquee> − рядок символів, який біжить.
Атрибути:
bgcolor="колір" − колір фону;
height=n − висота рядка в пікселях (k% − висота рядка у відсотках);
align=... − вирівнювання (top − по верхньому краю, middle − по центру, bottom − по нижньому краю);
direction=... − напрям руху рядка (left, right);
behavior=... − поведінка рядка (scroll − безперервний рух, slide − вийшов і зупинився, alternate − реверс);
loop=... − кількість проходів рядка (значення: число);
scrollamount=... − швидкість руху рядка (значення: число);
scrolldelay=... − часовий інтервал між кроками в мілісекундах (значення: число); рядок може рухатися ривками.
Теги для розмітки сторінки
<header>…</header> − визначає шапку сайту.
<nav>…</nav> − призначений для створення навігаційних меню.
<aside>…</aside> − призначений для створення бокових панелей (сайдбарів).
<article>…</article> − допомогає створювати нові матеріали на сторінці, додавати контент до сторінки.
<section>…</section> − задає розділ документа, може застосовуватися для блоку новин, контактної інформації, глав тексту, вкладок в діалоговому вікні тощо; зазвичай містить заголовок. Допускається вкладати один тег <section> всередину іншого.
<footer>…</footer> − визначає нижню частину сторінки, тобто підвал.
