Основні HTML теги

Зміст

Розмітка тексту

Розмітка коду

Цитати та визначення

Розриви

Списки

Гіперпосилання

Розмітка тексту

<h1>Заголовок 1 рівня<h1>

<h2>Заголовок 2 рівня<h2>

<h3>Заголовок 3 рівня<h3>

<h4>Заголовок 4 рівня<h4>

<h5>Заголовок 5 рівня<h5>
<h6>Заголовок 6 рівня<h6>

HTML тег <strong>

<strong> - вказує на важливість фрагменту тексту. Зазвичай виділяє текст напівжирним.

Приклад використання:

Тег визначає <strong>важливість</strong> визначеного тексту

Результат:

Тег визначає важливість визначеного тексту

HTML тег <em>

<em> означає експресивно-емоційне виділення. Зовні відображення тега не відрізняється від тега <i>, але при цьому елемент <em> використовується тільки тоді, коли є смислова необхідність виділити текст. Крім того, програми, що зчитують текст з екрану, акцентують на таких виділеннях увагу певною інтонацією.

Приклад використання:

Тег визначає <em>виділення</em> визначеного тексту

Результат:

Тег визначає виділення визначеного тексту

HTML тег <small>

<small> - вказує на не важливість фрагменту тексту. Зазвичай тег відображає текст зі зменшеним розміром шрифту на одну умовну одиницю.

Приклад використання:

Тег визначає <small>не важливість</small> визначеного тексту

Результат:

Тег визначає не важливість визначеного тексту

HTML тег <ins>

<ins> - визначає текст, котрий був доданий в нову версію документу. Зазвичай тег відображає текст з нижнім підкресленням

Приклад використання:

Тег визначає <ins>новизну</ins> визначеного тексту

Результат:

Тег визначає новизну визначеного тексту

HTML тег <sub>

<sub> - відображає текст у вигляді нижнього індексу.

Приклад використання:

Тег визначає <sub>під рядковий</sub> текст

Результат:

Тег визначає під рядковий текст

HTML тег <sup>

<sup> - відображає текст у вигляді верхнього індексу.

Приклад використання:

Тег визначає <sup>над рядковий</sup> текст

Результат:

Тег визначає над рядковий текст

HTML тег <pre>

<pre> - Виводить попередньо відформатований текст

Приклад використання:

                <pre>
                    Страшні слова, коли вони мовчать,
                        коли вони зненацька причаїлись,
                            коли не знаєш, з чого їх почать,
                                бо всі слова були уже чиїмись.
                </pre>

Результат:

                    Страшні слова, коли вони мовчать,
                        коли вони зненацька причаїлись,
                            коли не знаєш, з чого їх почать,
                                бо всі слова були уже чиїмись.

Розмітка коду

HTML тег <code>

<code> - вказує, що зміст теґа - програмний код.

Приклад використання:

                    <code>
                         if (index == -1) {
                            cout << "Element not found\n";
                        }
                        else {
                            cout << "Elemend found in " << index << endl;
                        }
                    </code>

Результат:

                    
                        if (index == -1) {
                            cout << "Element not found\n";
                        }
                        else {
                            cout << "Elemend found in " << index << endl;
                        }

HTML тег <kbd>

<kbd> - позначає клавіші, що можуть бути натиснені. Браузери, зазвичай, позначають текст у контейнері <kbd> моноширінним шрифтом.

Приклад використання:

Тег позначає клавіші для <kbd>натискання</kbd> по визначеному тексту

Результат:

Тег позначає клавіші для натискання по визначеному тексту

HTML тег <samp>

<samp> - позначає текст як результат виведення комп'ютерної програми або скрипта.

Приклад використання:

                    <samp>
                         if (index == -1) {
                            cout << "Element not found\n";
                        }
                        else {
                            cout << "Elemend found in " << index << endl;
                        }
                    </samp>

Результат:

                    
                        if (index == -1) {
                            cout << "Element not found\n";
                        }
                        else {
                            cout << "Elemend found in " << index << endl;
                        }

Цитати та визначення

HTML тег <dfn>

<dfn> - позначає термін в тексті. Зазвичай виділяється курсивом і дається його визначення.

Приклад використання:

<dfn>dfn</dfn> - позначає термін в тексті.

Результат:

dfn - позначає термін в тексті.

HTML тег <abbr>

<abbr> - вказує, що послідовність символів є абревіатурою.

Приклад використання:

<abbr title="Організація Об'єднаних Націй">ООН</abbr> - позначає абревіатуру в тексті.

Результат:

ООН - позначає термін в тексті.

HTML тег <q>

<q> - визначає коротку цитату.

Приклад використання:

<q> Ваш час обмежений, не витрачайте його, проживаючи чуже життя. Не попадайтеся на гачок віровчення, яке існує на мисленні інших людей. Не дозволяйте поглядам інших заглушати свій власний внутрішній голос. І дуже важливо мати мужність слідувати своєму серцю і інтуїції. Вони, так чи інакше, вже знають, що ви дійсно хочете зробити. Все інше - другорядне</q>.<br> <br>Стів Джобс

