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ł czytanego tekstu. Te nagłówki są kodowane za pomocą HTML elementy nagłówka — 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 określonymi atrybutami klasy lub podziały z elementami klasy. Powodem, dla którego często słyszymy o tej niepoprawnej praktyce, jest to, że projektantowi „nie podoba się wygląd nagłówków”. Domyślnie nagłówki są wyświetlane pogrubioną czcionką i mają większy rozmiar, zwłaszcza elementy h1 i h2, które są wyświetlane czcionką znacznie większą niż reszta tekstu strony. Pamiętaj, że to tylko domyślny wygląd tych elementów! Z CSS, możesz sprawić, by nagłówek 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ć znaczników nagłówków zamiast podziałów?
Jest to najlepszy powód, aby używać nagłówków i używać ich we właściwej kolejności (tj. h1, potem h2, potem h3 itd.). Wyszukiwarki nadać najwyższą wagę tekstowi zawartemu w tagach nagłówka, ponieważ ten tekst ma wartość semantyczną. Innymi słowy, oznaczając tytuł strony H1, informujesz pająka wyszukiwarki, że jest to główny cel strony. Nagłówki h2 mają podkreślenie #2 i tak dalej.
Nie musisz pamiętać, jakich klas 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 raz zdefiniować w arkuszu stylów i gotowe. 6 miesięcy później, kiedy dodajesz kolejną stronę, po prostu dodajesz tag H1 na górze swojej strony, nie masz aby wrócić do innych stron, aby dowiedzieć się, jakiego identyfikatora stylu lub klasy użyłeś do zdefiniowania głównego nagłówka i podtytułów.
Zapewnij mocny zarys strony
Kontury ułatwiają czytanie tekstu. Dlatego większość amerykańskich szkół uczyło uczniów pisania konspektu przed napisaniem artykułu. Gdy używasz tagów nagłówków w formacie konspektu, Twój tekst ma przejrzystą strukturę, która bardzo szybko staje się widoczna. Ponadto istnieją narzędzia, które mogą przeglądać konspekt strony w celu przedstawienia streszczenia, a te opierają się na tagach nagłówka dla struktury konspektu.
Twoja strona będzie miała sens nawet po wyłączeniu stylów
Nie każdy może wyświetlać lub używać arkuszy stylów (i wracamy do punktu pierwszego — wyszukiwarki wyświetlają zawartość (tekst) Twojej strony, a nie arkusze stylów). Jeśli używasz tagów nagłówków, zwiększasz dostępność swoich stron, ponieważ nagłówki zawierają informacje, które: Znacznik DIV nie.
Jest pomocny dla czytników ekranu i ułatwień dostępu do stron internetowych
Właściwe użycie nagłówków tworzy logiczną strukturę dokumentu. To jest to, czego używają czytniki ekranu do „odczytywania” witryny użytkownikowi z wadami wzroku, dzięki czemu witryna jest dostępna dla osób niepełnosprawnych.
Stylizuj tekst i czcionkę swoich nagłówków
Najprostszym sposobem na odejście od „dużego, pogrubionego i brzydkiego” problemu tagów nagłówków jest stylizacja tekstu w taki sposób, w jaki chcesz, aby wyglądał. W rzeczywistości, pracując nad nową witryną, najlepiej jest najpierw napisać styl akapitowy, 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órych można użyć):
Możesz modyfikować czcionki nagłówka lub zmień styl tekstu, a nawet kolor tekstu. Wszystko to zmieni Twój „brzydki” nagłówek w coś bardziej żywego i zgodnego z Twoim projektem.
Granice mogą ubierać nagłówki
Ramki to świetny sposób na ulepszenie nagłówków i łatwe dodawanie. Ale nie zapomnij poeksperymentować z obramowaniem — nie potrzebujesz obramowania po obu stronach nagłówka. I możesz użyć czegoś więcej niż tylko zwykłych, nudnych obramowań.
Dodaliśmy górną i dolną ramkę do naszego przykładowego nagłówka, aby wprowadzić kilka interesujących stylów wizualnych. Możesz dodać obramowania w dowolny sposób, aby uzyskać pożądany styl projektowania.
Dodaj obrazy tła do nagłówków, aby uzyskać jeszcze więcej pizazz
Wiele witryn sieci Web ma u góry strony sekcję nagłówka zawierającą nagłówek — zazwyczaj tytuł witryny i grafikę. Większość projektantów myśli o tym jako o dwóch oddzielnych elementach, ale nie musisz. Jeśli grafika służy tylko do dekoracji nagłówka, dlaczego nie dodać jej do stylów nagłówków?
Sztuczka w tym nagłówku polega na tym, że wiemy, że nasz obraz ma 90 pikseli wysokości. Dodaliśmy więc dopełnienie na dole nagłówka o wielkości 90 pikseli (dopełnienie: 0,5 0 90px 0p;). Możesz bawić się marginesami, wysokością linii i dopełnieniem, aby tekst nagłówka był wyświetlany dokładnie tam, gdzie chcesz.
Jedną rzeczą, o której należy pamiętać podczas korzystania z obrazów, jest to, że jeśli masz responsywna strona internetowa (co powinieneś) z układem, który zmienia się w zależności od rozmiarów ekranu i urządzeń, Twój nagłówek nie zawsze będzie miał ten sam rozmiar. Jeśli chcesz, aby nagłówek miał dokładny rozmiar, może to powodować problemy. Jest to jeden z powodów, dla których generalnie unikamy obrazów tła w nagłówku, choć czasami mogą wyglądać fajnie.
Zastępowanie obrazu w nagłówkach
Jest to kolejna popularna technika dla projektantów stron internetowych, ponieważ pozwala stworzyć graficzny nagłówek i zastąpić tekst tagu nagłówka tym obrazem. Prawdę mówiąc, jest to przestarzała praktyka projektantów stron internetowych, którzy mieli dostęp do bardzo niewielu czcionek i chcieli używać w swojej pracy bardziej egzotycznych czcionek. Rozwój czcionek internetowych naprawdę zmienił podejście projektantów do witryn. 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 obrazy CSS zastępujące nagłówki w starszych witrynach, które nie zostały jeszcze zaktualizowane do bardziej nowoczesnych praktyk.
Edytowane przez Jeremy'ego Girarda