Html p атрибути. Тагове - какви са и какви са. Защо са необходими тагове h1-h6?

Етикет

Етикет

използва се за разделяне на страница на параграфи. Може да съдържа само текст и вградени тагове (тагове на ниво ред). В същото време самият етикет

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

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

Затварящ етикет

не е задължително. Ако липсва, тогава краят на параграфа ще се счита за първия невграден таг, разположен по-долу в HTML кода на страницата.

Атрибути

Лични качества:

  • подравняване - Задава хоризонталното подравняване на съдържанието на абзаца.
  • accesskey - Задава клавишната комбинация за фокусиране върху HTML елемент.
  • клас - указва името на класа или класовете на етикета, използвани в CSS (Cascading Style Sheets).
  • dir - показва посоката на текста в елемента.
  • - указва името на идентификатор на HTML таг, който може да се използва като „котва“ или в таблици със стилове.
  • lang - показва езика, на който е написан текстът в HTML елемента.
  • стил - необходим за прилагане на вградени CSS стилове към етикета.
  • tabindex - задава реда на табулаторите между елементите (клавиш Tab).
  • заглавие - показва подсказка, когато задържите курсора на мишката върху HTML елемент.

Тип етикет

Цел: текст (блокове).

Модел на етикет: блок (блок, ниво на блок).

Може да съдържа:вградени тагове, обикновен текст и HTML специални знаци(мнемотехника).

Начален етикет:необходимо. Затварящ етикет:не е задължително.

Синтаксис

съдържание

HTML пример: Използване на P таг

seodon.ru - Използване на маркера P

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

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



Поддръжка на HTML версия

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддържа:дададада

Поддръжка на браузър

Браузър:Internet ExplorerGoogle ChromeMozilla FirefoxОпера
Версия:6.0 и по-високи2.0 и по-високи2.0 и по-високи9.2 и по-високи3.1 и по-високи
Поддържа:дадададада

И днес ще разгледаме по-отблизо какво представлява html таговеи тях атрибутиНапример p, br, hr; и каква роля играят? стойности на атрибутитагове, съдържащи се в html документ.

Преди да започна, бих искал да се извиня за дългото си отсъствие. Факт е, че поради заетостта с един проект бях принуден да се откажа от актуализирането на блога за известно време и малко изостанах от графика. Но вече всичко е зад гърба ми и се надявам да продължа да поддържам същия ритъм и редовно да предоставям свежи материали.

Сега се връщам към набелязаната тема. Като част от моето въведение в основите на html, вече писах за структурата на html документите, където също дадох обяснения за основните html, head и body тагове, които трябва да присъстват във всеки документ, както и специален тагнаречена декларация.

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

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

Сдвоени и единични, блокови и редови HTML тагове: p, br, hr

Както вероятно вече сте разбрали от предишни публикации в блогове, тагът е основната структурна единица на Hyper Text Markup Language (HTML). Като цяло наборът от тагове определя html кода, който описва конкретен документ (например една от страниците на вашия ресурс).

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

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


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


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

Да започнем с p тага, който всеки уеб администратор използва буквално всяка минута, не преувеличавам. Името на този елемент идва от началната буква на английската дума параграф (параграф, параграф). Той служи за подчертаване на фрагменти от текст, което е много по-лесно за възприемане от читателите. Точно сега, например, пиша статия и подчертавам текста на публикацията от време на време в параграфи, можете да видите това.

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

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

HTML тагове Етикет p - блоков елемент Съдържание на таг p

Но за да покажете този текст в няколко реда, трябва да използвате елемента br (от английския „break“), който е единичен, тоест няма затварящ етикет и също е вграден елемент. Като го поставим в края на всеки ред текст, който е съдържанието на p тага, получаваме желаната опция:

HTML тагове
Таг p - блоков елемент
Съдържание на p тага

