Список основних тегів HTML

Список основних тегів HTML

Якщо ви вирішите створити сайт, то без мови гіпертекстової розмітки html ви далеко не підете. Звичайно, існує ще CSS, PHP та інші скриптові мови, без яких повноцінний сайт, яким ви звикли його бачити, не вийде. Однак саме основні теги html дозволять вам закласти базу для вашого сайту.

Головні теги, без яких нікуди

Коли ви відкриваєте html документ або веб-сторінку, ви бачите величезну кількість різних тегів. Однак, якщо ви придивитеся, то більшість з них повторюються, оскільки описують одні й ті ж самі елементи. Наприклад, до основних тегів html належать такі теги, як тип документа <! DOCTYPE html >, < html >, < head >, < body >, < title >, < img >, < p >


Тип документа та оголошення html документа

Для визначення типу поточного документа використовується елемент <! DOCTYPE >. Він необхідний браузеру, щоб розпізнати, як інтерпретувати конкретну веб-сторінку. Залежно від того, яку версію html ви використовуєте, виглядати цей елемент буде по-різному. У HTML5 він прийме наступне значення: <!DOCTYPE html>

Після того, як ви вказали, до якого типу належить ваш документ, слід використовувати тег < html >. Як і більшість інших тегів, він є парним, тобто має відкриваючі і закриваючі теги. Різниця між ними в тому, що перед закриваючим тегом розташована коса риса ""/"". Таким чином, найголовніший тег html для створення сайту буде виглядати так:

<html>

...

</html>

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


Тег < head >

Такий тег також є основним тегом html. Він пишеться після < html >, а також є парним і містить переважно метадані веб-сторінки. Ці дані не відображаються у видимій частині html сторінки (крім теґу < title >, що містить назву сторінки), але використовуються переглядачем для правильного відображення документа. Також інформація, розміщена в цьому тегу, використовується різними пошуковими системами. Приклад:

<head>

Метадані

< title > Заголовок сторінки </title >

</head>

Тег < body >

Основний тег для сайту html, оскільки саме він містить в собі всі видимі елементи сторінки - весь текст, всі картинки та іншу інформацію. По суті, як і тег < html >, він є контейнером для інших тегів. Приклад:

<body>


Видимий вміст веб-сторінки

</body>

Заголовки і параграфи

Всі перераховані вище теги є основними тегами мови html. Однак у мові гіпертекстової розмітки існує ще величезна кількість інших елементів. Наприклад, теги параграфів та заголовків. Вони дозволяють структурувати текст, розбивати його на окремі абзаци і виділяти. Наприклад, для параграфів використовується тег < p >, він є парним тегом, між елементом, що відкриває та закриває текст. Приклад:

<p>

Текст параграфа


</p>

Крім параграфів, містити текст можуть і заголовки. Однак вони також змінюють вигляд тексту, що міститься всередині, збільшуючи його в розмірі і виділяючи жирним шрифтом. Існує 6 видів заголовків, які відрізняються у розмірі. Наприклад, заголовок < h1 > є найбільшим, а заголовок < h6 > - найменшим.

Використання зображень

Жоден сайт не обходиться без зображень, картинок і фотографій. Адже без цього веб-сторінки представляли б собою сухий текст, нецікавий для вивчення. Щоб вставити на сайт будь-яке зображення, у мові гіпертекстової розмітки використовується тег < img >. Важливо зазначити, що цей тег не є парним, тому в коді він буде писатися як < img/>.

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

Найчастіше, крім тексту і різних зображень, на сайтах використовуються посилання. Вони можуть перенаправляти на сторонній ресурс або на іншу сторінку вашого сайту. Для того, щоб позначити наявність посилання, використовується тег < a >.

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

Ми трохи розібралися з основними тегами. Однак у більшості тегів існують ще й атрибути. Вони прописуються у відкриваючому елементі і складаються з двох частин. Перша - назва самого атрибута, друга - значення цього атрибута, яке прописується після знака "=" "і полягає в лапки.


Основні атрибути html тегів

Багато тегів мають атрибути. Однак для деяких тегів їх наявність необов 'язково, якщо ви не хочете якось видозмінювати елементи. Для інших же тегів присутність атрибутів обов 'язкова, до таких належать, наприклад, тег < a > (для створення гіперпосилань) і тег < img/> (для додавання на сторінку зображень). Вся справа в тому, що якщо ми не вкажемо у цих основних тегів html атрибути і їх значення, то ми не побачимо їх на сторінці сайту.

Атрибути для теґу < a >

Якщо ви вкажете текст, укладений у тег < a >, крім цього тексту на веб-сторінці ви нічого не побачите. Сам тег, по суті, говорить лише про намір створити гіперпосилання, а для того щоб її дійсно створити знадобиться атрибут. Цим атрибутом буде href, а значенням цього атрибута буде конкретне посилання на ресурс. Таким чином, якщо ми хочемо створити посилання на сайт fb.ru, це буде виглядати наступним чином:

< a href = "" fb.ru "" > Посилання на fb.ru </a >

Так весь текст, що знаходиться між тегами < a >, є гіперпосиланням, а значення атрибута href, укладене в подвійні лапки, буде адресою, за якою ми перейдемо, клікнувши на тексті.

Атрибути src < img/>

Подібна ситуація і з тегом < img/>. Якщо ми не вкажемо разом з ним атрибут і його значення, то зображення на веб-сторінці не з 'являться. Як у випадку з тегом < a >, наявність теґу < img/> говорить тільки про те, що ми збираємося вставити фото в наш код. Однак для того, щоб це зображення з 'явилося, необхідно вказати адресу цього зображення. Для цих цілей необхідно буде використовувати атрибут src, значенням якого буде з 'являтися адреса зображення, розташованого на сторонньому ресурсі, або на вашому комп' ютері.


<img src=https://img.fonwall.ru/o/f7/zakat-more-palmy-plyazh-q85n.jpg />

Атрибут alt для теґу < img/>

Крім того, тег < img/> існує ще один атрибут. Він не вважається обов 'язковим, але визнаний рекомендованим до використання. Цим атрибутом є атрибут альтернативного тексту alt. Значенням цього атрибута буде текст, який відповідає опису фотографії або зображення. Цей текст буде показано, якщо з якоїсь причини зображення не буде завантажено. Крім того, використання цього атрибута допоможе слабозорим людям, які користуються екранними читалками. Отже, тег < img/> буде виглядати так:

<img src=https://img.fonwall.ru/o/f7/zakat-more-palmy-plyazh-q85n.jpg

alt = "" опис зображення "/>

Які ще атрибути існують?

Атрибутів існує величезна кількість, їх список так само величезний, як і список основних тегів html. Однак існує атрибут, який притаманний відразу ряду тегів. Це align. Його можна використовувати разом з тегом < img/>, а також з тегом < p >. Його суть у тому, що він визначає положення зображення або тексту на сторінці. Найголовнішими значеннями цього атрибута є right і left, які позначають вирівнювання праворуч і ліворуч (відповідно). Якщо застосувати його до зображення, то виглядати код буде так:

<img src=https://img.fonwall.ru/o/f7/zakat-more-palmy-plyazh-q85n.jpg

alt = "опис зображення" "

align=""right""/>

Використання стилів

Однак варто зазначити, що останнім часом деякі подібні атрибути не використовуються, а замість них застосовуються каскадні таблиці стилів (CSS). Для використання стилів у html прописується тег < link >, який призначено для підключення стилів і розташовується в теґі < body >.