What?

A fundamental principle of web design is that a page's content is distinct from its design.

The purpose of a web page is to convey information. Just as graphic design presents a visual hierarchy of importance using things like size and contrast (etc), good web design presents a conceptual hierarchy of importance using HTML tags.

The visual design should frame the information, support the underlying message, highlight the critical features, and guide the user through the page... but the content itself must be organized in a way that makes sense regardless of the visual design!

Why?

The most important feature of the web (versus phone apps or desktop programs) is its universal reach. That is, the ability for anyone anywhere to access web pages from any device, whether it's new or old, fast or slow, Mac or Windows, iOS or Android, desktop or laptop or tablet or phone or watch or TV or refrigetator.

Some people have very limited bandwidth on their mobile plan or cannot afford a modern phone, so being able to get to the info they need can be a challenge on complex sites.

Some people are stuck with old computers at their work or school, so loading pages with tons of unnecessary images and effects can take a long time.

Some people have visual impairments and rely on computer programs to read web pages out loud to them, so a well-organized non-visual structure is critical for them to be able to navigate the page.

And all people rely on search engines (e.g. Google) to find the content they're looking for. Web crawlers utilize the structure of a page to make sense of its content, so if the page relies solely on visuals to convey importance and understanding, it will not rank well in search results.

How?

In HTML, you structure content by placing it in block-level tags. Usually there will be several pieces of content that are all about the same topic -- this topic is considered a "section". You can denote a section by placing one of the heading tags (<h1>, <h2>, <h3>, etc) at the beginning of its content (so the heading tag goes before any other tags of the section).

The heading tag text serves as the title of the section, and the heading tag number denotes its rank from 1 (the most important) to 6 (the least important). Headings of the same rank number should denote sections that are of the same importance level. Sections can themselves be divided into sub-sections by using a heading tag with a lower rank number (for example, h3 can denote sub-sections of an h2's section, or an h4 can denote sub-sections of an h3 section. Dividing and ranking content in this way is what creates the content hierarchy.

Example 1: Restaurant Menu

<h1>Peking House Restaurant Menu</h1>
 
<h2>Appetizers</h2>
 
<h3>Egg Rolls</h3>
<p>Filled with pork and vegetables. 6 to an order. $4</p>
 
<h3>Wonton Soup</h3>
<p>Noodle-wrapped meatball in broth</p>
<ul>
	<li>Cup: $3</li>
	<li>Bowl: $6</li>
</ul>
 
<h2>Entrees</h2>
 
<h3>Chicken</h3>
 
<h4>Kung Pao Chicken</h4>
<p><img src="kung-pao-chicken.jpg" alt="">Diced chicken sauteed in a rich brown sauce with peanuts and green peppers. Spicy. $8</p>
<h4>Peking Chicken</h4>
<p><img src="peking-chicken.jpg" alt="">Diced chicken sautéed with baby corns, bell peppers and water chestnuts in Szechwan chili sauce. $9</p>
 
<h3>Beef</h3>
 
<h4>Mu Shu Beef</h4>
<p><img src="mu-shu-beef.jpg" alt="">Shredded beef sautéed with vegetables and eggs, served wrapped in Chinese pancakes with plum sauce. $8</p>
 
<h4>Mongolian Beef</h4>
<p><img src="mongolian-beef.jpg" alt="">Beef tenderloin sautéed with green onions in a delicate brown sauce. $11</p>
 
<h2>Dessert</h2>
 
<h3>Ice Cream</h3>
<ul>
	<li>Vanilla</li>
	<li>Chocolate</li>
	<li>Coffee</li>
</ul>
<p>All flavors $3</p>
 
<h3>Fortune Cookies</h3>
<p>Free with every order!</p>

The above code creates the following hierarchy:

Or, more generally:

Notice how h3's are only within h2's, and h4's are only within h3's. Also note that the "Appetizers" section has an extra level that the other two sections do not have -- this is totally ok as long as it makes sense for the content. (Although one might argue that all menu items should be at the same "level of importance", in which case you could remove the "Entrees" h2 and move Chicken and Beef "up" in the outline by changing them to h2's, and move their sub-items "up" to h3's... as the designer it is up to you to decide how to handle situations as they come up.)

Example 2: Artist Portfolio

<h1>Jordan Lev's Portfolio</h1>
 
<p>Below are samples of my recent work...</p>
<h2>Photography</h2>
 
<ul>
	<li><img src="photo1.jpg" alt="sunset over the ocean">/li>
	<li><img src="photo2.jpg" alt="field of yellow flowers">/li>
	<li><img src="photo3.jpg" alt="boy holding ice cream cone">/li>
</ul>
 
<h2>Web Design</h2>
 
<p><a href="http://example.com">Some Company Website</a> - corporate website for some company, showcasing their fine products and services</p>
 
<p><a href="http://test.com">My Friend's Blog</a> - personal blog for an artist friend of mine</p>

Even a page that is very much about visuals should still have a good underlying content structure and hierarchy. The above example has a very "flat" outline:

Or, more generally:

Miscellaneous Notes