Fridaycode.net

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

Предполагам доста от вас ползват поне един от таговете <b>, <i>, <strong> и <em>, но е напълно възможно никога да не са се замисляли каква точно е разликата между тях. На пръв поглед, визуално тя е нулева - <b> и <strong> правят текста bold (удебелен), а <i> и <em> го правят italic (курсивен). Всъщност между тях има огромна разлика и точно за нея ще си поговорим в следващите редове.

Реално тези елементи спадат в две съвсем различни категории. Ясно разграничени от W3 <b> и <i> са стилизиращи елементи на шрифта (презентационни), а <strong> и <em> са изразни елементи. Това ще рече, че докато с <b> например казваме, че искаме нещо да бъде удебелено, то със <strong> казваме освен удебелено, то да има и някакъв смисъл, някаква важност... да се акцентира на него. Това е много важно за SEO оптимизацията на сайта, стига да се ползва правилно. Освен това играе огромна роля при използването на екранни четци (директен превод от screen readers) или брайлово писмо, които се ползват основно от незрящи хора. Това, че сте оградили един текст с <i> и той изглежда курсивен на екрана не означава, че четецът ще го разбере, като такъв и точно тогава ползваме <em>. В този случай ще му се придаде някакъв акцент и четецът ще смени интонацията, прочитайки го на по-висок глас. Както бързо сте се досетили, препоръчително е да се използват <strong> или <em>, тъй като те не само визуално възпроизвеждат конректния текст, но й добавят смисъл. Реално в момента <b> и <i> са стилизиращи тагове, а от край време ние използваме CSS за това. От своя страна <strong> и <em> се ползват за изграждане на семантичната структура на вашия HTML документ и добавят нужния акцент на текста, върху който ги ползвате. Но въпреки всичките недостатъци на <b> и <i>, от W3 са решили да ги запазят, като им намерят по-добро приложение занапред.

Поглед в бъдещето на HTML5

Разбира се имайте предвид, че тук нещата са все още в работните им версии и може да има промяна. Иначе едно от любопитните неща в HTML5 бе "завръщането" на <b> и <i>, тъй като много хора си мислеха, че това ще бъде краят им. Уви, от W3 са им намерили приложение и логично то вече не е само чисто визуално, но има добавен смисъл. Така например елементът <i> вече се използва за маркиране на технически термини, идиоматични фрази от чужди езици, при нотацията в музиката, при реплики или настроения в книги или сценарии и пр. Следващият "възкръснал" <b> таг донякъде е запазил чисто визуалните си свойства, като от WWW консорциума препоръчват той да се ползва, за да отличи даден текст от останалия, но не смислово, а чисто визуално. Така например може да се използва, за да удебели ключови думи в произволна статия, но без да им добавя излишна тежест.

Тяхните "конкуренти" <strong> и <em> от своя страна съвсем малко са променили значенията си. Тагът <em> вече ще се използва за маркиране на текст, който се произнася различно (няма общо с важността). Можем да считаме <em>, като доста лингвистичен елемент, защото например ще има голямо значение в коя част от изречението го използваме, тъй като ще променя смисъла му, в зависимост от това дали се ползва върху съществително, глагол или прилагателно. Това означава, че ако искате да използвате този елемент по предназначение, трябва доста да внимавате. Тагът <strong> не е променил свойствата си и ще се използва, за да увеличи важността върху дадена част от текста (няма общо с промяна на значението).

Имайте предвид, че винаги има компромисен вариант за използване на трети елемент, например <span>, който има стил font-weight: bold (за <strong> или <b>) или font-style: italic (за <em> и <i>), но това не е в духа на статията.

За финал няма как да не отбележим факта, че ни се предоставят толкова възможности за изразяване и само от нас зависи дали ще ги оползотворим пълноценно. Дори да не сте ги разбрали все още на 100%, то това не е страшно, тъй като всичко става с опит. Ако не ви се налага да ги използвате често, например, ако се занимавате със сайтове, в които преобладава генерирано потребителско съдържание, то няма как да сте свикнали с тях, но това може да се промени. Не забравяйте, че ако искате да пишете семантичен код, който да бъде наистина полезен и да се възпроизвежда на всякакви устройства, предназначени за всякакви хора, трябва да научите материята. Ще се радвам, ако има хора, било то кодъри или SEO специалисти, които да обменят своя опит с тези елементи, защото мисля, че ще е полезно за всички.