Елементът <head> е контейнер за метаданни(данни за данните) и се поставя(влага се) между таговете <html> и <body>. HTML метаданните се отнасят за HTML документа. Метаданните не се показват на екрана на потребителя(клиента). Метаданните обикновено определят заглавието на документа, набора от знаци, стилове, връзки, скриптове и други. Могат да инструктират браузъра от къде да използва(извиква) .css файлове за стилизирането на HTML страницата. Елементите в <head> могат да включват и скриптове. Следващите тагове могат да бъдат добавяни към head секцията:
- <title>(един от малкото тагове, които имат и затварящ таг)
- <meta>
- <link>
- <script>
- <noscript>
- <style>
- <base>
HTML Елемента <head> и неговото приложение
Този HTML таг има по подразбиране зададено свойството display със стойност none. Това означава, че всичко което е вложено в елемента остава невидимо за потребителя на страницата (освен <title> тага, но той се изобразява извън самата страница – в бара на браузъра). Елементите, които се поставят в <head> тага са такива, които предоставят някаква стойност за браузъра или други машини(ботове). Например търсещата машина на Гугъл разбира много неща за нашият HTML документ точно с помощта на тези тагове.
HTML Елемента <title>
Тага <title> дефинира заглавието на документа. Той се изисква във всеки HTML документ, но ако не присъства в HTML5 то документа си остава напълно валиден. Следните важат за елемента <title>:
- дефинира заглавието в toolbar-a на браузъра
- дава заглавие на страницата, когато е добавена към любими
- показва заглавието на страницата в търсачките
HTML Елемента <meta>
Метадата (мета информация) е информация относно информацията.
В <meta> тага се подава информация относно HTML документа.
Информацията вътре в елемента не се показва в страницата, но се разчита от машината.
Мета елементите обикновено се използват за добавяне на описание към страничката, ключови думи или символни сетове.
Метадатата се използва от браузъра, за да знае как да зареди страницата или да я презареди, от търсачките (ключови думи) или от други уеб услуги.
<meta> таговете винаги са в <head> елемента.
Дефиниране на използвания набор от знаци и символи:
HTML Елемента <link>
Тага <link> се използва за дефиниране на връзката между документа и външни източници. <link> се използва най-често за добавяне на .css файлове (използват се за стилизиране):
Пропускайки <html>, <head>, <body>? Според стандарта HTML5; тези тагове могат да бъдат пропуснати. Следният код ще бъде валиден като HTML5:
Забележка:
W3Schools.bg не препоръчва да се изпускат маркерите <html> и <body>.
Премахването на тези маркери може да срине DOM или XML софтуера и да доведе до грешки в по-старите браузъри (IE9).
Обаче пропускането на маркера <head> е често срещана практика от доста време.
HTML Елемента <script>
<script> тага се използва за добавянето на външен скрипт файл, най-често JavaScript. Елементът <script> се използва за дефиниране на JavaScripts от страна на клиента. Този JavaScript пише „Здравей, JavaScript!“ в HTML елемент с id = „demo“: тага се използва за добавянето на външен скрипт файл, най-често JavaScript. За този таг ще бъде обяснено подробно в урока за JavaScript.
HTML Елемента <style>
Елементът <style> се използва за дефиниране на информация за стила за една HTML страница (размери, цвят, големина на шрифта и пр.). Чрез <style> елемента „казвате“ на браузъра как да покаже(нарисува) определени елементи:
HTML Елемента <base>
Тага <base> обозначава базовия/основния адрес на всички линкове на страницата. Примерът долу ще направи така, че всички линкове да сочат към зададената стойност в атрибута <href> и да се отварят в нов прозорец или таб.
<meta> HTML тагове – как да ги използваме
Можем да дефинираме ключови думи за търсачките:
Да добавим автора на страницата:
Да опреснява страницата на всеки 30 секунди:
Определете описание на уеб страницата си:
Настройване на изгледа
HTML5 въведе метод, който позволява на уеб дизайнерите да поемат контрола над изгледа, чрез маркера <meta>. Изгледът е видимата област на уеб страницата на потребителя. Тя варира в зависимост от устройството и ще бъде по-малка на мобилен телефон, отколкото на компютърния екран. Трябва да включите следния елемент във всичките си уеб страници: <meta>=“viewport“ content=“width=device-width, initial-scale=1.0″‘) ?> Елементът за прозорец <meta> показва инструкциите на браузъра за това как да управлявате размерите и мащаба на страницата. Ширината = част на ширина на устройството определя ширината на страницата, за да следва ширината на екрана на устройството (което ще варира в зависимост от устройството). Частта от началната скала = 1.0 задава първоначалното ниво на увеличение, когато страницата е заредена за пръв път от браузъра.
HTML head Елементи
| Таг | Описание |
|---|---|
| <head> | Дефинира информация относно документа |
| <title> | Дефинира заглавието на документа (страницата) |
| <base> | Дефинира основната цел/адрес на всички линкове на страницата |
| <link> | Дефинира връзка между страницата и външен файл |
| <meta> | Добавя допълнителна информация относно HTML документа |
| <script> | Добавя скрипт файл към страницата |
| <style> | Дефинира информация относно стилизирането на страницата и елементите |