Результат:

Ваш час обмежений, не витрачайте його, проживаючи чуже життя. Не попадайтеся на гачок віровчення, яке існує на мисленні інших людей. Не дозволяйте поглядам інших заглушати свій власний внутрішній голос. І дуже важливо мати мужність слідувати своєму серцю і інтуїції. Вони, так чи інакше, вже знають, що ви дійсно хочете зробити. Все інше - другорядне.

Стів Джобс

HTML тег <cite>

<cite> - представляє назву творчої роботи (книги, статті, поеми, сценарію, фільму, пісні, опери, ігри та ін.).
Приклад використання:

<cite>Ліна Костенко...</cite> Її цитати завжди влучні та актуальні. Вони проймають до мурашок, змушують думати, відчувати, розуміти. Ось одна із них:

<cite>Чужа душа – то, кажуть, темний ліс.
А я кажу: не кожна, ой не кожна!
Чужа душа – то тихе море сліз.
Плювати в неї – гріх тяжкий, не можна.</cite>

Результат:

Ліна Костенко... Її цитати завжди влучні та актуальні. Вони проймають до мурашок, змушують думати, відчувати, розуміти. Ось одна із них:

Чужа душа – то, кажуть, темний ліс.
А я кажу: не кожна, ой не кожна!
Чужа душа – то тихе море сліз.
Плювати в неї – гріх тяжкий, не можна.

HTML тег <blockquote>

<blockquote> - визначає довгий (багаторядковий) текст, який процитований з іншого джерела

Приклад використання:

<blockquote>

Ваш час обмежений, не витрачайте його, проживаючи чуже життя. Не попадайтеся на гачок віровчення, яке існує на уявленнях інших людей. Не дозволяйте поглядам інших заглушати свій власний внутрішній голос. І дуже важливо мати мужність слідувати своєму серцю та інтуїції. Вони, так чи інакше, вже знають, що ви дійсно хочете зробити. Все інше – другорядне. – Стів Джобс

</blockquote>

Результат:

Ваш час обмежений, не витрачайте його, проживаючи чуже життя. Не попадайтеся на гачок віровчення, яке існує на уявленнях інших людей. Не дозволяйте поглядам інших заглушати свій власний внутрішній голос. І дуже важливо мати мужність слідувати своєму серцю та інтуїції. Вони, так чи інакше, вже знають, що ви дійсно хочете зробити. Все інше – другорядне. – Стів Джобс

Розриви

HTML тег <hr>

<hr> - визначає тематичний поділ (поділ розділів, статей).

Приклад використання:

<hr>

Найважливіше призначення книги – зберігати знання, накопичені віками, і передати їх наступним поколінням. Завдяки цьому став можливий стрімкий прогрес людства в останні століття в галузі науки.

Результат:

Найважливіше призначення книги – зберігати знання, накопичені віками, і передати їх наступним поколінням. Завдяки цьому став можливий стрімкий прогрес людства в останні століття в галузі науки.

HTML тег <br>

<br> - створює перехід на новий рядок.

Приклад використання:

Нам треба жити кожним днем,<br> Не ждать омріяної дати.<br> Горіть сьогоднішнім вогнем,<br> Бо «потім» може й не настати.

© Ліна Костенко

Результат:

Нам треба жити кожним днем,
Не ждать омріяної дати.
Горіть сьогоднішнім вогнем,
Бо «потім» може й не настати.

© Ліна Костенко

Списки

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

HTML тег <ul>

<ul> - створює перехід на новий рядок.

Приклад використання:

Обов'язкові предмети, що вивчаються в школі:

<ul>
<li>Українська мова</li>
<li>Математика</li>
<li>Англійська мова</li>
<li>Природознавство</li>
<li>Інформатика</li>
<li>Фізична культура</li>
</ul>

Результат:

Обов'язкові предмети, що вивчаються в школі:

  • Українська мова
  • Математика
  • Англійська мова
  • Природознавство
  • Інформатика
  • Фізична культура

HTML тег <ol>

<ol> - визначає впорядкований (пронумерований) список.

Приклад використання:

Обов'язкові предмети, що вивчаються в школі:

</ol>
<li>Українська мова</li>
<li>Математика</li>
<li>Англійська мова</li>
<li>Природознавство</li>
<li>Інформатика</li>
<li>Фізична культура</li>
</ol>

Результат:

Обов'язкові предмети, що вивчаються в школі:

  1. Українська мова
  2. Математика
  3. Англійська мова
  4. Природознавство
  5. Інформатика
  6. Фізична культура

HTML тег <li>

<li> - cтворює елемент впорядкованого (нумерованого) або маркованого (ненумерованого) списку.

Приклад використання:

Результат:

Гіперпосилання

Мій репозиторій

Написати лист

Подзвонити (044) 3345-45-45

Зображення

Моє фото