What is a Header?
A header is a group of content in a document, message, or data packet that contains information such as the author’s name, page number, subject-line, timestamp, and or other essential information.
A header may refer to the following: HTTP message header, HTML document header, word processing document header, or data message header.
Word processing documents
In a word processing document, a Header is located at the very top of the page and is usually distinguishable (i.e text colour) from the page’s content. This information is then displayed at the very top of all pages so that the reader can easily locate it. Prime examples are page numbers, which allow readers to keep track of their progress.
HTML Headers
HTML is a term used by all programmers and UX designers. HTML stands for Hypertext Markup Language, which is a universal language that all computers use as a blueprint for how to display a web page. An example of HTML is:
Headers and the <header> element acts as a grouping tag, keep in mind that the text “header” is not actually seen by users on a webpage. They are two types, a page header or a section header. In the example below, despite being on two different pages the navigation bar, header image, and title — followed by the subtitle are shown on all pages. This is the page’s <header> element.
Note: the<header> tag is not the same as the <Head>, or <Heading> tags, as it does not use to indicate a new section but groups different sections/tags.
A great analogy to think of is a header is like a shopping cart: you separate the more fragile items such as your eggs and bananas in the smaller seat-like basket. Whereas, the heavier items go/are group below the cart. Note: a header element contains related contents and no two different header elements are placed within each other.
Importance to Web/UX designers
Coding is a programming language used by designs and developers to create websites. A UX designer's understanding of headers makes it easier to structure and organize various contents. For instance, if you are creating a website for a spokesperson, your page header may include the logo, person’s name, and or a picture of the person. It's vital that you put thought into this introductory content because it is the first thing your visitors see or interact with on your website.
Did you find this helpful?
I hope you now understand a little more about headers and their different types. If you find this post helpful, share your thoughts in the comments section below.
Subscribe to my website at
