HTML (език за маркиране на хипертекст) — дефиниция, структура и примери

Научете какво е HTML: дефиниция, структура, тагове и практични примери с HTML5, CSS и JavaScript за създаване и оформление на уебстраници.

Автор: Leandro Alegsa

02-09-2025 23:16

Езикът за маркиране на хипертекст (HTML) е стандартен език за описване на съдържанието и структурата на уебстраници. Уебстраниците се показват от уеб браузъри и могат да съдържат текст, връзки, изображения, аудио и видео. HTML позволява да маркирате тези елементи така, че браузърът да ги разбира и визуализира правилно. Освен видимото съдържание, HTML се използва и за добавяне на метаинформация — данни за самата страница (напр. автор, кодировка, описание), които обикновено не се показват директно. За оформяне на външния вид (цветове, шрифтове, разположение) се ползват Каскадните таблици със стилове (CSS), а за поведение и динамично манипулиране на елементи — JavaScript.

Как е структуриран един HTML документ

Основните части на един HTML документ са:

DOCTYPE — указва версията/типa на HTML, напр. <!DOCTYPE html> за HTML5.
<html> е кореновият елемент, обвиващ цялото съдържание.
<head> съдържа метаинформация: <meta>, <title>, връзки към стилове и скриптове.
<body> съдържа видимото съдържание: заглавия, параграфи, изображения, формуляри и т.н.

Пример за минимален HTML документ:

<!DOCTYPE html> <html lang="bg">   <head>     <meta charset="utf-8">     <title>Пример</title>   </head>   <body>     <h1>Заглавие</h1>     <p>Параграф с текст.</p>   </body> </html>

Елементи, тагове и атрибути

HTML се състои от елементи (elements), които обикновено имат отварящ и затварящ таг, напр. <p>...</p>. Елементите могат да имат атрибути (напр. id, class, src, href) — допълнителни свойства, които дават информация за поведението или извеждането им.

Самозатварящи се елементи: <img>, <br>, <meta>.
Вложеност: елементите трябва да са правилно вложени (не се прекъсва затварянето им в неправилен ред).
Семантика: използвайте семантични елементи като <header>, <nav>, <main>, <article>, <footer> за по-добра достъпност и търсене.

Често използвани елементи (примери)

Заглавия: <h1>…<h6>
Параграфи: <p>
Връзки: <a href="URL">текст</a> — например вътрешни/външни линкове; в текста по-горе са включени примери като език за маркиране за и други.
Изображения: <img src="път" alt="описание"> — винаги задавайте alt за достъпност.
Списъци: наредени <ol> и ненаредени <ul> с елементи <li>
Формуляри: <form> с полета (<input>, <select>, <textarea>) за събиране на данни от потребителите.
Таблици: <table>, <tr>, <td>, <th> за таблични данни.
Мултимедия: вграждане на аудио и видео чрез елементи като <audio> и <video>, както и външни връзки към медия (виж видео).

Метаданни и SEO

Метаелементите в <head> влияят на индексирането от търсачки, отлагането при споделяне в социални мрежи и поведението на браузъра. Примери: <meta name="description" content="…">, <meta charset="utf-8">, <link rel="canonical" href="…">.

Стандарти и развитие

HTML се стандартизира и развива от организации като World Wide Web Consortium (W3C) и WHATWG. Модерният стандарт, известен като HTML5, въведе много семантични елементи и нови възможности за мултимедия, формуляри и API за браузъра. Стандартите се актуализират с течение на времето, затова е добре да следите официалните спецификации и новости.

Добри практики и достъпност

Използвайте семантични елементи и валиден HTML (валидирайте чрез инструменти).
Добавяйте описателни alt текстове на изображения и етикети (labels) за формулярните полета.
Осигурявайте добра структура на заглавията (<h1>–<h6>) за екранни четеци.
Минимизирайте инлайн стилове и използвайте CSS за оформяне; JavaScript за поведение и динамика.
Оптимизирайте изображения и ресурси за по-бързо зареждане и по-добро потребителско изживяване.

Резюме

HTML е основата на уеб съдържанието: той описва структурата и семантиката на страниците. Заедно с CSS и JavaScript формира трите основни технологии за изграждане на уеб сайтове. Запознаването с правилна структура, семантика и добри практики гарантира по-достъпни, поддържани и добре индексирани уебстраници.

Етикети

HTML използва специални части от езика за програмиране, наречени "тагове", за да покаже на браузъра как трябва да изглежда дадена уебстраница. Таговете обикновено са по двойки: отварящият таг определя началото на даден блок от съдържание, а затварящият таг - края на този блок от съдържание. Съществуват много различни видове тагове и всеки от тях има различно предназначение. Вижте "Основни HTML тагове" по-долу за примери на тагове.

