✅ Основні HTML-теги - Дізнайтеся про різні теги HTML та їх використання

Що таке HTML?

Що таке HTML?

HTML розшифровується як Hyper Text Markup Language - це набір заздалегідь визначених елементів, також відомих як теги, які повідомляють браузеру, який вміст відображати та як відображати цей вміст. Це означає, що я можу взяти чистий текстовий файл, додати деякі теги HTML, і браузер знатиме, як відобразити мою веб-сторінку.

Що таке тег?

Тег - це інструкція, щоб повідомити браузеру, як він повинен відображати певний вміст на екрані. Іноді розробники можуть позначати теги як елементи. Ось приклад того, що тег із текстом всередині.

Цей тег відомий як тег заголовка. H у назві тегу дозволяє нам і браузер знати, що ми працюємо з тегом заголовка. Той, що слідує за h, вказує розмір заголовка, який використовується. У цьому випадку 1 - це найбільший текст за замовчуванням, який ви можете відображати у веб-переглядачі. Вихід цього тегу в браузері відобразить Hello World!

Що таке атрибут?

Атрибут - це додаткове значення, яке може конфігурувати тег або регулювати поведінку тегу. Ось ідеальний приклад того, як виглядає тег із доданим атрибутом

Додати піцу

Значенням атрибута id може бути все, що ви хочете, щоб воно було, хоча воно не може мати в ньому простору. Другий атрибут - атрибут класу. Атрибут класу може приймати кілька значень, які можуть бути будь-якими, якими ви хочете.

Глобальний атрибут

Глобальний атрибут можна встановити на всіх тегах. Перейдемо до чотирьох найбільш часто використовуваних глобальних атрибутів.

id: Спочатку - атрибут id. Це не додає візуальних змін до самого тегу. Він використовується в основному для JavaScript та стилів, із CSS (Каскадні таблиці стилів). Значення атрибута id має бути унікальним на певній сторінці. Це означає, що жоден два теги не можуть мати однакове значення в ідентифікаторі
class: атрибут class схожий на тег id, за винятком того, що значення атрибута може повторюватися кілька разів на даній сторінці. Ви знайдете такі, що використовуються в основному за допомогою CSS, а іноді і з JavaScript.
style: атрибут style використовується для Inline CSS. Слід уникати, якщо це можливо.
title: title містить ідентифікатор або підказку сортів для тегу. Коли миша наводиться на тег, де відображається заголовок.

Наприклад

Ласкаво просимо!

Елемент рівня блоку проти вбудованого елемента

Далі наведені атрибути елемента рівня блоку та елемента вбудованого.

Елемент рівня блоку

Займає всю ширину батьківського контейнера.

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

Займає поточний простір, який існує в.

Ось основна ілюстрація.

Ця зелена зона представляє батьківський контейнер. У нашому випадку це вікно браузера. Ширина браузера, нашого батьківського тегу, буде шириною елемента рівня блоку.

Ці рожеві області представляють наші елементи або теги на рівні блоку. Як ви бачите, вони займають всю ширину батьківського контейнера. Це означає, що будь-які теги повинні починатися з наступного рядка.

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

Різні основні теги HTML

Давайте вивчимо різні теги HTML.

1) Тег - ДОКТИП

DOCTYPE повідомляє браузеру, який тип файлу буде відкриватися. Оскільки ми кодуємо в HTML5. HTML5 - це остання версія мови розмітки HTML, наш ДОКТИП надзвичайно простий. Зауважте, немає жодної закриваючої теги.

DOCTYPE - це як звичайний тег і починається з дужки, після чого ми ставимо знак оклику, а потім набираємо DOCTYPE. У нас є простір, а потім набираємо html. Цей тег в основному повідомляє веб-переглядачу. Ей, ці документи повинні слугувати як HTML.

2) Тег - html

Тег HTML, який також називають кореневим елементом, слідкує за тегом DOCTYPE. Цей тег може мати звичайні глобальні атрибути плюс атрибут, який називається manifest. Тег HTML можна використовувати лише один раз на сторінці HTML.

Все, що стосується HTML, вкладено всередині цього тегу. Це означає, що всі наші теги будуть розташовані між відкриттям та закриттям тегів HTML.

3) Тег - голова

Заголовок тегу надає загальну інформацію про веб-сторінку, яка відображається. Внутрішній тег додається окремий тег, який дозволяє браузеру знати певні особливості, наприклад, назву сторінки, автора сторінки та іншу таку інформацію.

Ніщо в цьому головному тезі не відображатиметься на веб-сторінці. Однак деяка інформація відображається у фактичній програмі веб-переглядача, як-от заголовок вкладки. Для цього тегу доступні стандартні глобальні атрибути.

4) Тег - тіло

Тег тіла дозволяє браузеру знати, що відображати на сторінці. Всередині тіла тег - це місце, де ми розмістимо весь наш вміст, наприклад теги та текст. Все, що розміщено всередині тегу body, відображатиметься на веб-сторінці.

