Заглавията са често срещани на повечето уеб страници. Всъщност почти всеки текстов документ има тенденция да има поне едно заглавие, така че да знаете заглавието на това, което четете. Тези заглавия са кодирани с помощта на HTML заглавни елементи - h1, h2, h3, h4, h5 и h6.
На някои сайтове може да откриете, че заглавията са кодирани, без да се използват тези елементи. Вместо това заглавията могат да използват абзаци с добавени към тях специфични атрибути на клас или разделения с елементи на класа. Причината, поради която често чуваме за тази неправилна практика, е, че дизайнерът „не харесва начина, по който изглеждат заглавията“. По подразбиране заглавията се показват с удебелен шрифт и те са с по-голям размер, особено елементите h1 и h2, които се показват с много по-голям размер на шрифта от останалата част от текста на страницата. Имайте предвид, че това е само стандартният вид на тези елементи! С CSS, можете да направите заглавието да изглежда както искате! Можете да промените размера на шрифта, да премахнете удебеления шрифт и много повече. Заглавията са правилният начин за кодиране на заглавията на дадена страница. Ето няколко причини защо.
Защо да използваме заглавни маркери, а не разделения
Това е най-добрата причина да използвате заглавия и да ги използвате в правилния ред (т.е. h1, след това h2, след това h3 и т.н.). Търсачки дайте най-голямото тегло на текста, включен в маркерите на заглавията, тъй като има семантична стойност за този текст. С други думи, като маркирате заглавието на вашата страница H1, вие казвате на паяка на търсачката, че това е фокусът номер 1 на страницата. Заглавията H2 имат акцент №2 и т.н.
Не е нужно да помните какви класове сте използвали, за да определите заглавията си
Когато знаете, че всичките ви уеб страници ще имат H1, който е получер, 2em и жълт, тогава можете да го определите веднъж в таблицата със стилове и да сте готови. 6 месеца по-късно, когато добавяте друга страница, просто добавяте H1 таг в горната част на страницата си, нямате за да се върнете към други страници, за да разберете какъв идентификатор на стил или клас сте използвали, за да дефинирате основното заглавие и подзаглавията.
Осигурете силен контур на страницата
Контурите улесняват четенето на текста. Ето защо повечето американски училища научиха учениците да пишат контур, преди да напишат статията. Когато използвате маркери за заглавия в контурен формат, вашият текст има ясна структура, която става очевидна много бързо. Освен това има инструменти, които могат да прегледат контура на страницата, за да предоставят обобщение и те разчитат на маркери за заглавия за структурата на контурите.
Страницата ви ще има смисъл дори при изключени стилове
Не всеки може да преглежда или използва таблици със стилове (и това се връща към номер 1 - търсачките преглеждат съдържанието (текста) на вашата страница, а не таблиците със стилове). Ако използвате маркери за заглавия, правите страниците си по-достъпни, защото заглавията предоставят информация, която a DIV таг не бих.
Полезно е за екранни четци и достъпност на уебсайтове
Правилното използване на заглавията създава логическа структура за документ. Това е, което екранните четци ще използват, за да „четат“ даден сайт на потребител със зрително увреждане, правейки сайта ви достъпен за хора с увреждания.
Оформете текста и шрифта на заглавията си
Най-лесният начин да се отдалечите от „големия, смел и грозен“ проблем с етикетите на заглавията е да оформите текста така, както искате да изглежда. Всъщност, когато работите върху нов уебсайт, най-добре е първо да напишете стиловете абзаци, h1, h2 и h3 първо. Придържайте се само към семейството на шрифтовете и размера / теглото. Например това може да е предварителен лист със стилове за нов сайт (това са само някои примерни стилове, които могат да бъдат използвани):
Можете да модифицирате шрифтове на заглавието ви или променете стила на текста или дори цвета на текста. Всичко това ще превърне вашето „грозно“ заглавие в нещо по-жизнено и в съответствие с вашия дизайн.
Границите могат да се обличат заглавия
Границите са чудесен начин да подобрите заглавията си и са лесни за добавяне. Но не забравяйте да експериментирате с границите - нямате нужда от граница от всяка страна на заглавието си. И можете да използвате нещо повече от обикновени скучни граници.
Добавихме горна и долна граница към нашето примерно заглавие, за да представим някои интересни визуални стилове. Можете да добавите граници по какъвто и да е начин, който искате да постигнете стила на дизайна, който искате.
Добавете фонови изображения към заглавията си за още повече Pizazz
Много уеб сайтове имат заглавна секция в горната част на страницата, която включва заглавие - обикновено заглавието на сайта и графика. Повечето дизайнери смятат това за два отделни елемента, но не е нужно. Ако графиката е само за украса на заглавието, тогава защо да не я добавите към стиловете на заглавията?
Номерът на това заглавие е, че знаем, че изображението ни е високо 90 пиксела. Затова добавихме подложка в долната част на заглавието от 90 пиксела (подложка: 0,5 0 90px 0p;). Можете да играете с полетата, височината на реда и подложката, за да получите текста на заглавието да се показва точно там, където искате.
Едно нещо, което трябва да запомните, когато използвате изображения, е, че ако имате отзивчив уебсайт (което трябва) с оформление, което се променя в зависимост от размерите на екрана и устройствата, заглавието ви не винаги ще бъде с еднакъв размер. Ако се нуждаете от заглавието си с точен размер, това може да създаде проблеми. Това е една от причините, поради които обикновено избягваме фоновите изображения в заглавие, колкото и готини да изглеждат понякога.
Замяна на изображение в заглавия
Това е друга популярна техника за уеб дизайнерите, защото ви позволява да създадете графично заглавие и да замените текста на заглавния маркер с това изображение. Това е истински антична практика от уеб дизайнери, които имаха достъп до много малко шрифтове и искаха да използват по-екзотични шрифтове в работата си. Възходът на уеб шрифтовете наистина промени начина, по който дизайнерите подхождат към сайтовете. Заглавията вече могат да се задават в голямо разнообразие от шрифтове и изображения с вградени шрифтове вече не са необходими. Като такива, ще намерите CSS изображения, заместващи само заглавия на по-стари сайтове, които все още не са актуализирани до по-модерни практики.
Редактиран от Джеръми Жирард