Какво е HTML (HyperText Markup Language)

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

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

В тази статия разглеждаме основните характеристики на HTML, неговите структура и синтаксис, както и практически примери за използването му в различни ситуации.

Какво е HTML – определение и приложение

HTML или Hypertext Markup Language е стандартен език за маркиране, използван за създаване и представяне на съдържание в световната мрежа (www; World Wide Web).

Маркиране в случая се отнася до използването на тагове (инструкции), които описват структурата и форматирането на съдържанието на уеб страницата. Съвкупността от всичките елементи на HTML води до оформянето на всякакви видове уеб страници с текст, изображения, формуляри, анимация и друго съдържание.

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

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

Оригиналното предназначение на HTML е било като средство за структуриране и форматиране на документи при обмен на научна и техническа документация в ЦЕРН.

За да може при създаването на страници да няма ограничения от размера и вида на екрана, изпълняващ визуализацията, HTML поддържа добавяне на скриптове или код, писани на други езици. Например, JavaScript променя поведението на една уеб страница, а CSS (Cascading Style Sheets) спомага за определяне на части от стиловото оформление като изгледа на текста, изображенията и пр.

Има няколко версии на HTML документа, като за пръв път публично достъпно описание на таговете се споменава през 1991 г. от Тим Бърнърс-Лий, създателят на световната мрежа.

По-късно, през 1995 г., идва втората версия на HTML и така надграждането продължава, добавяйки нови функционалности, до 2014 г., когато версия 5.0, публикувана публично 6 години по-рано, става основният стандарт.

Структура и синтаксис

Структурата на HTML документите описва начина, по който различните елементи и тагове са организирани и взаимодействат помежду си, за да формират съдържанието на страницата.

Видът на структурата е йерархичен и тя започва с обявление, което определя версията и основния елемент <!DOCTYPE html>, обгръщащ целия код.

Вътре в този елемент се намират два главни тага: <head> и <body>. Тагът <head> съдържа мета данните на документа, връзки към CSS файлове, към стилове и други ресурси, които не се визуализират директно на страницата. докато <body> съдържа всички видими за потребителите елементи на уеб страницата.

Пример за описаните елементи с включени допълнителни тагове, за които ще говорим по-нататък:

<!DOCTYPE html>

<html>

<head>

  <title>Пример за структура</title>

</head>

<body>

  <h1>Заглавие</h1>

  <p>Това е примерен параграф.</p>

</body>

</html>

Синтаксисът на документа са правилата, според които кодът се пише, определяйки как браузърът тълкува и визуализира написаното. HTML е език със сравнително лесен за разбиране и използване синтаксис, базиран на тагове.

Всеки таг има свое специфично значение и употреба. Елементите се дефинират чрез тези HTML тагове, които се изписват в ъглови скоби < >. Всеки таг има начало – <tag> – и край, като в края на тага се добавя и наклонена черта – </tag>.

Ето един пример:

<p style="color:green;">Този текст ще бъде в зелено.</p>

Тук <p> е начален таг, </p> затваря тага, а style=”color:green;” е атрибут, който задава стила на текста. В случая текстът, който ще бъде визуализиран на уеб страницата, е между началото и края на тага и след атрибута.

Основни елементи и тагове

HTML таговете са начинът за създаване на структурата на уеб страница, следвайки синтаксиса на езика. Чрез таговете се обособяват и управляват елементите в HTML. Крайният резултат е визуализирането на уеб съдържание, което потребителят разпознава като страница.

Това, което казва на браузъра как да форматира и показва съдържанието са таговете. С други думи те са инструкции за разпознаване и зареждане съдържанието на сайта.

Основните тагове и елементи са:

<!DOCTYPE html> – Началото на HTML5 документа;
<html lang> – Език на документа;
<head> – Информацията, която не се визуализира директно на страницата;
<meta> charset/name/content – Мета данни, отнасящи се до начина, по който да зарежда страницата символите и елементите според размера на екрана;
<title> – Заглавието на документа, показвано в лентата на браузъра и като заглавие на таба;
<body> – Видимите елементи на страницата;
<header>, <nav>, <main>, <article> и <footer> – Семантични елементи, които помагат за по-добрата организация и четимост на кода;
<h1> до <h6> – Заглавия в страницата, като h1 е най-важното, а h6 – най-малко значимото;
<p> – Параграф;
<a> – Хипервръзка;
<img> – Изображение;
<ul> и <li> – Списъци;
<table>, <tr> и <td> – Таблици.

Нека изобразим казаното досега с един пример за HTML документ:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Примерен HTML Документ</title>

