Отделни думи или цели пасажи могат много лесно да се отличат курсив и удебелят. Първо за опцията за удебеляне. За целта основно се използват два HTML елемента: b
и strong
.
Добре дошли в <b>PSD-Tutorials.de</b>! <br /> Добре дошли в <strong>PSD-Tutorials.de</strong>!
При поглед във браузъра резултатът е следният:
Очевидно и двете елемента доставят идентично показване. Защо съществуват два различни елемента? Фактически, за уебсайтовете съществуват и други начини, различни от известния стандартен браузър. Мислете за четци за слепи хора или за мобилни устройства. С HTML елементите, предлагани от W3C, се цели подкрепа на семантиката. Така елементът b
вече наистина не означава, че нещо трябва да бъде удебелено. Вместо това b
означава текст, който е видимо подчертан, но няма повишена важност. Този текст може да бъде например име на продукт или ключови думи в документи.
Елементът strong
досега е представлявал по-силно подчертаване. em
обаче бе използван за подчертан важен текст (емфатично). В по-ранни версии на HTML strong
бе повишение на em
. На HTML5 на двете елементи се придава различно значение.
Първо един текст с нормално подчертаване.
<p> Котките са сладки животни. </p>
Сега отново същият текст, но този път с подчертаване на първата дума.
<p> <em>Котките</em> са сладки животни. </p>
Чрез използването на em
се поставя акцент върху думата Котките. Този подход е възможен в дискусия, в която става въпрос за това дали кучетата или котките са по-сладки.
Сега в този пример може да се приложи елементът em
и към думата са.
<p> Котките <em>са </em> сладки животни. </p>
Това би могло да бъде един отговор в дискусия, в която някой твърди, че котките изобщо не са сладки.
Елементите, маркирани с em
, се показват курсивно в браузъра. Същият оптичен ефект се постига с елемента i
.
Според работно предложение HTML5, елементът i
вече не означава курсивно.
<p> Сърдечно добре дошли в <i>PSD-Tutorials.de</i> </p>
Този елемент от сега нататък служи за въвеждане на различно настроение. Елементът i
е интересен например за маркиране на технически изрази или таксономични наименования.
Това всичко звучи ужасно теоретично, знам. В принцип трябва да се опитвате да се придържате към HTML5 стандартите. В същото време, никой няма да ви наказва, ако използвате strong
вместо b
.
<p> <em>Ред с em</em><br /> <i>Ред с i</i><br /> <strong>Ред с strong</strong><br /> <b>Ред с b</b> </p>
В крайна сметка тук трябва да действат производителите на браузъри.
За реалното оформление на текстовете, оборудвани с посочените елементи, отговорен е CSS.
Акроними с abbr
За отбелязване на акроним се използва същият елемент, който досега е бил предназначен за абревиатурите, а именно abbr
.
Офисът на <abbr title="World Wide Web Consortium">W3C</abbr> в Германия и Австрия от април 2009 г. е разположен във Висшето техническо училище Потсдам.
Браузърите, които правилно интерпретират елемента abbr
, изобразяват текса, затворен в елемента abbr
, подчертан.
Допълнително, на abbr
трябва да бъде зададен атрибут title
. Тук обикновено се записва пълният израз за акронима. Когато посетителят постави мишката си върху акронима, изразът се показва в подсказващ прозорец.
Адресни данни с address
Чрез елемента address
може да се маркират адресни данни.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Обикновено браузърите изобразяват съдържанието на елемента address
курсивно.
Отличяване на програмен код с code
Елементът code
се използва за маркиране на програмен код. В този смисъл, в сравнение с по-ранни версии на HTML, нищо не се е променило. Все още code
се използва за тази цел.
<pre> Това е HTML заглавен ред: <code> <html> <head> <title></title> </head> </code> </pre>
Обичайно се комбинира кодът с елемента pre
, за да се запазят отстъпите, използвани в програмния код.
Спецификацията на HTML5 препоръчва използването на атрибута class във връзка с елемента code
. На този атрибут може да се присвои езикът, използван в code
-a. Ето някои типични примери, как може да изглеждат тези маркировки:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Дали и как браузърите ще изпълнят тези инструкции, не е определено от W3C.
<pre> Това е HTML заглавен ред: <code class="language-html"> <html> <head> <title></title> </head> </code> </pre>
В момента, атрибутът class
няма видими ефекти в браузъра. Въпреки това хората могат да разпознаят на кой език е програмният код, като погледнат източния код на страницата.
Малки букви с small
Елементът small
първоначално беше предназначен за показване на текст с по-малък размер. В HTML5 small
е ясно предназначен за по-малки текстове. Тези по-малки текстове могат да са, например:
• Информация за авторски права
• Отказ от отговорност
• Лицензни условия
• Общи условия
W3C изрично посочва, че small
не би трябвало да се използва за дълги текстове.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Подчертаване на текст
Можете да подчертавате думите чрез елемента u
. Ето един пример:
<p>Здравейте на <u>PSD-Tutorials.de</u></p>
Резултатът в браузъра изглежда по следния начин:
Когато погледнете резултата, това наистина е желаният ефект. Въпреки това има едно ограничение. В интернет подчертаните текстове обикновено са хипервръзки. Ако представите текст или дума подчертано, посетителите вероятно ще помислят, че става въпрос за хипервръзка. Опитът да се щракне върху него ще се провали. Затова трябва да се откажете от подчертаването.