HTML – пример и обяснение

HTML – първи уебсайт

HTML означава HyperText Markup Language. С него описваме структурата на една уеб страница – заглавия, текст, връзки, изображения, секции и други елементи.

Важно: HTML не е програмен език. Той е език за маркиране. CSS определя външния вид, а JavaScript може да добави интерактивност.

1. Елементарен пример

<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моят първи уебсайт</title>
</head>
<body>
    <header>
        <h1>Моят първи уебсайт</h1>
        <p>Добре дошли в моята страница!</p>
    </header>

    <nav>
        <a href="#about">За сайта</a>
        <a href="#contact">Контакти</a>
    </nav>

    <main>
        <section id="about">
            <h2>За сайта</h2>
            <p>Това е елементарен пример за HTML страница.</p>
            <img src="picture/fon2.jpg" alt="Примерно изображение">
        </section>

        <section id="contact">
            <h2>Контакти</h2>
            <p>Пишете ми на <a href="mailto:webdesign3@abv.bg">webdesign3@abv.bg</a>.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Моят първи уебсайт</p>
    </footer>
</body>
</html>

2. Как изглежда примерът

Моят първи уебсайт

Добре дошли в моята страница!

За сайта

Това е елементарен пример за HTML страница.

Контакти

Пишете ми на webdesign3@abv.bg.

3. Обяснение ред по ред

№	HTML	Какво прави
1	`<!DOCTYPE html>`	Казва на браузъра, че документът използва HTML5. Това не е видим елемент от страницата, а декларация за типа на документа.
2	`<html lang="bg">`	Отваря целия HTML документ. Атрибутът lang="bg" казва, че основният език е български.
3	`<head>`	Отваря служебната част на документа. В нея поставяме настройки и информация за браузъра и търсачките, която обикновено не се вижда като съдържание.
4	`<meta charset="UTF-8">`	Задава UTF-8 кодировка. Тя позволява правилно показване на български букви, символи и много други езици.
5	`<meta name="viewport" ...>`	Помага страницата да се мащабира правилно на телефони и таблети. width=device-width използва ширината на устройството.
6	`<title>...</title>`	Задава заглавието, което се вижда в таба на браузъра и често се използва от търсачките.
7	`</head>`	Затваря служебната част head.
8	`<body>`	Отваря видимата част на страницата. Почти всичко, което потребителят вижда, се намира между <body> и </body>.
9	`<header>`	Семантичен елемент за горната част на страницата. Обикновено съдържа заглавие, лого или кратко представяне.
10	`<h1>...</h1>`	Главното заглавие на страницата. Добра практика е една страница да има ясно основно h1.
11	`<p>...</p>`	Създава абзац с текст.
12	`</header>`	Затваря горната секция.
13	`<nav>`	Семантичен контейнер за навигационни връзки.
14	`<a href="#about">...</a>`	Създава връзка. href="#about" води до елемент на същата страница с id="about".
15	`<a href="#contact">...</a>`	Втора вътрешна връзка – към секцията за контакти.
16	`</nav>`	Затваря навигацията.
17	`<main>`	Огражда основното съдържание на документа. Обикновено трябва да има само един основен main за страницата.
18	`<section id="about">`	Създава тематична секция. id="about" позволява към нея да се направи вътрешна връзка.
19	`<h2>...</h2>`	Заглавие от второ ниво – подзаглавие под основното h1.
20	`<p>...</p>`	Абзац, който описва съдържанието на секцията.
21	`<img src="picture/fon2.jpg" alt="...">`	img показва изображение. src е пътят до файла, а alt описва изображението при проблем със зареждането и за достъпност.
22	`</section>`	Затваря първата тематична секция.
23	`<section id="contact">`	Отваря втора секция – тук за контакти.
24	`<h2>Контакти</h2>`	Подзаглавие на контактната секция.
25	`<a href="mailto:...">`	Връзка с протокол mailto:. При натискане браузърът опитва да отвори програмата за електронна поща.
26	`</section>`	Затваря секцията за контакти.
27	`</main>`	Затваря основното съдържание.
28	`<footer>`	Семантичен долен колонтитул. Често съдържа авторски права, контакти или допълнителни връзки.
29	`©`	HTML entity за символа ©.
30	`</footer>`	Затваря долния колонтитул.
31	`</body>`	Затваря видимата част на документа.
32	`</html>`	Затваря целия HTML документ.

4. Най-важното за отварящите и затварящите тагове

Повечето HTML елементи имат отварящ таг и затварящ таг. Например <p> започва абзаца, а </p> го завършва. Наклонената черта / показва затварящия таг.

Някои елементи, като <meta> и <img>, не съдържат друг текст или HTML и не използват отделен затварящ таг.

5. Какво са атрибутите?

Атрибутите дават допълнителна информация за елемента. Например при <a href="contacts.html"> атрибутът href определя адреса на връзката. При <img src="picture/fon2.jpg" alt="..."> атрибутът src определя изображението, а alt – текстовото му описание.

6. Минималната структура, която е добре да запомниш

<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="UTF-8">
    <title>Заглавие</title>
</head>
<body>
    Съдържанието на страницата
</body>
</html>

Упражнение: копирай примера в нов файл с име test.html, отвори го в браузър и после промени заглавието, текста и връзките. Това е най-лесният начин да видиш как всеки HTML елемент влияе върху страницата.