Nadpisy jsou na většině webových stránek běžné. Ve skutečnosti má téměř každý textový dokument tendenci mít alespoň jeden nadpis, takže znáte název toho, co čtete. Tyto nadpisy jsou kódovány pomocí HTML prvky nadpisu - h1, h2, h3, h4, h5 a h6.
Na některých webech možná zjistíte, že nadpisy jsou kódovány bez použití těchto prvků. Místo toho mohou nadpisy používat odstavce s přidanými specifickými atributy třídy nebo divize s prvky třídy. Důvod, proč o této nesprávné praxi často slyšíme, je ten, že se návrháři „nelíbí, jak vypadají nadpisy“. Ve výchozím nastavení jsou nadpisy zobrazeny tučně a mají větší velikost, zejména prvky h1 a h2, které se zobrazují v mnohem větší velikosti písma než zbytek textu stránky. Pamatujte, že toto je pouze výchozí vzhled těchto prvků! S CSS, můžete vytvořit nadpis, jak chcete! Můžete změnit velikost písma, odstranit tučné písmo a ještě mnohem více. Nadpisy jsou správným způsobem, jak kódovat nadpisy stránky. Zde je několik důvodů.
Proč používat značky nadpisu spíše než divize
To je nejlepší důvod používat nadpisy a používat je ve správném pořadí (tj. h1, poté h2, poté h3 atd.). Vyhledávače přidělit textům zahrnutým uvnitř značek záhlaví nejvyšší váhu, protože text má sémantickou hodnotu. Jinými slovy, označením nadpisu stránky H1 řeknete pavouku vyhledávače, že to je fokus stránky č. 1. Nadpisy H2 mají zvýraznění č. 2 atd.
Nemusíte si pamatovat, jaké třídy jste použili k definování svých titulků
Pokud víte, že všechny vaše webové stránky budou mít H1, která je tučná, 2em a žlutá, můžete ji jednou definovat v šabloně stylů a hotovo. O 6 měsíců později, když přidáváte další stránku, stačí přidat značku H1 do horní části stránky, což nemáte vrátit se na další stránky a zjistit, jaké ID stylu nebo třídy jste použili k definování hlavního nadpisu a podnadpisů.
Poskytněte silný obrys stránky
Obrysy usnadňují čtení textu. To je důvod, proč většina amerických škol učila studenty psát osnovy, než budou psát referát. Když používáte značky nadpisu ve formátu osnovy, má váš text jasnou strukturu, která se projeví velmi rychle. Navíc existují nástroje, které mohou zkontrolovat obrys stránky a poskytnout přehled, a ty se spoléhají na značky záhlaví pro strukturu obrysu.
Vaše stránka bude mít smysl i při vypnutých stylech
Ne každý může prohlížet nebo používat šablony stylů (a to se vrací k # 1 - vyhledávače zobrazují obsah (text) vaší stránky, ne šablony stylů). Pokud používáte značky nadpisu, zvyšujete přístupnost svých stránek, protože nadpisy poskytují informace, které a DIV tag by ne.
Je to užitečné pro čtečky obrazovky a přístupnost webových stránek
Správné použití nadpisů vytváří logickou strukturu dokumentu. To je to, co čtečky obrazovky použijí k „přečtení“ webu uživateli se zrakovým postižením, čímž zpřístupní váš web lidem se zdravotním postižením.
Upravte styl textu a písma nadpisů
Nejjednodušší způsob, jak se vzdálit od „velkého, odvážného a ošklivého“ problému značek nadpisů, je stylizovat text tak, jak chcete, aby vypadal. Při práci na novém webu je nejlepší psát styly odstavců, h1, h2 a h3 jako první. Držte se pouze rodiny písem a velikosti / hmotnosti. Může to být například předběžná šablona stylů pro nový web (toto je jen několik příkladů stylů, které lze použít):
Můžete upravit písma nadpisu nebo změnit styl textu nebo dokonce barvu textu. To vše promění váš „ošklivý“ nadpis na něco živějšího a v souladu s vaším designem.
Hranice mohou zdobit titulky
Okraje jsou skvělý způsob, jak vylepšit své nadpisy, a lze je snadno přidat. Nezapomeňte však experimentovat s okraji - nepotřebujete okraj na každé straně nadpisu. A můžete použít nejen obyčejné nudné hranice.
Do ukázkového nadpisu jsme přidali horní a dolní ohraničení, abychom představili několik zajímavých vizuálních stylů. Orámování můžete přidat jakýmkoli způsobem, kterým chcete dosáhnout požadovaného stylu designu.
Přidejte do svých nadpisů obrázky na pozadí a získejte ještě více Pizazzu
Mnoho webů má v horní části stránky sekci záhlaví, která obsahuje nadpis - obvykle název webu a grafiku. Většina designérů to považuje za dva samostatné prvky, ale nemusíte. Pokud je tam grafika jen proto, aby zdobila nadpis, tak proč ji nepřidat do stylů nadpisů?
Trik v tomto nadpisu spočívá v tom, že víme, že náš obrázek je vysoký 90 pixelů. Přidali jsme tedy odsazení do spodní části nadpisu o velikosti 90 pixelů (odsazení: 0,5 0 90px 0p;). Můžete hrát s okraji, výškou čáry a polstrováním, aby se text nadpisu zobrazil přesně tam, kde ho chcete mít.
Při používání obrázků je třeba si pamatovat, že pokud máte responzivní web (které byste měli) s rozložením, které se mění na základě velikostí obrazovky a zařízení, nebude mít nadpis vždy stejnou velikost. Pokud potřebujete, aby váš nadpis měl přesnou velikost, může to způsobit problémy. Je to jeden z důvodů, proč se obecně vyhýbáme obrázkům na pozadí v nadpisu, tak cool, jak někdy vypadají.
Výměna obrázku v nadpisech
Toto je další populární technika pro webové designéry, protože umožňuje vytvořit grafický nadpis a nahradit text nadpisu tímto obrázkem. Jedná se popravdě o zastaralou praxi webových designérů, kteří měli přístup k velmi malému počtu písem a chtěli ve své práci použít exotičtější písma. Vzestup webových písem skutečně změnil způsob, jakým designéři přistupují k webům. Nadpisy lze nyní nastavit v široké škále písem a obrázky s těmito vloženými písmy již nejsou potřeba. Na starších webech, které dosud nebyly aktualizovány na modernější postupy, tedy jako náhradu za titulky najdete pouze obrázky CSS.
Upravil Jeremy Girard