Писането на br тагове е почти безплатно. Тоест, можете да изберете няколко реда наведнъж и да поставите този етикет в края на всеки от тях или можете просто да напишете текста по обичайния начин и да вмъкнете br на местата, където трябва да бъдат направени предполагаемите тирета. Броят на вградените елементи br, включени в съдържанието на блоковия етикет p, може да бъде колкото желаете. Тоест на нов ред може да се напише колкото искате текст.

Сега нека да разгледаме друг прост етикет, за който ще говорим по-подробно в края на статията. Говорим за hr тага (от англ "хоризонтална линия"- хоризонтална линия), която е единична, но в същото време блокова, тъй като по подразбиране заема цялата възможна ширина. Той описва проста хоризонтална линия, която е полезна за разделяне на съдържанието на страницата на логически части. Това може да е разделяне на текст, групи от изображения или някои други компоненти на дизайна.

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

Атрибути на HTML тагове и тяхната класификация

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

Почти всеки атрибут има своя собствена стойност (параметър). Като цяло, всеки единичен или двоен етикет може да бъде представен схематично, както следва:


Моля, имайте предвид, че за да посочите стойността на даден атрибут, трябва да поставите знак за равенство след имената на атрибутите, а самата стойност трябва да бъде оградена в единични или двойни кавички. Атрибутите могат да присъстват както в редови, така и в блокови типове; както в единични, така и в двойни тагове.

Естествено, в случай на единичен елемент, няма да има затварящ етикет. Всички атрибути и техните стойности се записват вътре в отварящия таг и трябва да бъдат разделени с интервал, в противен случай съответната област в браузъра няма да се покаже правилно. Да, почти забравих, някои атрибути може да нямат стойности. Разбира се, невъзможно е да се анализират всички тагове в комбинация с всички възможни атрибути и това няма значение, основното е да се разбере механизмът на тяхното използване. На официалната страница можете да проучите всички препоръчани html тагове.

Вярно е, че има данни, които съответстват на официално действащите стандарти на html 4.01. Въпреки това внедряването на версия html 5 се случва с бързи темпове, чиито правила вече се следват от популярните браузъри. И в новата версия на езика за маркиране на хипертекст някои тагове и атрибути вече няма да са валидни, тоест няма да отговарят на HTML стандартите. Затова ще бъдем в крак с времето и в бъдеще ще ви предлагам само валидни тагове и атрибути, също така ще се научим в бъдеще да избягваме неспазването на стандартите за HTML код, материали по тази тема ще се появят много скоро.

Но нека да разгледаме официалната страница на W3C, където е представена таблица с препоръчани html тагове. Ако щракнем върху връзката с тага, който ни интересува (за по-голяма яснота, нека вземем вече споменатия hr таг, особено след като ще разгледаме един пример с него по-долу), тогава ще бъдем пренасочени към тази уеб страница, където спецификацията по отношение на този елемент е дадено:


Всички атрибути на елемента могат да бъдат разделени на три групи:

  1. Универсална група атрибути- важат за почти всички html тагове. На екранната снимка по-горе те са маркирани в зелена рамка
  2. Уникални атрибути- набор от атрибути, уникални за този елемент (за етикета hr на фигурата те са подчертани в лилаво: align, noshade, size, width). Спецификацията на html 5 добави нов цветен атрибут, който определя цвета на хоризонталната линия.
  3. събития- тези атрибути са необходими, когато се изисква някакво действие в отговор на действие на потребител. На екранната снимка те са маркирани в синя рамка.

Информация за атрибутите може да бъде получена и на друга страница на W3C, където има таблица с пълен списък на html атрибути:


Тази таблица показва всички атрибути за всички етикети, съществуващи в езика за маркиране на хипертекст. В колоната "Свързани елементи" срещу желания атрибут са маркирани етикетите, в които може да се използва този атрибут. Колоната "Тип" показва типа данни, които могат да се използват като стойност на атрибута. Например атрибутът align (който определя подравняването на елемент) има три възможни стойности (ляво, централно, дясно).

