Nadpisy sú bežné na väčšine webových stránok. V skutočnosti má každý textový dokument väčšinou aspoň jeden nadpis, aby ste poznali názov toho, čo čítate. Tieto nadpisy sú kódované pomocou HTML prvky nadpisu - h1, h2, h3, h4, h5 a h6.
Na niektorých stránkach môžete zistiť, že nadpisy sú kódované bez použitia týchto prvkov. Namiesto toho môžu nadpisy používať odseky, do ktorých sú pridané konkrétne atribúty triedy, alebo divízie s prvkami triedy. Dôvod, ktorý o tejto nesprávnej praxi často počujeme, je ten, že dizajnérovi „sa nepáči, ako vyzerajú nadpisy“. V predvolenom nastavení sú nadpisy zobrazené tučne a majú väčšiu veľkosť, najmä prvky h1 a h2, ktoré sa zobrazujú v oveľa väčšej veľkosti písma ako zvyšok textu stránky. Majte na pamäti, že toto je iba predvolený vzhľad týchto prvkov! S CSS, môžete smerovať tak, ako chcete! Môžete zmeniť veľkosť písma, odstrániť tučné písmo a ešte oveľa viac. Nadpisy sú správnym spôsobom, ako kódovať nadpisy stránok. Tu uvádzam niekoľko dôvodov.
Prečo používať značky nadpisu skôr ako divízie
To je najlepší dôvod na použitie nadpisov a ich použitie v správnom poradí (tj. h1, potom h2, potom h3 atď.). Vyhľadávače dajte textu, ktorý má vo vnútri značiek nadpisov najvyššiu váhu, pretože tento text má sémantickú hodnotu. Inými slovami, označením názvu stránky H1 poviete vyhľadávaču, že na stránku je zameraný č. 1. Nadpisy H2 majú zvýraznenie # 2 atď.
Nemusíte si pamätať, aké triedy ste použili na definovanie svojich titulkov
Ak viete, že všetky vaše webové stránky budú mať H1, ktorá je tučná, 2em a žltá, môžete ju v šablóne so štýlmi definovať a hotovo. O 6 mesiacov neskôr, keď pridávate ďalšiu stránku, stačí pridať značku H1 do hornej časti stránky, čo nemáte vrátiť sa na ďalšie stránky a zistiť, aký štýl alebo triedu ste použili na definovanie hlavného nadpisu a podnadpisov.
Poskytnite silný obrys stránky
Obrysy uľahčujú čítanie textu. Preto väčšina amerických škôl učila študentov písať osnovy skôr, ako budú písať príspevok. Pri použití značiek nadpisu vo formáte osnovy má váš text jasnú štruktúru, ktorá sa prejaví veľmi rýchlo. Navyše existujú nástroje, ktoré dokážu skontrolovať obrys stránky a poskytnúť jej súhrn. Tieto sa spoliehajú na značky nadpisu pre štruktúru obrysu.
Vaša stránka bude mať zmysel aj pri vypnutých štýloch
Nie každý môže prezerať alebo používať šablóny štýlov (a to sa vracia k číslu 1 - vyhľadávače zobrazujú obsah (text) vašej stránky, nie šablóny štýlov). Ak používate značky nadpisu, robíte stránky prístupnejšími, pretože nadpisy poskytujú informácie, ktoré a Značka DIV by nie.
Je to užitočné pre čítačky obrazovky a prístupnosť webových stránok
Správne použitie nadpisov vytvára logickú štruktúru dokumentu. To je to, čo program na čítanie obrazovky použije na „prečítanie“ webu používateľovi so zrakovým postihnutím, čím sa váš web stane prístupným pre ľudí so zdravotným postihnutím.
Upravte štýl textu a písma nadpisov
Najjednoduchší spôsob, ako sa vzdialiť od „veľkého, odvážneho a škaredého“ problému značiek nadpisov, je upraviť štýl textu tak, ako chcete. V skutočnosti je pri práci na novom webe najlepšie najskôr písať štýly odsekov, h1, h2 a h3. Zostaňte iba s rodinou písma a veľkosťou / hmotnosťou. Môže to byť napríklad predbežná šablóna štýlov pre nový web (je to iba niekoľko príkladov štýlov, ktoré je možné použiť):
Môžete upraviť písma nadpisu alebo zmeniť štýl textu alebo dokonca farbu textu. To všetko premení váš „škaredý“ nadpis na niečo živšie a v súlade s vašim dizajnom.
Hranice môžu zdobiť titulky
Okraje sú skvelým spôsobom, ako vylepšiť svoje nadpisy, a dajú sa ľahko pridať. Nezabudnite však experimentovať s okrajmi - nepotrebujete okraj na každej strane nadpisu. A môžete použiť nielen obyčajné nudné hranice.
Do ukážkového nadpisu sme pridali horné a spodné ohraničenie, aby sme predstavili niekoľko zaujímavých vizuálnych štýlov. Orámovanie môžete pridať ľubovoľným spôsobom, ktorým chcete dosiahnuť požadovaný štýl dizajnu.
Pridajte obrázky na pozadie do svojich nadpisov a ešte viac Pizazzu
Mnoho webových stránok má sekciu hlavičky v hornej časti stránky, ktorá obsahuje nadpis - zvyčajne nadpis a grafiku. Väčšina návrhárov to považuje za dva samostatné prvky, ale nemusíte. Ak je tam grafika iba na ozdobu nadpisu, tak prečo ju nepridať do štýlov nadpisov?
Trik v tomto nadpise spočíva v tom, že vieme, že náš obrázok je vysoký 90 pixelov. Takže sme do dolnej časti nadpisu s veľkosťou 90 pixlov pridali výplň (výplň: 0,5 0 90px 0p;). Môžete sa hrať s okrajmi, výškou čiary a výplňou, aby sa text nadpisu zobrazil presne tam, kde chcete.
Pri používaní obrázkov je treba pamätať na to, že ak máte responzívny web (ktoré by ste mali) s rozložením, ktoré sa mení na základe veľkostí obrazovky a zariadení, nebude mať nadpis vždy rovnakú veľkosť. Ak potrebujete, aby mal váš nadpis presnú veľkosť, mohlo by to spôsobiť problémy. Je to jeden z dôvodov, prečo sa všeobecne vyhýbame obrázkom na pozadí v nadpise, tak cool, ako niekedy vyzerajú.
Nahradenie obrázka v nadpisoch
Toto je ďalšia populárna technika pre webových dizajnérov, pretože vám umožňuje vytvoriť grafický nadpis a nahradiť text značky nadpisu týmto obrázkom. Toto je po pravde opakovaná prax od webových dizajnérov, ktorí mali prístup k veľmi malému počtu typov písma a chceli pri svojej práci použiť exotickejšie typy písma. Nárast webových písiem skutočne zmenil spôsob, akým dizajnéri pristupujú k webom. Nadpisy je teraz možné nastaviť v širokej škále typov písma a obrázky s vloženými typmi písma už nie sú potrebné. Preto ako náhradu za titulky obrázky CSS nájdete iba na starších stránkach, ktoré ešte neboli aktualizované na modernejšie postupy.
Upravil Jeremy Girard