header

Definition

A header is a section of a document or webpage that typically contains introductory information, such as the title, author, date, or other relevant details. In web development, headers are crucial as they provide context and structure to the content that follows. They can also include navigation links or branding elements. In HTML, headers are defined using specific tags (like <h1>, <h2>, etc.) to denote their importance and hierarchy, which assists both users and search engines in understanding the content layout.

Why it matters

Headers are vital for both user experience and search engine optimisation (SEO). They help users quickly locate the information they need by breaking up text and providing clear sections. Properly structured headers also improve accessibility for screen readers, making content more navigable for individuals with disabilities. Furthermore, search engines use headers to index content effectively, which can influence a webpage's ranking in search results. Thus, a well-crafted header can significantly enhance the visibility and usability of a website.

Example in VCA

In the Vibe Code Academy course, headers are used to organise lessons and modules effectively. For instance, each module begins with a main header that outlines the topic, followed by sub-headers that break down the content into manageable sections. This structure allows learners to navigate through the course material easily and locate specific information without feeling overwhelmed. By using headers consistently, VCA ensures that students can follow along and understand the flow of the course.

Another Real World Example

Consider a news website where articles are displayed. Each article typically starts with a prominent header that includes the headline, followed by sub-headers that categorise the content into sections like introduction, body, and conclusion. This structure not only aids readers in digesting the information but also helps search engines index the article more accurately. For example, a header like "Breaking News: Local Festival Celebrates Community Spirit" immediately informs readers about the article's focus, while sub-headers guide them through the details of the event.

Common mistakes

Using multiple <h1> tags on a single page can confuse search engines and users about the main topic.
Failing to use headers at all can make content appear cluttered and difficult to read, leading to a poor user experience.
Overloading headers with keywords for SEO can make them sound unnatural and detract from the content's clarity.
Neglecting to update headers when content changes can result in misleading information, confusing readers.
Using vague or generic headers does not provide enough context, making it hard for users to understand the content's purpose.

Related terms

<a href="/glossary/html" data-glossary="html" class="glossary-term">html</a>
<a href="/glossary/frontend" data-glossary="frontend" class="glossary-term">frontend</a>