The term visual hierarchy has been mentioned in a previous lesson, but what does it mean? Visual hierarchy is the order in which we look at and process information. Look at the examples below. Example 1 is lacking visual hierarchy. Everything is the same size--the same format and the same level of importance. The average person will scan a document for relevant information, and when a page is formatted like this, it's harder to do.

In Example 2, the same text has been given a visual hierarchy. It's much easier to scan because we know what information we should read first, second, and third. Visual hierarchy is present in all forms of design and can be used in web design with the application text styling.

Example 1

Lorem Ipsum
Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut tristique et egestas quis. In ornare quam viverra orci sagittis eu volutpat odio facilisis. Aliquet porttitor lacus luctus accumsan tortor posuere ac. Euismod nisi porta lorem mollis aliquam ut porttitor leo.
Quam Elementum
Quam elementum pulvinar etiam non. In mollis nunc sed id semper risus in hendrerit gravida. Enim nunc faucibus a pellentesque. Pulvinar pellentesque habitant morbi tristique senectus et netus et. At imperdiet dui accumsan sit amet nulla.
Sed Lectus Vestibulum
Sed lectus vestibulum mattis ullamcorper. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Et tortor at risus viverra adipiscing at in tellus integer. Faucibus a pellentesque sit amet porttitor eget. Turpis egestas maecenas pharetra convallis posuere morbi leo. Tellus id interdum velit laoreet id donec. Eu lobortis elementum nibh tellus molestie. Elit duis tristique sollicitudin nibh. At tempor commodo ullamcorper a. Orci a scelerisque purus semper. Mattis Enim
Mattis enim ut tellus elementum sagittis. Non curabitur gravida arcu ac tortor. Quam vulputate dignissim suspendisse in est ante in nibh. Eu facilisis sed odio morbi. Egestas fringilla phasellus faucibus scelerisque. Sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit. At tempor commodo ullamcorper a lacus vestibulum sed arcu. Interdum posuere lorem ipsum dolor sit. Nulla at volutpat diam ut venenatis tellus in. Sit amet luctus venenatis lectus magna. Accumsan lacus vel facilisis volutpat est velit egestas. Ipsum a arcu cursus vitae congue mauris rhoncus. Vitae ultricies leo integer malesuada nunc vel risus commodo. Dictum sit amet justo donec enim diam vulputate ut.

Example 2

Lorem Ipsum

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut tristique et egestas quis. In ornare quam viverra orci sagittis eu volutpat odio facilisis. Aliquet porttitor lacus luctus accumsan tortor posuere ac. Euismod nisi porta lorem mollis aliquam ut porttitor leo.

Quam Elementum

Quam elementum pulvinar etiam non. In mollis nunc sed id semper risus in hendrerit gravida. Enim nunc faucibus a pellentesque. Pulvinar pellentesque habitant morbi tristique senectus et netus et. At imperdiet dui accumsan sit amet nulla.

Sed Lectus Vestibulum

Sed lectus vestibulum mattis ullamcorper. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Et tortor at risus viverra adipiscing at in tellus integer. Faucibus a pellentesque sit amet porttitor eget. Turpis egestas maecenas pharetra convallis posuere morbi leo. Tellus id interdum velit laoreet id donec. Eu lobortis elementum nibh tellus molestie. Elit duis tristique sollicitudin nibh. At tempor commodo ullamcorper a. Orci a scelerisque purus semper.

Mattis Enim

Mattis enim ut tellus elementum sagittis. Non curabitur gravida arcu ac tortor. Quam vulputate dignissim suspendisse in est ante in nibh. Eu facilisis sed odio morbi. Egestas fringilla phasellus faucibus scelerisque. Sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit. At tempor commodo ullamcorper a lacus vestibulum sed arcu. Interdum posuere lorem ipsum dolor sit. Nulla at volutpat diam ut venenatis tellus in. Sit amet luctus venenatis lectus magna. Accumsan lacus vel facilisis volutpat est velit egestas. Ipsum a arcu cursus vitae congue mauris rhoncus. Vitae ultricies leo integer malesuada nunc vel risus commodo. Dictum sit amet justo donec enim diam vulputate ut.

Note: This sample text is what's commonly called Lorem ipsum, which is a fairly standard filler text used throughout the design community. You can learn more about it by visiting lipsome.com or loremipsum.io.

Header tags, also known as heading tags, are the main tools in building your content's hierarchy. There are six total header tags to work with, and they are represented by the tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. They are typically used to contain titles or headlines or similar important content that should be differentiated from the rest of the page's text in a pronounced fashion.

<h1>Header Tag 1</h1>
<h2>Header Tag 2</h2>
<h3>Header Tag 3</h3>
<h4>Header Tag 4</h4>
<h5>Header Tag 5</h5>
<h6>Header Tag 6</h6>

Header Tag 1

Header Tag 2

Header Tag 3

Header Tag 4

Header Tag 5

Header Tag 6

The <h1> tag is thought of as the all-encompassing title or heading that describes most of the page. Therefore, there should be only one of these on a page, even though multiple are technically allowed. Each subcategory of content, or step lower in a section's importance, should be represented by the next number of header tag.

Think of using header tags like writing an outline. In an outline, any sub-topics that fall under the main topic are indented and labeled as the next category down. But in web design, any titles that fall under the main topic (<h1>) are indicated as <h2>. In the same pattern, sub-categories under an <h2> topic are labeled as <h3>, and so on, going down one level at a time.

<h1>I. Main headline</h1>
<h2>1. Subcategory</h2>
<h3>a. Sub-subcategory</h3>

Header tags come built with default font sizes and font weights (how bold they are), with <h1> being the largest and boldest. Each one also adds space above and below itself to better stand out from other text. However, this doesn't mean that header tags should be applied to text only to apply these characteristics. The main purpose of using header tags is for semantics, not styling. (Semantics refers to what text means.) Header tags should be reserved for holding different levels of important information. This helps your readers by organizing your content logically.

And as an added bonus, search engines may take notice of content contained in header tags. So using these tags appropriately can even positively influence web traffic to your site.

Use the practice coding space below or your own text editor to try out some of the heading tags we've just learned. The practice space is formatted to be the <body> of a document, so there is no need to add the full document structure. (This will be true for every practice space provided in this course.) You can copy and paste any of the code above or write your own, then click the Run Code button to see what happens!

How should web designers prioritize their text content?