Тег тіла розміщується після тегу заголовка всередині тегу HTML. На сторінці існує лише одна тега тіла. Тег тіла може мати стандартні глобальні атрибути.

5) Тег - проліт

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

6) Тег - с

Тег абзацу або тег p використовується, коли потрібно зберігати абзац тексту разом. Цей елемент є блоковим елементом рівня, тобто він займає ширину свого батьківського контейнера. Ідеальне використання було б, коли у вас є багато тексту для відображення. Для цього конкретного елемента дозволені лише глобальні атрибути.

7) Тег - дів

Тег поділу, або загальновідомий як тег div, є загальним контейнером блоків. Це означає, що ви можете згрупувати безліч тегів разом, щоб скласти розділ свого сайту. Цей тег є глобальними атрибутами.

8) Тег - підряд

Тег підписки, або тег, дозволяє наступному бути нижче звичайного рядка тексту. Це елемент Inline, оскільки використовує глобальні атрибути. Ідеальним прикладом використання може стати те, що 2 у H2O здаються мало.

Приклад: H ₂ O

9) Тег - суп

Тег суперскрипту або тег sup, який є вбудованим елементом, дозволяє тексту знаходитись над звичайним рядком тексту. Прикладом може слугувати математичне рівняння. Зауважте, що 2 вище, ніж решта тексту цього рівняння.

Приклад: E = mc ²

Це глобальний атрибут.

10) Тег - у

U позначає підкреслення. Це підкреслить будь-який текст у відкритих та закритих тегах. Це вбудований елемент і глобальний атрибут.

11) Тег - ем

Тег em означає акцент. У цьому випадку ідея підкреслити будь-який текст зробить текст курсивом або похилим. Цей вбудований елемент використовується, коли ви хочете висловити певний акцент на частинах тексту. Це глобальний атрибут.

12) Тег - сильний

Якщо ви хочете будь-який текст зробити жирним шрифтом, ви використовуєте сильний тег. Цей вбудований тег розміщується навколо тексту, який ви хочете зробити жирним шрифтом. Так само, як тег наголосу. Сильний тег надає додаткового значення тексту на вашому веб-сайті.

13) Тег - бр

Тег BR, що стоїть на перерві. Є кілька тегів, яким не потрібен тег для закриття. Це не блок і вбудований елемент. Це глобальний атрибут.

14) Тег - год

Тег hr також не потребує тегу закриття для його завершення. Тег hr, який означає горизонтальне правило, створить рядок на веб-сторінці. Це елемент рівня блоку. Це глобальний атрибут.

Вкладені елементи / теги

Вкладення тегів
Де один тег знаходиться всередині іншого тегу

Приклад

16) Тег - лі

Тег li, що стоїть для елемента списку, - це тег, який буде вкладений. Всередині тегу li ви можете розмістити будь-який тип вмісту, який є списком.

17) Тег - ол

Тег ol, що стоїть за упорядкованим списком, є контейнером вкладеного тегу li. Ви ніколи не побачите самі ці два теги, li чи тег ol. Оскільки це перелік замовлень, що означає, що поруч із кожним елементом у списку буде значення.

За замовчуванням у списку будуть використовуватися числа.

Атрибути

Глобальний, зворотний, початок, тип (a, A, I, i)

18) Тег - вул

Тег ul або не упорядкований список є контейнером для вкладеного тегу li так само, як тег ol. Але на відміну від тегу ol, який відображає значення числа поруч із кожним із елементів у списку, цей тег ul просто надає пункти кулі поруч із елементами списку у списку.

19) Тег - h1, h2, h3, h4, h5, h6

Є шість загальних тегів заголовка. Кожен із них зі своїм номером починається від 1 до 6. Тег h1 та всі інші теги заголовка надають короткий опис для розділу тексту чи вмісту. Ці теги є глобальними атрибутами.

20) Тег - а

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

Привіт Світ!

Ще одним додатковим атрибутом, який ми згадаємо, є href. Це означає посилання на гіпертекст. Головне пам'ятати, що href - це атрибут, куди ми надаємо шлях, щоб ми могли посилатися на іншу сторінку або інший веб-сайт.

Атрибут, href. І ми завжди хочемо поставити нашу завершальну мітку. Посилання на веб-сайт Google.com.

Вихід

21) Тег - імг

Тег img або тег зображення дає нам можливість відображати зображення на нашій сторінці.

Тепер ви помітите в прикладі тут, що тег зображення не має завершального тегу. Це одна з кількох тегів. Але на відміну від тегу br та тегу hr, ми позначаємо закінчення цього тега косою косою стрілкою. Деякі можуть насправді посилатися на це як на скорочений спосіб написання завершального тегу.

Атрибут src та атрибут alt. Src або вихідний атрибут, як ви бачите в прикладі, необхідні.

Тепер значенням цього атрибута є шлях до фотографії, яку ми хотіли б показати. Шлях може бути абсолютним або відносним шляхом. Інший атрибут - атрибут alt. Це означає альтернативу. Значення alt має описувати фотографію. Текст alt відображатиметься у браузері, як показано нижче.

Висновок - Основні HTML-теги

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