Ако колоната "Dept" съдържа буквата D, тогава този атрибут не се препоръчва да се използва, в противен случай html документът няма да премине проверка. В този случай е необходимо да се използват CSS стилове, които, както вече отбелязах, ще изучаваме в близко бъдеще. Това е необходимо, тъй като тенденцията е, че повечето от атрибутите в html 5 са ​​остарели и външният вид на елементите трябва да се определя с помощта на css.

Между другото, абсолютно пълна информация с добавени тагове и техните атрибути според версия html 5 е представена на един от най-добрите, според мен, ресурси, посветени на изучаването на основите на html, а именно htmlbook, и на руски език.

Как да покажете хоризонтална линия с помощта на hr тага

Ще действаме прогресивно. hr елементбез атрибути дефинира проста хоризонтална линия, която заема цялата ширина на пространството (вижте примера по-горе). Чрез последователно прилагане на различни атрибути към hr тага, ще променим външния вид на хоризонталната линия.

Първо, нека напишем атрибутите за подравняване и ширина. Що се отнася до align, има смисъл да се използва само ако е зададен атрибутът width, който определя ширината на елемента (по-малка от ширината на страницата). Нека ви напомня, че hr тагът е блоков елемент и по подразбиране заема цялото налично пространство по ширина.

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

След това добавете атрибута noshade към горното. Факт е, че когато използвате hr етикета, 3D ефекти (сянка) се използват по подразбиране, можете да видите, като погледнете линията, разположена точно отгоре. Като посочваме атрибута noshade, ние по този начин забраняваме използването им.

Сега нека се опитаме да добавим атрибута цвят, който ще определи цвета на хоризонталната линия. Имайте предвид, че използването на този атрибут автоматично деактивира 3D ефектите, така че noshade не е необходим. Като стойност задаваме името на цвета, например „синьо“.

И така, използвайки конкретния пример за p, br, hr, разгледахме как html таговете, както и различните използвани атрибути, влияят върху формирането на различни елементи на уеб страница. Скоро ще публикувам продължение на тази тема, така че за да получавате нови материали, не забравяйте да се абонирате за актуализации на блога чрез RSS емисия или имейл. Затова ми позволете да си тръгна с най-добри пожелания.

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

Какво представляват заглавните тагове?

Заглавните етикети имат най-голямо влияние върху тежестта на ключовата дума на уеб страница. Браузърът показва заглавието на статията, което прави тага важен елемент от оптимизацията за търсачки. За да привлекат внимание, заглавията на статиите трябва да бъдат написани на разбираем за обикновения човек език и да съдържат достатъчно информация. За по-добро представяне на тага в стойността < заглавие > трябва да съдържа поне 7 думи. Ако това правило се спазва, тогава ще имате възможност да получите допълнителен трафик от търсачките. И накрая, заглавието трябва да бъде възможно най-близко по смисъл до темата на самата статия.

Какво представляват таговете за изглед< h1>,< h2>…< h6>?

Такива тагове са текстови заглавия, които се намират директно вътре в таговете: За по-добро представяне на сайта, тагът

- не повече от пет пъти. Тагове за форматиране и структуриране на страници

-

използвани в необходимото количество, но се опитайте да направите

Какво представляват таговете< мета>?

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

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

Какво представляват таговете< силен>,< b> и< em> ?

Функция на етикета - маркирайте текста на страницата с удебелен шрифт. Появи се малко по-късно от етикета , но въпреки това се взема предвид и от търсачките. За идентифициране на ключови думи и засилване на тяхното значение, експертите по промоцията препоръчват използването на маркери за подчертаване , .

Етикети ,Изписаните между тях думи в курсив. За търсачките те са от малко значение, но използването им ще има положителен ефект върху интернет страницата.

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

Какво представляват таговете< img>?