</head>

<body>

    <header>

        <h1>Това е Заглавие</h1>

    </header>

    <nav>

        <ul>

            <li><a href="#">Начало</a></li>

            <li><a href="#">За нас</a></li>

            <li><a href="#">Контакти</a></li>

        </ul>

    </nav>

    <main>

        <article>

            <h2>Подзаглавие</h2>

            <p>Това е текстов параграф във всяка статия или секция.</p>

        </article>

    </main>

    <footer>

        <p>Това е футърът (дъното) на документа, който обикновено съдържа информация за авторските права и друга информация.</p>

    </footer>

</body>

</html>

Това е типичен пример за структурата на HTML документите и употребата на тагове за описването на елементи, които да могат да бъдат представени със зареждането на страницата.

Форматиране на текст и добавяне на хипервръзки в HTML

Базовата информационна единица в уеб страниците, написани на HTML, е текстът, а хипервръзките са това, което свързва различните ресурси в мрежата от страници.

Форматиране на текст в HTML

Текстовото съдържание в HTML може да се форматира и стилизира по много начини в зависимост от изискванията и дизайна на страницата.

Видовете тагове за текст включват:

<p> – Параграф;
от <h1> до <h6> – Заглавия от различно ниво;
<strong> – Удебелен текст;
<em> – Курсивен текст;
<blockquote> – Цитат;
<code> – За вмъкване на код;

Има и HTML коментари, които обясняват кода, без да се визуализират в браузъра. Те изглеждат така: <!– Това е HTML коментар –>.

Ето и един пример за форматиране на текст в HTML:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Пример за форматиране на текст</title>

</head>

<body>

  <!-- Заглавие от първо ниво -->

  <h1>Това е заглавие от първо ниво (h1)</h1>

  <!-- Заглавие от второ ниво -->

  <h2>Това е заглавие от второ ниво (h2)</h2>

  <!-- Параграф с удебелен и курсивен текст -->

  <p>Това е обикновен параграф. <strong>Този текст е удебелен</strong>. <em>Този текст е курсив</em>.</p>

  <!-- Неномериран списък -->

  <ul>

    <li>Първи елемент от списъка</li>

    <li>Втори елемент от списъка</li>

    <li>Трети елемент от списъка</li>

  </ul>

  <!-- Блоков цитат -->

  <blockquote>Това е блоков цитат, който може да се използва за извличане на забележителни бележки или цитати от текста.</blockquote>

</body>

</html>

Добавяне на хипервръзки в HTML

Хипервръзките (или просто връзките) в HTML се използват за прехвърляне от една страница на друга и се създават с тага <a>, който е съкращение от anchor (англ. анкър; бълг. котва).

Този таг може да съдържа атрибут href, който указва URL адреса, където води връзката. Ето как изглежда примерен код с препратка, водеща към example.com, щом се кликне на нея:

<a href="https://www.example.com">Това е хипервръзка към Example.com</a>

Удобството при хипервръзките е, че те не се ограничават само до други уеб страници, а могат да сочат и към различни видове ресурси в интернет като изображения, видео файлове, аудио файлове, PDF документи и др.

Примерен код с такива хипервръзки би изглеждал така:

<a href="път/до/твоето/изображение.jpg" target="_blank">

  <img src="път/до/предварителен-преглед.jpg" alt="Описание на изображението">

</a>

<a href="път/до/твоето/видео.mp4" target="_blank">Гледай видеото</a>

<a href="път/до/твоето/аудио.mp3" target="_blank">Чуй аудиото</a>

<a href="път/до/твоя/документ.pdf" target="_blank">Прегледай PDF документа</a>

Тук target=”_blank” е атрибут, който указва на браузъра да отвори файла в нов прозорец.

За да използваш тези примери в реални условия, можеш да замениш частта “път/до/твоето/име-на-файл.разширение” с пътя до твоя документ в сървъра на сайта.

Хипервръзки: видове, стилизация, целеви атрибути

Хипервръзките могат да бъдат асоциирани с различни семантични и функционални характеристики. Първите определят значението и ролята на връзката в уеб страницата, а вторите – как връзката работи и как се взаимодейства с нея.

Стилизацията на хипервръзките се променя с помощта на CSS. Така разработчиците променят цветовете, размера, фона и други характеристики на връзките, за да ги направят по-привлекателни и забележими.

Тагът <а> поддържа различни целеви атрибути. Един от тях е target, който указва дали страницата да се отвори в същия прозорец, в нов таб или в нов прозорец на браузъра. По-горе използвахме атрибута target=”_blank”, който е за отваряне на връзката в нов таб.

