Nagłówki są powszechne na większości stron internetowych. W rzeczywistości prawie każdy dokument tekstowy ma co najmniej jeden nagłówek, dzięki czemu znasz tytuł tego, co czytasz. Te nagłówki są kodowane przy użyciu elementów nagłówka HTML - h1, h2, h3, h4, h5 i h6.
W niektórych witrynach może się okazać, że nagłówki są kodowane bez użycia tych elementów. Zamiast tego nagłówki mogą zawierać akapity z dodanymi atrybutami klasy lub podziały z elementami klasy. Powodem, dla którego często słyszę o tej niewłaściwej praktyce, jest to, że projektant "nie lubi wyglądu nagłówków". Domyślnie nagłówki są pogrubione i mają większy rozmiar, zwłaszcza elementy h1 i h2, które wyświetlają o wiele większy rozmiar czcionki niż reszta tekstu strony. Pamiętaj, że to tylko domyślny wygląd tych elementów! Dzięki CSS możesz wyglądać tak, jak chcesz! Możesz zmienić rozmiar czcionki, usunąć pogrubienie i wiele więcej. Nagłówki to właściwy sposób kodowania nagłówków strony. Oto kilka powodów.
Dlaczego warto używać nagłówków zamiast DIV i stylizacji
Wyszukiwarki podobne do nagłówków
Jest to najlepszy powód używania nagłówków i używania ich we właściwej kolejności (np. H1, a następnie h2, a następnie h3 itd.). Wyszukiwarki nadają najwyższą wagę tekstowi zawartemu w tagach nagłówka, ponieważ ma on wartość semantyczną dla tego tekstu. Innymi słowy, etykietując tytuł strony H1, mówisz pająkowi wyszukiwarki, że jest to pierwszy punkt na stronie. Nagłówki h2 mają podłoże 2 i tak dalej.
Nie musisz pamiętać, jakie klasy użyłeś do zdefiniowania nagłówków
Kiedy wiesz, że wszystkie twoje strony internetowe będą miały H1, który jest pogrubiony, 2em i żółty, możesz to zdefiniować raz w swoim arkuszu stylów i gotowe. 6 miesięcy później, gdy dodajesz kolejną stronę, po prostu dodajesz znacznik H1 na górze strony, nie musisz wracać do innych stron, aby dowiedzieć się, jaki styl lub klasę użyłeś do zdefiniowania głównej strony nagłówek i pod-głowice.
Zapewniają silny zarys strony
Kontury czynią tekst łatwiejszym do odczytania. Właśnie dlatego większość amerykańskich szkół nauczyła uczniów pisania szkicu przed napisaniem artykułu. Kiedy używasz znaczników nagłówków w formacie konspektu, twój tekst ma jasną strukturę, która staje się bardzo szybko widoczna. Ponadto istnieją narzędzia, które mogą przeglądać zarys strony w celu zapewnienia streszczenia, a te opierają się na znacznikach nagłówków dla struktury konspektu.
Twoja strona poczuje się wyczuwalna nawet po wyłączeniu stylów
Nie każdy może przeglądać lub używać arkuszy stylów (a to wraca do # 1 - wyszukiwarki wyświetlają treść (tekst) strony, a nie arkusze stylów). Jeśli użyjesz tagów nagłówków, zwiększysz swoją stronę, ponieważ nagłówki dostarczają informacji, że tag DIV nie będzie.
Jest pomocny dla czytników ekranu i dostępności witryny
Właściwe użycie nagłówków tworzy logiczną strukturę dokumentu. To właśnie czytniki ekranu będą używać do "czytania" witryny użytkownikowi z zaburzeniami widzenia, dzięki czemu Twoja strona stanie się dostępna dla osób niepełnosprawnych.
Styl tekstu i czcionki nagłówków
Najprostszym sposobem na odejście od "dużego, odważnego i brzydkiego" problemu z nagłówkami jest stylizacja tekstu w taki sposób, w jaki chcesz wyglądać. W rzeczywistości, pracując nad nową witryną najlepiej jest zazwyczaj najpierw napisać style akapitu, h1, h2 i h3. Trzymaj się tylko rodziny czcionek i rozmiaru / wagi. Na przykład może to być wstępny arkusz stylów dla nowej witryny (to tylko kilka przykładowych stylów, które można zastosować):
Możesz modyfikować czcionki nagłówka lub zmieniać styl tekstu, a nawet kolor tekstu. Wszystko to sprawi, że Twój "brzydki" nagłówek zmieni się w coś bardziej dynamicznego i zgodnego z Twoim projektem.
Granice mogą ubierać się w nagłówki
Granice to świetny sposób na poprawę nagłówków i są łatwe do dodania. Ale nie zapomnij eksperymentować z granicami - nie potrzebujesz obramowania po obu stronach nagłówka. I możesz użyć czegoś więcej niż zwykłych nudnych granic.
Dodałem górną i dolną granicę do mojego przykładowego nagłówka, aby przedstawić ciekawe style wizualne. Możesz dodać obramowanie w dowolny sposób, aby uzyskać pożądany styl.
Dodaj obrazy tła do nagłówków, aby uzyskać jeszcze więcej Pizazz
Wiele witryn sieci Web ma sekcję nagłówka u góry strony zawierającą nagłówek - zazwyczaj tytuł strony i grafikę. Większość projektantów myśli o tym jako o dwóch osobnych elementach, ale nie musisz tego robić. Jeśli grafika jest tylko po to, aby ozdobić nagłówek, to dlaczego nie dodać jej do stylów nagłówków?
Sztuczka do tego nagłówka jest taka, że wiem, że mój obraz ma 90 pikseli wysokości. Więc dodałem dopełnienie do dołu nagłówka 90px (dopełnienie: 0.5 0 90 pikseli 0p;). Możesz grać z marginesami, wysokością linii i dopełnieniem, aby tekst nagłówka wyświetlał się dokładnie tam, gdzie chcesz.
Należy pamiętać o tym, że jeśli masz responsywną stronę internetową (która powinieneś) z układem, który zmienia się w zależności od rozmiarów ekranu i urządzeń, nagłówek nie zawsze będzie taki sam. Jeśli potrzebujesz nagłówka, który ma być dokładnym rozmiarem, może to powodować problemy. Jest to jeden z powodów, dla których generalnie unikam obrazów tła w nagłówku, tak fajnych, jak czasami mogą wyglądać.
Wymiana obrazu w nagłówkach
Jest to kolejna popularna technika dla projektantów stron internetowych, ponieważ pozwala na stworzenie graficznego nagłówka i zastąpienie tekstu nagłówka tym obrazem.Jest to zgodne z prawdą praktykowane przez projektantów stron internetowych, którzy mieli dostęp do bardzo niewielu czcionek i chcieli używać bardziej egzotycznych czcionek w swojej pracy. Rozwój czcionek internetowych naprawdę zmienił podejście projektantów do stron. Nagłówki można teraz ustawić w szerokiej gamie czcionek, a obrazy z osadzonymi czcionkami nie są już potrzebne. W związku z tym można znaleźć tylko zastępowanie obrazów CSS dla nagłówków na starszych stronach, które nie zostały jeszcze zaktualizowane do bardziej nowoczesnych praktyk.
Edytowane przez Jeremy'ego Girarda w dniu 9/17/17