Снимки, които са налични на интернет страници, се показват върху тях с помощта на етикета . Има голям брой атрибути, но най-важните за търсачките са alt и title. Първият от тях има информационен характер и се показва, ако не е възможно да се отвори изображението, а вторият съдържа името на изображението. Изскача в браузъра, ако задържите курсора на мишката върху изображението. И двата атрибута са доста важни както за посетителите, така и за търсачките (алт в по-голяма степен), но много уеб администратори незаслужено ги пренебрегват.

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

са най-често използваните, тъй като влияят върху тежестта на ключовата дума в интернет страницата. Така в браузъра се показва заглавието на статията, което прави заглавието необходима част от търсачката. Най-често заглавията на статиите са написани на разбираем за обикновения човек език и трябва да съдържат достатъчно информация, за да привлекат вниманието. За да работи етикетът най-добре, стойността на заглавието трябва да съдържа поне 7 думи. Ако това правило се спазва, тогава ще имате възможност да получите допълнителен трафик от търсачките. И накрая, заглавието трябва да бъде възможно най-близко по смисъл до темата на самата статия.

Какво представляват таговете за изглед

,

…

?

Такива тагове са текстови заглавия, които се намират директно на самата страница на сайта и се намират вътре в други тагове …

. За по-добро представяне на сайта таг

Препоръчва се да се използва само 1 път и

- не повече от 5 пъти. Но трябва да използвате тагове за форматиране и структуриране на страници

-

в разумен размер.

Какво представляват таговете ?

За работа в SEO най-често се използват два мета тагове: описание и ключови думи. Те не се показват на страницата, но търсачките ги вземат предвид. Първоначално ключовите думи бяха създадени, за да улеснят търсачките да разберат семантиката на документа. Сега в този етикет се вмъкват думи, които отразяват същността на интернет страницата.

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

Какво представляват таговете , , И ?

Етикет - е форматиране, чиято функция е да направи текста на страницата удебелен. Този етикет се появи малко по-късно от етикета b, но въпреки това той също се взема предвид от търсачките. За да идентифицирате ключови думи и да ги подсилите, експертите по промоцията препоръчват използването на маркери за подчертаване.

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

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

Какво представляват таговете ?

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

Най-често използваният таг при редактиране на HTML страници обаче е

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

Здравейте, скъпи читатели на сайта на блога. Днес ще започнем да говорим за тагове на езика Html, а именно за заглавия H1, H2, H3, H4, H5, H6, за абзаци P и прекъсвания на редове Br, както и за тага за хоризонтален ред Hr, използвайки пример за ще разгледаме използването на атрибути и нека да видим къде можете да намерите всички възможни атрибути за всеки елемент и да разгледаме синтаксиса на стойностите за тях.

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

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

Нека сега започнем систематично проучване на всички възможни тагове в Html и в същото време ще обърнем специално внимание на какъв тип принадлежат, за да разберем ясно възможностите за тяхното правилно (валидно) използване. Опростената структура на етикета изглежда така:

Има и атрибути за тях (всеки има свой собствен набор), които ви позволяват да добавяте определени свойства към този елемент, но ние ще говорим за това с конкретни примери.

Нека започнем да разглеждаме концепцията за заглавия, които се формират с помощта на сдвоени тагове H1, H2, H3, H4, H5, H6 (името идва от първата буква на думата „Header“, т.е. „heading“). Те са предназначени да отделят различни фрагменти от текст един от друг и да маркират тяхната важност в зависимост от нивото. В съвременната версия на езика HTML всички тагове и всички разрешени за тях атрибути са предварително зададени и описани.

В резултат на това заглавията могат да имат само шест нива и в допълнение елементи H1-H6 са блокови, т.е. стремят се да заемат цялото налично пространство по ширината на страницата. Но те имат една особеност - само вградени елементи могат да се съдържат в заглавните тагове, въпреки факта, че например същият Div ви позволява да включвате други блокови тагове в него.

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