Вграждане на мултимедийни елементи (изображения, аудио, видео) в HTML

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

Изображението се вгражда с тага <img>, който има следните атрибути:

src – Пътят към файла с изображението;
alt – Алтернативен текст, ползван от търсачките при индексиране на изображението, но и текст, показван на потребителите, ако изображението не може да бъде заредено;
width и height – Размерите на изображението.

Пример за вграждане на изображение:

<img src="път/до/изображение.jpg" alt="Описание на изображението" width="300" height="200">

HTML5 въвежда тага <audio> за вграждане на аудио файлове.

Той има следните атрибути:

controls – потребителски интерфейс за управление на възпроизвеждането;
autoplay – автоматично стартиране на възпроизвеждането;
loop – повтаряне на съдържанието отначало;
source – за пътя до файла и формата, в който е.

Примерен код за аудио файл изглежда така:

<audio controls>

  <source src="път/до/аудио.mp3" type="audio/mp3">

  Вашият браузър не поддържа аудио тага.

</audio>

Видео файловете се вграждат с тага <video> и споделят същите атрибути като <audio>.

Пример:

<video width="320" height="240" controls>

  <source src="път/до/видео.mp4" type="video/mp4">

  Вашият браузър не поддържа видео тага.

</video>

Създаване на таблици и списъци в HTML

Друг вид съдържание, създаван с HTML, са таблици и списъци.

В следващите редове ще ги разгледаме подробно и ще дадем примери за таблици и списъци, които могат да бъдат създадени с HTML.

Таблици в HTML

Таблиците в HTML се описват с елемента <table>. Те са изградени от редове, представени от тага <tr>, а всяка клетка в реда се дефинира с таговете <td> (data cell; обикновена клетка с информация) <th> (header cell; заглавна клетка на колона или ред).

Тук се ползват атрибути за форматиране и стилизиране.

Те включват следното:

border – Широчината на рамката около клетките;
cellspacing – Разстоянието (в пиксели) между клетките;
cellpadding – Разстоянието (в пиксели) между рамката на клетката и нейното съдържание.

Така изглежда таблица със споменатите атрибути:

<table border="1" cellspacing="0" cellpadding="10">

  <tr>

    <th>Име</th>

    <th>Фамилия</th>

  </tr>

  <tr>

    <td>Иван</td>

    <td>Иванов</td>

  </tr>

</table>

Списъци в HTML

Съществуват три типа списъци в HTML:

Подредени списъци <ol> (англ. ordered lists). Използват се за представяне на списък, в който редът на елементите има значение. Всяка точка от списъка се огражда с тага <li>.

<ol>
<li>Първа стъпка</li>
<li>Втора стъпка</li>
</ol>
Неподредени списъци <ul> (англ. unordered lists). Използват се, когато редът на елементите в списъка не е важен.

<ul>
<li>Ябълка</li>
<li>Банан</li>
</ul>
Списъци с описание <dl> (англ. description/definition lists). С този тип списък могат да се асоциират имена <dt> с описания <dd>.

<dl>
<dt>HTML</dt>
<dd>Език за оформление на уеб страници</dd>
</dl>

Прилагане на стилове и оформление със CSS в HTML

HTML и CSS могат да се ползват заедно за още по-добро стилизиране на външния вид на различните елементи.

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

Вграждането на CSS като част от HTML документ се случва по три основни начина:

Вътрешен (Internal) CSS. Добавя се в <head> секцията на документа чрез тага <style>. В този случай стиловете се прилагат само за съответния документ.

<head>
<style>
body {background-color: darkgrey;}
</style>
</head>
Външен (External) CSS. Дефинира се в отделен CSS файл. Предпочитан, защото позволява централизирано управление на стиловете за целия сайт.

<head>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
Инлайн (Inline) CSS. Прилага се директно към отделни HTML елементи чрез атрибута style.

<p style=”color:orange;”>Това е параграф с оранжев текст.</p>

CSS използва селектори за целево определяне на HTML елементите, които да се стилизират. За всеки селектор се използват скоби от типа { }.

Един прост пример би бил:

body {

  background-color: lightblue;

}

h1 {

  color: white;

  text-align: center;

}

p {

  font-family: verdana;

  font-size: 20px;

}

Използването на CSS с HTML не само подобрява визуалния аспект на страниците, но и прави настройката по-лесна, що се отнася до дизайна, поддръжката и адаптивността за различни устройства и екрани.

Оптимизация на HTML за по-добра производителност и достъпност

