Наслови су уобичајени на већини веб страница. У ствари, скоро сваки текстуални документ обично има барем један наслов тако да знате наслов онога што читате. Ови наслови су кодирани помоћу ХТМЛ елементи заглавља - х1, х2, х3, х4, х5 и х6.
На неким веб локацијама можете пронаћи да су наслови кодирани без употребе ових елемената. Уместо тога, наслови могу да користе пасусе са одређеним атрибутима класе који су им додати или одељења са елементима класе. Разлог због којег често чујемо о овој нетачној пракси је тај што се дизајнеру „не свиђа како изгледају наслови“. Подразумевано се наслови приказују подебљано и веће су величине, посебно елементи х1 и х2 који се приказују у много већој величини фонта од остатка текста странице. Имајте на уму да је ово само задани изглед ових елемената! Са ЦСС, можете да наслов направите како год желите! Можете да промените величину фонта, уклоните подебљано и још много тога. Наслови су прави начин кодирања наслова странице. Ево неколико разлога зашто.
Зашто користити ознаке наслова, а не поделе
Ово је најбољи разлог да се наслови користе у правилном редоследу (тј. х1, па х2, па х3 итд.). Претраживачи дају највећу тежину тексту који се налази унутар ознака наслова, јер тај текст има семантичку вредност. Другим речима, означавањем наслова странице Х1, кажете пауку претраживача да је то главни циљ странице. Х2 наслови имају нагласак # 2, и тако даље.
Не морате да се сећате које сте класе користили за дефинисање наслова
Када знате да ће све ваше веб странице имати Х1 подебљано, 2ем и жуто, онда то можете једном дефинисати у табели стилова и завршити. Шест месеци касније, када додајете још једну страницу, само додате Х1 ознаку на врх странице, а немате да бисте се вратили на друге странице да бисте сазнали који сте ИД или класу стила користили за дефинисање главног наслова и поднаслова.
Наведите снажан обрис странице
Обриси чине текст лакшим за читање. Због тога је већина америчких школа научила ученике да напишу контуре пре него што напишу рад. Када користите ознаке заглавља у облику обриса, ваш текст има јасну структуру која врло брзо постаје очигледна. Поред тога, постоје алати који могу прегледати обрис странице како би пружили синопсис, а они се ослањају на ознаке наслова за структуру обриса.
Ваша страница ће имати смисла чак и када су стилови искључени
Не могу сви да прегледају или користе табеле стилова (а ово се враћа на 1. место - претраживачи прегледавају садржај (текст) ваше странице, а не табеле стилова). Ако користите ознаке наслова, своје странице чините доступнијим јер наслови пружају информације које а ДИВ ознака не бих.
Корисно је за читаче екрана и доступност веб локација
Правилна употреба наслова ствара логичку структуру документа. То ће читачи екрана користити за „читање“ веб локације кориснику са оштећеним видом, чинећи вашу веб страницу доступном особама са инвалидитетом.
Обликујте текст и фонт наслова
Најлакши начин да се одмакнете од „великог, подебљаног и ружног“ проблема ознака заглавља је обликовање текста онако како ви желите да изгледа. Заправо, када радите на новој веб локацији, најбоље је да прво напишете стилове пасуса, х1, х2 и х3. Држите се само породице фонтова и величине / тежине. На пример, ово може бити прелиминарна табела стилова за нову веб локацију (ово су само неки примери стилова који се могу користити):
Можете да измените фонтови наслова или промените стил текста или чак боју текста. Све ово ће ваш „ружни“ наслов претворити у нешто живахније и у складу са вашим дизајном.
Границе могу облачити наслове
Границе су одличан начин да побољшате своје наслове и лако их је додати. Али не заборавите да експериментишете са границама - не треба вам граница са сваке стране наслова. Можете користити и више од обичних досадних граница.
Нашем узорку наслова додали смо горњу и доњу ивицу како бисмо представили неке занимљиве визуелне стилове. Можете додати границе на било који начин којим желите да постигнете жељени стил дизајна.
Додајте позадинске слике својим насловима за још више Пизазз-а
Многе веб локације имају одељак са заглављем на врху странице који укључује наслов - обично наслов и графику. Већина дизајнера ово мисли као два одвојена елемента, али ви то не морате. Ако је графика ту само да украси наслов, зашто је онда не бисте додали у стилове наслова?
Трик овог наслова је у томе што знамо да је наша слика висока 90 пиксела. Тако смо додали додавање на дну наслова од 90 пиксела (додавање: 0,5 0 90пк 0п;). Можете се играти маргинама, висином линије и додавањем да бисте добили текст наслова тачно тамо где желите.
Једну ствар коју треба имати на уму када користите слике је да ако имате респонзивна веб локација (што бисте требали) са изгледом који се мења на основу величина екрана и уређаја, наслов неће увек бити исте величине. Ако вам је потребан наслов тачне величине, то може довести до проблема. То је један од разлога зашто углавном избегавамо позадинске слике у наслову, колико год цоол могле изгледати.
Замена слике у насловима
Ово је још једна популарна техника за веб дизајнере јер вам омогућава да креирате графички наслов и замените текст ознаке наслова том сликом. Ово је истина застарела пракса веб дизајнера, који су имали приступ врло мало фонтова и желели су да користе егзотичније фонтове у свом раду. Пораст веб фонтова заиста је променио начин на који дизајнери приступају веб локацијама. Наслови се сада могу поставити у најразличитије фонтове и слике са тим фонтовима више нису потребне. Као такви, наћи ћете замену ЦСС слика за наслове само на старијим веб локацијама које још увек нису ажуриране на савременију праксу.
Уредио Јереми Гирард