Заглавия от различни нива H1-H6 ще бъдат изчертавани в браузъри с шрифтове с различни размери (въпреки че, използвайки CSS, можете да ги зададете абсолютно всякакъв размер, цвят и тип шрифт за показване в браузъра, но в чист Html това са правилата) :

Ако разгледаме оформлението на сайта от гледна точка на удобството на по-нататъшното му популяризиране (), тогава си струва да споменем, че трябва да има само едно заглавие от ниво H1 на страница. Вероятно можете да използвате два H1, но повече от това най-вероятно ще предизвика негативна реакция от търсачките, когато търсят в документа ви. Вашите действия може да се считат за спам или за повишаване на уместността.

Също така не се препоръчва да пропускате нивата на заглавието, т.е. След H1 трябва да използвате H2, за да маркирате по-малко важни части от текст и т.н. Малко вероятно е това да доведе до сериозни санкции от търсачките, но все пак е по-добре да следвате логиката при създаване на нива на заглавия в Html кода.

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

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

Абзац, нов ред и хоризонтален ред HR в Html код

Тагът P произлиза от думата „параграф“, но по-често все още се нарича параграф. Те се използват за семантично подчертаване на определена част от текста, обикновено включваща няколко изречения. Между абзаците, образувани от P елементи вертикално, се появява празно пространство, което позволява отделни логически части от текствизуално един от друг.

Работата е там, че за човек е доста трудно да прочете монолит от текст, ако не е разделен на отделни малки фрагменти. Например, обикновено дори не започвам да чета статии, които не са разделени на параграфи в Html кода, защото е много досадно.

Като нарушиш текста си много намаляване на прага на уморапосетители на вашия ресурс и подобряване на потребителските фактори (времето, прекарано от потребителя на вашия сайт и), което от своя страна има положителен ефект върху промоцията.

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

Между другото, абзацът P, както вероятно вече сте забелязали, е двойка, но според спецификацията на HyperText Markup Language 4.01, затварящият елемент за него е напълно не е задължително. В този случай браузърът ще трябва да разбере къде трябва да бъде поставен.

Тъй като P е блоков елемент и в него могат да се появяват само елементи с малки букви. Следователно браузърът, след като е открил тага за отварящ абзац, анализира кода допълнително и веднага щом срещне следващия блоков елемент (най-вероятно това ще бъде следващият отварящ таг P), той незабавно вмъква тага за затварящ абзац пред него. В стандарта Html 5 подобни свободи най-вероятно вече няма да съществуват и са необходими незабавно свикнете да затваряте всички таговеи ги пишете само с малки букви.

Абзацът е блоков елемент, така че текстът в абзаците ще има тенденция да заема цялото налично пространство по ширина. Тоест, ако сте написали едно четиристишие в Html кода на документа, както трябва да бъде (всеки ред поотделно), и сте затворили цялото това четиристишие в тагове P на параграфи, тогава в браузъра ще видите, че всичките ви четири реда ще се слеят в един и ще заема цялата ширина на пространството, налично за текст.

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

Е, ако наистина трябва да напишете четиристишие в общоприетата форма, можете да използвате допълнителен HTML за тази цел

етикети за прекъсване на реда, наречени BR

(от думата "прекъсване"):

BR е вграден елемент и също така е „празен“, т.е. единичен (няма затварящ елемент). Цялата функция на BR е, че предизвиква прекъсване на ред при показване на текст в браузъра (подобно на клавиша Enter във всеки текстов редактор).

Писането на BR (line break) тагове в кода не е регламентирано по никакъв начин. Можете да напишете целия текст заедно и да поставите BR вместо интервали на правилните места или можете веднага да разделите текста на редове в кода за по-голяма яснота и да поставите BR или в края на редовете, или в началото. Това не променя същността.

HR(съкращение за думите „хоризонтална линия“, т.е. хоризонтална линия) е много прост Html таг, който рисува хоризонтална линия (лента) по цялата ширина на екрана и дебелина, в зависимост от браузъра, в който се гледа (по същество това е визуален маркер, който по аналогия със заглавните тагове ви позволява да разделите текста на логически части за по-лесно асимилиране).

