Преминете към основното съдържание

HTML синтаксис

HTML - HyperText Markup Language (език за маркиране на хипертекст) е най-основният градивен елемент на мрежата. Той определя значението и структурата на уеб съдържанието. Други технологии освен HTML обикновено се използват за задаване на външния вид/представянето (CSS) или функционалността/поведението (JavaScript) на уебстраницата.

Хипертекст - Oтнася се до връзки, които свързват уебстраници една с друга, както в рамките на един уебсайт, така и между уебсайтове. Връзките са основен аспект на мрежата. Като качвате съдържание в интернет и го свързвате със страници, създадени от други хора, вие ставате активен участник в световната мрежа.

HTML използва маркиране, за да опише текст (анотация), изображения и друго съдържание за показване в уеб браузър. HTML маркирането включва специални елементи като <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <search>, <output>, <progress>, <video>, <ul>, <ol>, <li> и много други.

HTML елементът се отличава от останалия текст в документа чрез тагове (tags), които се състоят от името на елемента, заобиколено от < и >. Името на елемент вътре в таг е без значение от главните и малките букви. Тоест, може да бъде написано с главни букви, малки букви или смесица от тях. Например, таг <title> може да бъде написан като <Title>, <TITLE> или по друг начин. Конвенцията и препоръчителната практика обаче е таговете да се пишат с малки букви. [1]

Информация

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

Тагове​

В HTML тагът се използва за създаване на елемент.

Името на HTML елемент е името, което се появява в началото на началния таг на елемента и в края на крайния таг на елемента (ако елементът има краен таг). Например p в началния таг <p> и крайния таг </p> е името на елемента на HTML параграфа. Имайте предвид, че името на елемент в краен таг е предшествано от наклонена черта: </p> и че за невалидни елементи крайният таг не е нито задължителен, нито разрешен. [2]

Елементи​

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

html element

Нашият пълен елемент се състои от:

  • Отварящият таг - Състои се от името на елемента (в този пример p за абзац), обвит в отварящи и затварящи ъглови скоби. Този отварящ таг маркира къде елементът започва или започва да влиза в сила. В този пример той предшества началото на текста на абзаца.
  • Атрибутът - Намира се в отварящия таг и разширява елемента, като променя поведението му. Атрибутите съдържат допълнителна информация за елемента, която не е част от неговото съдържание. Атрибутът class предоставя идентифициращо име, което може да се използва за прилагана на стилове (CSS) към елемента или включване в скриптове (JavaScript).
  • Съдържанието - Това е съдържанието на елемента. В този пример това е текстът на абзаца.
  • Затварящият таг - Това е същото като отварящия таг, с изключение на това, че включва наклонена черта преди името на елемента. Това маркира къде завършва елементът. Невключването на затварящ таг е често срещана грешка за начинаещи, която може да доведе до странни резултати. [3]

Елементите и таговете не са едно и също нещо. Таговете започват или завършват елемент в кода, докато елементите са част от DOM (Document Object Model), модела на документа за показване на страницата в браузъра. [4]

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

Атрибути​

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

Един атрибут винаги има формата name="value" (идентификатор на атрибута, последван от свързаната с него стойност). Може да видите атрибути без знак за равенство или стойност. Това е съкращение за предоставяне на празен низ в HTML.

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

Можете да прегледате този списък с атрибути.

Версии на HTML​

Кратка история​

През 1990 г., като част от своята визия за мрежата, Тим Бърнърс-Лий дефинира концепцията за хипертекст, която той формализира през следващата година чрез маркиране, основно базирано на SGML. IETF започна официално да специфицира HTML през 1993 г. и след няколко чернови пусна версия 2.0 през 1995 г. През 1994 г. Бърнърс-Лий основава W3C за разработване на Web. През 1996 г. W3C пое работата по HTML и публикува препоръката за HTML 3.2 година по-късно. HTML 4.0 беше пуснат през 1999 г. и стана стандарт ISO през 2000 г.

По това време W3C почти изостави HTML в полза на XHTML, което доведе до основаването на независима група, наречена WHATWG през 2004 г. Благодарение на WHATWG, работата по HTML продължи: двете организации пуснаха първата чернова на HTML5 през 2008 г. и официален стандарт през 2014 г. Терминът „HTML5“ е просто модна дума, отнасяща се до съвременните уеб технологии, които са част от HTML Living Standard.

Понятие и синтаксис​

