C, PHP, VB, .NET

Дневникът на Филип Петров


* Форматиране на текст

Публикувано на 19 август 2009 в раздел ХHTML.

Както вече отбелязахме в предишната статия, текста в XHTML се форматира главно чрез параграфи, които се означават с таг <p>. Освен това съществуват и стандартни "заглавия" (headings). Заглавията се означават с тагове <h1>, <h2>, ... <h6>, като разликата между тях е в големината на шрифта. Ето един пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>Моята втора XHTML страница</title>
	</head>
	<body>
		<h1>Заглавие с големина 1</h1>
		<h2>Заглавие с големина 2</h2>
		<h3>Заглавие с големина 3</h3>
		<h4>Заглавие с големина 4</h4>
		<h5>Заглавие с големина 5</h5>
		<h6>Заглавие с големина 6</h6>
		<p>Първи параграф!</p>
		<p>Втори параграф</p>
	</body>
</html>

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

Примерна XHTML страница

Отсега нататък ще си спестяваме стандартния код като DOCTYPE, head, title и body. Ще даваме примери само с тагове вътре в body. Заглавията изброени по-горе трябва да са поредни. Това означава, че винаги трябва да имаме <h1> преди <h2> и т.н. Всъщност въпросната "големина" на заглавието е такава само по подразбиране. По нататък ще разберете как лесно можем да преформатираме шрифта и неговата големина на всеки един такъв таг.

Още в самото начало на писането на XHTML код, човек се сблъсква с нещо, което не е стандартно и интуитивно. Появява се проблем при въвеждането на нов ред. В XHTML натискането на клавиш Enter вътре в текста НЕ прави нов ред. Ето един пример:

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

Ако отворим този документ в браузъра ще видим следното:

Примерна XHTML страница

Виждате, че Enter всъщност се превръща в интервал. Текстът отива на нов ред само ако достигне края на полето на браузъра. За да преминем действително на нов ред трябва да използваме таг за нов ред <br />:

<p>Пример,<br />че когато<br />се натисне<br />клавиш<br />
Enter всъщност<br />не се отива<br />на нов ред.<br />Вместо това<br />
трябва да се<br />използва специален<br />таг!</p>

Ще видим, че навсякъде, където сме написали таг <br /> текстът е отишъл на нов ред:

Примерна XHTML страница

Друг проблем при писането на текст идва от интервалите. Например следния код:

<p>Интервалите         не         се        визуализират</p>

ще се бъде видяно в браузър така:

Много интервали се визуализират като един

Трябва да запомните, че независимо колко интервала сложите - ще се визуализира само един. Ако имате нужда да вмъкнете повече интервали, то трябва да използвате специалния символ &nbsp;. Той е съкращение от "non-breaking space" и указва на браузъра, че на това място ще има интервал. Ето как бихме написали горния пример:

<p>Интервалите&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
не&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;се&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;визуализират</p>

Резултатът ще бъде:

non-blocking space в XHTML

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

В този смисъл някои от вас ще се досетят за още един потенциален проблем. Как да визуализираме знаците "<" или ">"? Това е често срещана грешка при писане на XHTML код - всъщност тези знаци отварят и затварят дефинициите на тагове. Така браузъра няма как да знае дали отваряме таг или искаме да се визуализира просто символ. Затова вместо < трябва да пишем &lt; и вместо > трябва да пишем &gt; (които отново от английски са съкращение от "lower than" и "greater than"). Ето ви пълна таблица със специалните символи:

Символи и пунктуации HTML код ISO Latin-1 код Значение
– &ndash; &#8211; Късо тире
— &mdash; &#8212; Дълго тире
¡ &iexcl; &#161; Обърната удивителна
¿ &iquest; &#191; Обърната въпросителна
" &quot; &#34; Стандартни кавички
“ &ldquo; &#8220; Леви кавички
” &rdquo; &#8221; Десни канички
‘ &lsquo; &#8216; Лява единична кавичка
’ &rsquo; &#8217; Дясна единична кавичка
« &laquo; &#171; Европейска лява кавичка
» &raquo; &#187; Европейска дясна кавичка

(интервал)		 &nbsp; &#160; Интервал
& &amp; &#38; Аперсанд
¢ &cent; &#162; Цент
© &copy; &#169; Запазена марка
÷ &divide; &#247; Деление
> &gt; &#62; По-голямо
< &lt; &#60; По-малко
µ &micro; &#181; Микрон
· &middot; &#183; Точка в средата
&para; &#182; Параграф
± &plusmn; &#177; Плюс/минус
€ &euro; &#8364; Евро
£ &pound; &#163; Лира стерлинг
® &reg; &#174; Регистриран
§ &sect; &#167; Секция
™ &trade; &#153; Търговска марка
¥ &yen; &#165; Японска йена

Няма никаква разлика между това да използвате HTML или ISO Latin-1 варианта. За по-добра четимост обаче се препоръчва HTML варианта. Има и още специални символи - т.нар. "диакритични знаци" (например немските букви с двуеточия и ударения). Те обаче са много рядко използвани в нашия език и затова няма да ги изброяваме.

Вече можем да дадем и няколко често използвани XHTML тага при форматиране на текст:

<p><strong>Това е удебелен текст</strong></p>
<p><b>Това също е удебелен текст</b></p>
<p><em>Това е текст в курсив</em></p>
<p>Долен индекс се прави така: X<sub>n</sub></p>
<p>Горен индекс се прави така: X<sup>n</sup></p>
<p>При корекции <del>задраскваме</del> и <ins>вмъкваме</ins></p>
<p><big>Това е уголемен текст</big></p>
<p><small>Това е намален текст</small></p>

Ето как ще изглеждат:

Примери за форматиране на текст в XHTML

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