Някои тагове работят само в определени браузъри. Например тагът <menuitem>, който се използва, за да накара нещо да се появи, когато човек натисне десния бутон на мишката, работи само в браузъра Mozilla Firefox. Другите браузъри просто игнорират този таг и показват написаното нормално. Много създатели на уебстраници избягват да използват тези "нестандартни" тагове, защото искат техните страници да изглеждат еднакво при всички браузъри.

Пример

Ето една примерна страница в HTML.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Това е заглавието на страницата. </title> 5 </head> 6 < body> 7 < p> Това е параграф. </p> 8 < a href="https://www.domain.com"> Това е връзка. </a> 9 < img src="image.jpg" alt="Изображение"> 10 </body> 11 </html>

Една проста HTML страница би била следната: един параграф с "Hello world! ", написан върху него.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Здравей! </title> 5 </head> 6 < body> 7 < p> Здравей, свят! </p> 8 </body> 9 </html>

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

Име на етикета	Име	Функция	Пример за код
`<!DOCTYPE>`	Дотип	Определя типа на документа	<!DOCTYPE html>
`<html>`	HTML	Дефинира HTML документ и стартира HTML документ.	< html> Целият код</html>
`<head>`	Глава	Съдържа код, който не се използва за показване на елементи в уебстраницата.	< head></head>
`<title>`	Заглавие	Определя заглавието на уебстраницата (показва се в раздела) и се въвежда в `<head>.`	<заглавие> Уебстраница</заглавие>
`<body>`	Body	Съдържа видимите елементи на уебстраницата (и съдържа параграф и други)	< body> Html тагове</body>
`<h1>` до `<h6>`	Заглавия	Заглавия с различни размери (`<h1>` е най-голямото)	< h1> Заглавие</h1>
	Параграф	Определя параграф от текст	< p> ТЕКСТ</p>
	Котва	Създава активни връзки към други уеб страници	< a href="www.domain.com"> Посетете нашия сайт</a>
`<img>`	Изображение	Показва изображение на страницата	< img src="ImageUrl" alt="Текст, който се показва, ако изображението не е налично">
`<br>`	Прекъсване	Вмъква единично прекъсване на реда	Текст < br> Текст
`<center>`	Център	Преместване на съдържанието в центъра на страницата	< center> Код</center>
`<script>`	Скрипт	Създава скрипт в уебстраницата, обикновено написан на JavaScript.	< script> document. write("Hello World!")</script>

Използване на HTML етикети

Създаване на уеб страница

Създаването на уеб страница е лесно.Всичко, което трябва да запомните, са таговете и редът за създаване на уеб страница.

Първо, трябва да намерите място, където да въведете HTML таговете (препоръчвам бележник) и да ги запишете.

Ето още един пример за страница с HTML етикет.

<html>

<head>

<title> Здравейте! <title>

<h1> Здравей, свят!</h1>

</head>

<body>

<p>

Това е страница с HTML етикет.

</p>

От: *Вмъкнете името тук*

</footer>

</html>

След като приключите, запишете в този формат: helloworld.htm

(не поставяйте интервали)

И готово! След като го запазите в компютъра си, ако натиснете бутона, той ще ви изпрати към вашата уеб страница в Google!

Въпроси и отговори

В: Какво е HTML?

О: HTML е вид език за маркиране, който се използва за създаване на уебстраници, съдържащи текстове, връзки, снимки и аудиовизуални материали.

В: Каква е функцията на HTML?

О: Функцията на HTML е да указва на уеб браузърите как трябва да изглеждат уеб страниците и да добавя мета информация, като например името на създателя на уеб страницата.

В: Кои са някои примери за медии, които могат да бъдат включени в уебстраници, създадени с помощта на HTML?

О: Някои примери за медии, които могат да бъдат включени в уебстраници, създадени с помощта на HTML, са аудиофайлове и видеоклипове.

В: Как CSS допълва HTML?

О: CSS се използва за промяна на външния вид на HTML страниците.

В: Каква е ролята на JavaScript в разработването на уебсайтове?

О: JavaScript е основен скриптов език при разработването на уеб страници, тъй като той указва на уебсайтовете как да се държат и може да променя външния вид на HTML и CSS.

В: Кой отговаря за създаването на HTML?

О: HTML се създава от World Wide Web Consortium (W3C).

В: Коя е текущата стандартна версия на HTML?

О: Към септември 2018 г. HTML 5 е най-новата стандартна версия на HTML във версия 5.2.

обискирам