Оптимизацията на HTML кода помага за няколко аспекта от управлението на твоя сайт.

Нека видим кои са те:

Скорост на зареждане: С по-ниската скорост на зареждане се подобрява и потребителското преживяване. По-кратък и изчистен откъм ненужни елементи код, както и оптимизацията на медийните елементи, значи, че браузърите могат по-бързо да анализират и визуализират съдържанието.
SEO оптимизация: Търсачките предпочитат оптимизирани и добре структурирани уеб сайтове. HTML кодът, който е оптимизиран, се индексира по-лесно, което е възможно да доведе до по-високо класиране в резултатите от търсенето.
Мобилна оптимизация: Отзивчивият и адаптивен дизайн се цени, защото много потребители ползват мобилни устройства да влизат в сайтове, а за да е напълно такъв дизайнът е нужно и кодът зад него да бъде оптимизиран.
Семантичен HTML: Таговете като <article>, <aside>, <details>, <figcaption>, <figure> и други, които подчертават значението на съдържанието в кода, а не само представянето му, обясняват структурата на документа и я правят по-лесно достъпна и разбираема.

Има различни инструменти и платформи онлайн, които могат да помогнат с оптимизацията на HTML документите ти. Някои от тях са HTMLMinifier, Google PageSpeed Insights, W3C Validator, TinyHTML и др.

Валидиране на HTML кода и съответствие със стандартите

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

Валидирането на кода е начинът да установиш дали страниците ти показват или не показват HTML грешки, да идентифицираш, ако има такива, и да ги коригираш. Много онлайн инструменти и платформи предоставят услуги за валидация и оптимизация на HTML код.

Такива са:

W3C HTML Validator. Най-известният такъв инструмент. разработен от W3C. Проверява дали HTML кодът спазва текущите стандарти и предоставя предложения за подобрение.
Firefox Developer Tools. Вградените инструменти за разработчици на браузъра Mozilla Firefox. Достъпни директно в браузъра и лесни за ползване.
Chrome Devtools. Същото, но за браузъра Google Chrome.
Validator.nu. Поддържа различни версии на HTML и други технологии за маркиране.
HTML Tidy. Автоматично подобрява и оптимизира кода – идеален за начинаещи, които искат да се учат как да пишат чист и функционален код.

Съответствието със стандартите на Консортиума на Световната мрежа (англ. World Wide Web Consortium), наричан накратко W3C, разработени за поддържане на съвместимост между различните технологии, е от голямо значение при валидирането на кода.

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

Напреднали техники и функционалности в HTML

Както в други езици за програмиране, HTML също има своите тънкости.

Някои от напредналите му техники и функционалности включват:

Canvas. Елементът в HTML, който се ползва за рисуване на графики чрез скриптове като JavaScript, е canvas, в превод платно. Той може да се използва за създаване на визуализации, графики, динамични изображения и дори браузърни игри в реално време.
SVG. Scalable Vector Graphics са векторни графики, които могат да се мащабират без загуба в качеството. Използва се за лога, икони и други визуални елементи, които трябва да изглеждат добре на всякакви устройства.
Web Components. Набор от технологии, които позволяват създаването на персонализирани елементи, повторно използваеми елементи на HTML. Те включват Custom Elements, Shadow DOM и HTML Templates.
Custom Elements. Правят създаването на нови тагове и промяната на поведението на съществуващите по-персонализирана. С тях разработчиците могат да създават собствени (нови) видове HTML елементи.

В крайна сметка какво е HTML без добра идея за бизнес? Само код, визуализиращ страниците ти.

Ако вече разполагаш с фирма или желаеш да стартираш своето пътуване в онлайн търговията, NEXT BASKET е тук да ти помогне. Изпрати ни запитване с информация относно твоето предприятие, целите и възможностите ти и ние ще те насочим към най-подходящите стъпки за постигането на успех дори без да имаш знания по HTML.

Често Задавани Въпроси

Как мога да започна да уча HTML, ако съм начинаещ?

Можеш да започнеш с ползването на онлайн ресурси като W3Schools, Mozilla Developer Network и други или интерактивни платформи за учене като Codecademy. Има много канали в YouTube, които безплатно те учат на основите, показвайки всяка стъпка.

Каква програма ми трябва, за да пиша HTML код?

Всеки текстов редактор като Notepad++ или Visual Studio Code може да визуализира и редактира HTML код. Дори вградените опции на Windows и Mac – Notepad и TextEdit – могат да бъдат използвани, макар и да са ограничени откъм функционалности.