Допълнение (31.10.2025 г.): Дали да ползваме таг <i>, таг <em> или <span class="italictext"> със съответен CSS, за да направим дадена думичка вътре в текст курсивна?

И трите дават визуално идентичен резултат - текстът се изобразява в курсив. Разликата е в семантичното значение, т.е. в нещо, което не е свързано с визията, а с описанието на смисъла на думата. То е нещо важно за машината, която трябва да анализира текста. Важно е например как автоматизирания четец за слепи хора ще прочете тази дума.
HTML елементът <i> представлява част от текст, която е отделена от нормалния, защото е специална. Това може да е идиома, технически термин, таксономично обозначение, и др. В книгите те са били представяни с курсивен текст, който на английски се казва italics и от там идва името на тага. Текстът в курсив се използва за да може нещо да се отличи от останалото - в случая <i> прави малко повече, защото не просто го отличава, а и му придава по-особен смисъл. С него се най-често се дефинира термин.
HTML елементът <em> се използва, тогава, когато трябва да се акцентира върху частта от текста - тя не е някакъв специален термин или идиома, но искате да я подчертаете и да обърнете специално внимание (emphasis, откъдето идва и името на тага).
При <span> не се влага никакъв такъв смисъл. Тази техника е единствено за визуално стилизиране. При него няма семантично значение - важното е само как изглежда на екрана.
Какво означава това от практическа гледна точка? Ограденият с <i> и <em> текст при автоматизиран анализ ще означава, че е нещо специално. Например един екранен четец може да направи лека пауза и би го изговорил с по-различен глас, за да акцентира върху него. А при <span> това няма да се случи.
Защо в крайна сметка правим даден текст курсивен? Отговорът на този въпрос би трябвало да отговори и как е най-добре да се реализира. Ако е за красота, span. Ако е за акцент, em. Ако е за дефиниране на термин (най-честото!), нека да е i.
Има погрешно разбиране, че <i> е остаряло и не трябва да се ползва. То идва заради неговото „братче“ - таг <b>, който наистина е по-добре да не се ползва за това, за което го ползват хората - иначе и той си е напълно валиден. Нека обясня. Обикновено хората ползват таг <b>, за да направят „удебелен текст“. Но какво реално означава семантично това?
Елементът <b> представлява текст, към който се насочва вниманието с утилитарна цел. Това например е текстът „ключови думи“ и "abstract" в научна статия - показва ни, че нещо ново започва оттам. Може да е име на продукт - да се види откъде започва информацията за него. Изобщо той е за важен раздел от нещо, което не е отделено с номерация и не е заглавие (heading). В книгите това е било маркирано като удебелен текст (bold) и името на тага идва оттам.
Елементът <strong> придава на обозначения текст особено важно значение. Ползва се когато искаме да кажем, че нещо е изключително важно и на което трябва да се обърне внимание. Например да подчертаем думата „не“ в изречение, за да НЕ бъде пропусната. Най-често хората ползват получер (удебелен) шрифт именно за такива цели. Но често се бърка и се реализира с предходния таг.
Използването на <span> за стилизиране на получер текст отново не придава семантичен смисъл. Един екранен четец ще го прочете по съвсем нормален начин, докато при strong например ще натърти върху думата - ще я каже с по-висок тон и леки паузи отпред и отзад.
Защо хората казват, че <b> (и покрай него <i>) са остарели? Причината е уебсайта w3schools, в който пише, че <b> трябвало да се ползва „само в КРАЕН случай, когато никой от останалите не е подходящ“. И това не е невярно само по себе си, но липсата на пояснение КОГА точно да се ползва прави така, че хората интерпретират текста погрешно и решават, че тага е „остарял“.
Ще си позволя тук да включа и методическата гледна точка (при обучение). Едно от първите неща, които иска да направи един тепърва учещ в HTML, е да изпробва същите неща, които познава от средата за текстообработка. Той иска да си направи нещо "bold" или "italic", точно както става в Word. Проблемите на семантичния уеб са много, ама много далеч от текущото ниво. Затова аз не виждам нищо по-естествено от това да се използват таговете <b> и <i>, пък било то и семантично неправилно. Може да ги научим още в началото и на <em> и <strong>. Но да тръгваме да ги учим още от първия час на CSS, само за да направим някоя дума в получер - е това не мога да го приема.

 



4 коментара


  1. Разликата между елементите h1 до h6 не е в големината на текста, а в тяхното значение. Както и (почти) всички други елементи в HTML, заглавните елементи носят конкретна информация за значението на текста в тях. H1 е основното заглавие на докуманта, според HTML4.01 в документа може да има само един h1 таг, HTML5 допуска различните секции да имат свои h1 тагове. H2 е заглавието на подсекция от документа, едно ниво под основната, и т.н.. Така заглавните елементи изграждат йерархията на документа. HTML стандарта казва, че не трябва да се пропускат нива и йерархията винаги трябва да започва с h1.

  2. Не мога да кажа, че не си прав - естествено, че си. Въпросът е, че практиката показва друго. Трудно е да се обясни тази иерархия на ученици, особено когато реалните страници изключително рядко я спазват. Затова реших да го спестя като информация. Неслучайно в задаващия се XHTML2 таговете h1...h6 са на път да бъдат премахнати и заместени от section.

    Все пак - приемам забележката и ще редактирам статията с допълнителна информация възможно най-скоро.

  3. Май си пропуснал, че XHTML2 няма скоро да се превърне в стандарт. Преди месец от W3C обявиха, че работната група, която работи по XHTML2 ще спре да съществува до края на годината и усилията ще бъдат насочени към HTML5. А и h1 - h6 в XHTML2 май бяха заменени от h елемент. section служи за разграничаване на различни части от сайта.

Добави коментар

Адресът на електронната поща няма да се публикува


*