Тя е “празна” (единична), т.е. няма двойка (затварящ таг). Освен това, HR е блоков елемент, т.е. по подразбиране заема цялата достъпна за него ширина на страницата.

Концепцията за атрибутите и правилата за записването им в Html тагове

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

Например, ако имате няколко параграфа (параграфи) подред, затворени в съответните P тагове, тогава за да промените външния вид на един от тях, просто трябва да добавите необходимите атрибути към отварящия P елемент на този параграф. В случай на единични (празни) тагове, няма опции за това къде да добавите необходимия атрибут.

И така, първото правило е атрибутите се поставят само в отварящия таг(затварящият никога не съдържа нищо). Един елемент може да съдържа няколко атрибута, които са разделени един от друг и между името на тага с интервал (задължително условие). Позволете ми веднага да дам пример за тяхното използване за хоризонталната линия на HR:

И така, нека първо да разгледаме синтаксиса на атрибута. Те се вмъкват в отварящия таг, написани разделени с интервал (включително интервал след името на елемента) и представляват конструкция, която включва името, знака за равенство и е написана в кавички (обикновено е обичайно да се поставят двойки двойни , но стандартът позволява и сдвоени единични кавички) стойности. Редът на атрибутите в кода на Html тагове не е важен.

Там дадох линк към списък на всички валидни HTML тагове. Ако в този списък щракнете върху името на елемента, който ви интересува (в нашия случай това е HR), ще бъдете отведени до страница с подробна спецификация за него:

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

  1. Общи - могат да се появят в по-голямата част от елементите на езика HTML. На снимката точно по-горе те са в долната част и са заобиколени от червена рамка. Всъщност има малко общи атрибути (само шест) и дори тогава е малко вероятно да използвате всички в практиката си. Най-вероятно има само четири - , заглавие и стил.
  2. Атрибути на събитието - те са необходими за задействане на някакво действие в отговор на действие на потребител или системно събитие. Те са по-свързани с JavaScreet и на фигурата по-горе са най-отдолу (оградени в тъмна рамка).
  3. Уникален - Всеки етикет обикновено има свой собствен набор от атрибути, някои от които може изобщо да не се намират в други елементи. Ако вземем предвид HR хоризонталната линия, тя има само четири уникални атрибута (подравняване, noshade, размер и ширина). Всички останали, посочени в HR тага (с изключение на двете групи, описани точно по-горе), ще бъдат игнорирани от браузъра.

Примери за атрибути в тага за хоризонтална линия HR

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

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

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

Например в линията, подчертана на фигурата за атрибута align, за тага HR е допустимо да се използват само три фиксирани стойности, които са посочени там (ляво | център | дясно).

Друга много важна колона е „Depr“. Ако атрибутът, който ви интересува в тази колона, има буквата D до него, тогава той употребата не се препоръчва, но трябва да използвате подходящите CSS стилове, за да го замените. Когато преглеждахме спецификацията на етикета, видяхме също, че до имената на всичките четири атрибута за HR е написана думата „Отхвърлено“ (не се препоръчва за използване).

Нека да видим какви атрибути се използват с елементите, които вече разгледахме в тази статия (P, заглавия H1-H6 и HR). За всички тях можете да използвате "подравняване", защото всички тези елементи са блокови елементи. За вградени елементи атрибутът "align" няма значение.

Например, ако добавите „подравняване“ към таг за заглавие (като H1), можете да зададете подравняването на текста на заглавието. Тези. Блоковият елемент ще заема цялото пространство, което му е налично по ширина, но съдържанието на този хедър (текстът му) може да бъде подравнен или вляво (по подразбиране), вдясно, или в центъра, или по ширина (оправяне - разстоянието между думите се променя, като във вестникарските колони).

Между другото, същото ще важи и за Html тага на абзаца P и за Div контейнера, ако погледнете внимателно дадения скрийншот.

