nagłówki HTML: kompletny przewodnik dodawania nagłówków dla struktury dokumentu
nagłówki treści
sześć znaczników nagłówków jest ważną częścią zapisu treści HTML. Oprócz dość oczywistej potrzeby, którą wypełniają (ludzie czasami chcą umieścić nagłówki na szczycie rzeczy), tagi nagłówkowe mają również wartość SEO, pomagają być bardziej zorganizowanym pisarzem i sprawiają, że strony są bardziej przyjazne dla użytkownika.,
Tagi nagłówkowe i SEO
są dwie rzeczy, które wyszukiwarka próbuje dowiedzieć się o twojej stronie:
- o co chodzi?
- jak dobrze jest?
ogólnie rzecz biorąc, linki do strony są używane jako miara jakości (jak dobra jest), a analiza na stronie jest używana, aby dowiedzieć się, o czym jest strona. (Oczywiście niektóre nakładają się tutaj: Google ocenia jakość strony, patrząc na stronę, a także stara się dowiedzieć, o czym jest strona, patrząc na to, co mówią inne strony, gdy linkują do niej.,) Jedną z (wielu) rzeczy, które Google i inne wyszukiwarki patrz determinują zawartość strony, są słowa, które pojawiają się wewnątrz tagów nagłówków. Dlatego, jeśli próbujesz uszeregować konkretne słowa lub frazy, naprawdę warto włączyć te słowa i frazy do tagów nagłówkowych.
bardziej zorganizowane pisanie
Kiedy ludzie piszą bez użycia tagów nagłówkowych (powiedzmy, pisząc ręcznie lub w edytorze wizualnym, takim jak MS Word), często piszą po prostu długimi, nieprzerwanymi strumieniami tekstu, które trwają zbyt długo., Albo, co gorsza, mogą dodać nagłówki wizualne (z pogrubioną czcionką, wielkimi literami, większym tekstem lub czymś innym. Jest to bardzo powszechne, ponieważ ludzie instynktownie wiedzą, że powinni dzielić tekst na mniejsze kawałki. Problem polega na tym, że nie jest jasne, w jaki sposób różne sekcje są ze sobą powiązane. Czy sekcja nagłówkowa z czcionką 15pt ma być podsekcją nagłówków części z czcionką 14pt pogrubioną? Często nawet pisarz nie wie, bo tak naprawdę nie myślał o tym.,
znaczniki nagłówkowe tworzą hierarchię treści
na stronie z pojedynczym kawałkiem treści (który powinien być większością stron), głównym tytułem tej treści powinien być<h1> tag. Główne sekcje w tej treści powinny być oznaczone <h2>. Podrozdziały w tych sekcjach powinny mieć nagłówki <h3> I tak dalej. Powinno być możliwe wyodrębnienie konturu ze znaczników nagłówka. (W rzeczywistości robimy to — spójrz na Widżet zawartości na górze strony.,) Ta struktura sprawia, że pisanie jest bardziej zorganizowane, co (co najmniej 99% czasu) również sprawia, że pisanie jest lepsze.
nagłówki są dobre dla użytkowników
oto brudny mały sekret o treści online: czytelnicy skim. Prawie nikt nie czyta każdego słowa artykułu online., I niewiele możesz z tym zrobić. Nie możesz tego powstrzymać. Ale możesz sprawić, że odpieniacze będą mieli coś do zatrzasku, gdy ich oczy przesuwają się w dół strony. Nagłówki, jeśli są dobrze rozpowszechnione i istotne dla ich treści, dają skimmerom kilka małych sposobów powrotu do tekstu artykułu. Rozbijają też artykuł na pozornie strawne kawałki o wielkości kęsa, aby nie denerwować się długim solumnem nieprzerwanego tekstu.,
i nie zapomnij połączyć
począwszy od HTML5, możesz połączyć się z dowolnym elementem na stronie, dodając znak skrótu (#) Iid elementu. (W przeszłości można było łączyć tylko z elementami zakotwiczenia.) Dodając id do każdego nagłówka na swojej stronie, możesz zezwolić ludziom na linkowanie do dowolnego miejsca w dokumencie. (Ponownie zobacz, jak działają łącza do treści u góry strony.,) Te linki w dokumencie mogą być niezwykle pomocne, zwłaszcza jeśli dostarczasz treści odniesienia jakiegokolwiek rodzaju lub jeśli Twoje artykuły są szczególnie długie.
używanie znaczników nagłówkowych do struktury treści
Ogólnie rzecz biorąc, istnieją dwa rodzaje stron z treścią: strony z pojedynczą treścią (które prezentują pojedynczy fragment treści) i strony z indeksem (które zawierają kilka treści). Strony indeksu obejmują główną stronę bloga witryny, archiwa kategorii i tagów, strony autora, które zawierają listę wszystkich artykułów napisanych przez autora i tak dalej., Następnie jest również zawartość (paski boczne, widżety, stopki), która pojawia się na prawie każdej stronie i która nie jest tak naprawdę „treścią.”Sposób używania tagów nagłówkowych w takich sytuacjach może mieć wpływ na SEO i użyteczność.
<h1> I <h2> elementy
na pojedynczych stronach treści w całej witrynie, tytuł tego konkretny fragment treści powinien prawie zawsze znajdować się w znaczniku <h1> blisko góry <body>., Następnie, jak wspomniano powyżej, Twoje sekcje w artykule mogą używać znaczników <h2>.
<main><article> <h1>All About Headlines</h1> . . . <h2>Headlines and SEO</h2> . . . <h2>Headlines and Structure</h2> . . . </article></main> na stronie indeksu Zwykle warto umieścić tytuł strony w znaczniku <h1> lub umieścić tam nazwę indeksu: nazwę kategorii, nazwę autora lub cokolwiek, co definiuje tę stronę. Następnie tytuły wszystkich poszczególnych utworów, które są tam wymienione, powinny mieć element <h2> dla ich tytułów.,
w przeszłości powszechne było używanie znacznika<h2> dla tytułu strony, gdy pojawia się on na stronach z pojedynczą zawartością.
<header> <h2>HTML Code Tutorials</h2> <nav><!-- menu --></nav> </header> <main> <h1>Actual Title of This Page</h1? . . . </main> opinie na ten temat są mieszane, ale tendencja jest coraz mniejsza. Więcej osób po prostu umieszcza tytuł (i, co bardziej prawdopodobne, logo img) w nagłówku i zapisuje znaczniki nagłówkowe dla określonej treści na stronie. Część własnego rozważenia, czy to zrobić, prawdopodobnie będzie miała związek z tym, jak ważny jest tytuł Twojej własnej witryny w odniesieniu do Twoich celów SEP.,
widżety i inne „non-content”
do niedawna powszechne było również używanie<h3> lub<h4> elementów dla tytułów widżetów w paskach bocznych. Wiele systemów zarządzania treścią po prostu robi to automatycznie, więc może to nie mieć znaczenia dla Ciebie. Ale jest to coś, o czym warto pomyśleć, jeśli projektujesz znaczniki całej strony od zera. Czy chcesz, aby elementy nagłówka sugerowały, że prawdziwym znaczeniem Twojej strony jest „logowanie ” lub”zapisz się na listę mailingową”?, (Oczywiście, można tego częściowo uniknąć, umieszczając pasek boczny w elemencie <aside>.)