HTML документ е обикновен текстов документ, структуриран с елементи. Елементите са заобиколени от съвпадащи отварящи и затварящи тагове. Всеки таг започва и завършва с ъглови скоби (<>). Има няколко празни елемента, които не могат да ограждат никакъв текст, например <img>.

Можете да разширите HTML таговете с атрибути, които предоставят допълнителна информация, засягаща начина, по който браузърът интерпретира елемента. HTML файлът обикновено се записва с разширение .htm или .html, обслужва се от уеб сървър и може да бъде показан от всеки уеб браузър. [6]

Елементи според типа на потока (block и inline)​

Block​

Съдържанието, което участва в блоковото оформление, се нарича съдържание на ниво блок (block-level content).

Блоков елемент винаги започва на нов ред. В хоризонтални режими на писане той заема цялото хоризонтално пространство на своя родителски елемент (контейнер) и вертикално пространство, равно на височината на неговото съдържание, като по този начин създава блок.

Тагове​

<address>   <article>   <aside> <blockquote>    <canvas>    <dd>    <div>   <dl>    <dt>    <fieldset>  <figcaption>    <figure>    <footer>    <form>  <h1>-<h6>   <header>    <hr>    <li>    <main>  <nav>   <noscript>  <ol>    <p> <pre>   <section>   <table> <tfoot> <ul>    <video>

Code


<div>
  <p>This the first paragraph.</p>
  <p>This is the second paragraph.</p>
</div>

Preview

Виж целия пример.

Inline​

Съдържанието, което участва във вграденото оформление, се нарича съдържание на вградено ниво (inline-level content).

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

Тагове​

<a> <abbr>  <acronym>   <b> <bdo>   <big>   <br>    <button>    <cite>  <code>  <dfn>   <em>    <i> <img>   <input> <kbd>   <label> <map>   <object>    <output>    <q> <samp>  <script>    <select>    <small> <span>  <strong>    <sub>   <textarea>  <time>  <tt>    <var>

Code


<style>
.highlight {
background-color: yellow;
}
</style>
<p>
This span is an <span class="highlight">inline-level element</span>; its
background has been colored to display both the beginning and end of the
element's influence. Input elements, like <input type="radio" /> and
<input type="checkbox" />, are also inline-level content.
</p>

Preview

Виж целия пример.

Разлика между block и inline​

В HTML и CSS елементите се класифицират или като вградени елементи (inline), или като блокови елементи (block) и тази класификация диктува как се държат в оформлението на документа. [7]

Разбирането на тази разлика е от решаващо значение за контролиране на това как вашето съдържание се показва на уебстраница.

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

Елементите на ниво блок имат CSS свойството display: block;, което се прилага по подразбиране. Това свойство гарантира, че елементът се разтяга, за да запълни ширината на контейнера и се появява на нов ред.

Някои общи елементи на ниво блок са контейнер (div), абзаци (p), заглавия (h1-h6), подредени списъци (ol), неподредени списъци (ul) и елементи на секции (section).

Code


<p style="border: 2px solid red;">First paragraph</p>
<p>Second paragraph</p>

Preview

Вградените елементи, за разлика от елементите на ниво блок, заемат толкова ширина, колкото им е необходима, и не започват на нов ред. Тези елементи се вливат в съдържанието, позволявайки на текст и други вградени елементи да се показват до тях.

Вградените елементи имат CSS свойството display: inline;, което се прилага по подразбиране. Това свойство гарантира, че елементът остава в потока на съдържанието и не прекъсва на нов ред.

Често срещани вградени елементи са контейнер (span), хипервръзка (a) и снимка (img).

Code


<p>
  This is a <span style="color: red; border: 2px solid green;">red</span> word inside a paragraph.
</p>

Preview

block and inline elements

Валидиране​

Налични са валидатори, които проверяват дали HTML документите са коректни. Валидирането идентифицира грешки във вашия HTML документ и дава предупреждения при налични грешки. Това ви помага да се уверите, че документът отговаря на уеб стандартите. Някои валидатори предлагат и форматиране на код, за да изглежда по-добре. Ето няколко валидатора:

Коментари​

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

Коментарите започват с низа <!-- и завършват с низа -->, обикновено с текст между тях. Този текст НЕ може да започва с низа > или ->, НЕ може да съдържа низовете --> или --!>, нито да завършва с низа <!-, въпреки че <! е разрешен.

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

Синтаксис​

<!-- A one-line comment -->

<!--
A comment
that stretches
over several
lines
-->

<!-- The comment below disables
   the HTML contained within -->
<!--
<p>
   This content will not be rendered.
</p>
-->

Използвана литература​