За хоризонтална HR линия, атрибутът "align" ще покаже подравняването на самата хоризонтална линия, образувана от този елемент. Но HR тагът е блоков елемент и има тенденция да заема цялото налично пространство по ширина. Следователно има смисъл да използвате „подравняване“ в него само ако заедно с него вие задайте стойността за атрибута „ширина“.(ширина) по-малка от ширината на страницата.

Стойността за "ширина" може да бъде просто числа (това ще зададе ширината в пиксели) или можете да използвате процент от общата налична ширина за хоризонталната HR линия. Стойността на атрибута „size“ за същия таг е посочена в числа, показващи височината на хоризонталната линия в пиксели. Нека да разгледаме това с пример:

Тагът HR в стандарта Html 4.01 има още един атрибут, наречен единичен, защото не може да приема никакви стойности (просто означава някакво действие) - това е "noshade", който предотвратява хоризонталната линия да хвърля сянка:

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

Късмет! Ще се видим скоро на страниците на сайта на блога

Може да се интересувате

Таблици в Html - Table, Tr и Td тагове, както и Colspan, Cellpadding, Cellspacing и Rowspan за създаването им
Iframe и Frame – какво представляват и как най-добре да използвате рамки в Html
Директиви за коментари и Doctype в Html код, както и концепцията за блокови и вградени елементи (тагове)
Вграждане и обект - Html тагове за показване на медийно съдържание (видео, флаш, аудио) на уеб страници
Как да вмъкна линк и картинка (снимка) в HTML - IMG и A тагове
Html форми за сайта - тагове Form, Input and Select, Option, Textarea, Label и други за създаване на елементи от уеб формуляри
Шрифт (лице, размер и цвят), Blockquote и Pre тагове - наследено текстово форматиране в чист HTML (не се използва CSS)
Празни знаци и тяхното форматиране на код в Html, както и специални знаци за непрекъсваеми интервали и други мнемоники
Как да създадете хипервръзка (A, Href, Target blank), как да я отворите в нов прозорец на сайта, както и да направите снимка връзка в Html код

Поздрави, Приятели! Днес ще говорим за абзац таг и атрибут за подравняване. Като цяло, цялото съдържание на една страница трябва да бъде разделено на параграфи. Съдържанието на абзаца се записва между таговете

Текст…

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

Например, нека вземем страница със следния код:

Страница с параграфи.

Първи параграф: Lorem Ipsum е просто фиктивен текст на печатарската и наборната индустрия. Lorem Ipsum е стандартният фиктивен текст в индустрията още от 1500 г., когато неизвестен печатар взел набор от шрифтове и го разбъркал, за да направи книга с типови образци.

Втори параграф:Отдавна установен факт е, че читателят ще бъде разсеян от четливото съдържание на страницата, когато гледа нейното оформление. Смисълът на използването на Lorem Ipsum е, че той има повече или по-малко нормално разпределение на буквите, за разлика от използването на „Съдържание тук, съдържание тук“, което го прави да изглежда като четим английски.

Нека да видим как изглежда това в браузъра:


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

Атрибути на тагове

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

Атрибутът е посочен в скобата на отварящия етикет и има следния синтаксис: attribute_name="стойност"

Атрибут за подравняване

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

Съдържание на параграфа.

Този атрибут има 4 стойности:

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

2.Правилно– Подравнява съдържанието отдясно.

Текст…

Ето как изглежда в браузъра:


3.Център- Подравнява съдържанието към центъра на страницата.

Текст…


4. Обосновете– Подравнява съдържанието спрямо ширината на страницата.

Текст…


Обобщение на урока:
Днес научихме какво е това параграфв html. Параграфите се използват много често в html. Научихме също какво е атрибут на етикет. И научи атрибута за подравняване подравнете.Което може да приеме една от следните стойности: ляво (стойност по подразбиране),правилно,центъроправдавам.



Препоръчваме за четене