A lot has changed in the past few years when it comes to structuring a web page. HTML is less generic than it used to be and there are new tools to help offer much more meaning to our pages. There are fewer workarounds and more answers and logical ways of doing things than ever before.
In this post, I’m going to go over what makes a well marked-up HTML web page. While I’ll focus slightly on the way things used to be, I think my primary focus will be on what makes a great web page today. After all, we can only focus on history for so long.
Markup
I was reading about markup a few minutes ago and found a line that’s appropriate to include in this post. It goes like this: “A markup language is a system for annotating a document in a way that is syntactically distinguishable from the text.”
I think that’s interesting. I can remember authoring my very first web page back in 1998. My main goal with that page was to get something handed in to my college professor. Something functional and something that worked. I wasn’t exactly too concerned with whether or not my page meant anything. In those days, accessibility and search engines were so low on the horizon that I’m not sure if anyone was concerned with any of that.
The internet is, obviously, much larger these days. We’ve grown leaps and bounds with what our information is capable of. Web pages and sites have become an integral part of people’s lives and the code we author now actually matters. It’s important that we attempt to adhere to what writing a markup language tries to accomplish – distinguishing our text from being merely text, giving order to chaos, expressing how things should be processed and providing semantic meaning to mere content. There are now tools that can help with this, so we should be ready and equip ourselves with the knowledge to take full advantage of them.
Document Structure
When writing an HTML page, it’s important that you structure it correctly. If your page is structured incorrectly, interpretation of it may be faulty and it may present itself in unintended ways, or may not be presented at all. Obviously, this is bad.
Have you ever seen the table of contents of a book? Well, if you have, that’s sort of what you want the structure of your HTML document to emulate. There’s a logic to the way a table of contents is outlined – that’s true for web pages as well. If you take a look at this page, you’ll see the W3C’s interpretation of what things mean in HMTL, as far as the document, elements, etc…Although the W3C is referring to HTML4 in this reference, the concept for HTML5 remains similar.
Let’s take a look at some information as if it was handed to a browser to interpret as plain text:
Code:
Learning About Dogs
Navigation
Dog Varieties
Sporting Group
Golden Retriever
Labrador Retriever
Toy Group
Yorkshire Terrier
Maltese
Caring For Dogs
Keeping Your Dog Happy
Keeping Your Dog Healthy
Further Information About Dogs
Get in Touch
If you read this information as it’s presented above, what would you think of it? I’d say it’s sort of lumped together without any logic or meaning at all. I’d have to take some time to go through every line and attempt to group things up myself. And if I did that, I may miss the mark, meaning, I might not interpret the information the way the author intended to have it interpreted. The way the above text is arranged is what I like to call, open to interpretation, which isn’t a good thing when trying to convey a specific meaning. If a search engine looked at the above code, it wouldn’t know its meaning either. It would merely view it as a bunch of words.
Let’s take the same text and slightly alter it so it’s a bit more clear:
Code:
Learning About Dogs
Navigation
Dog Varieties
Sporting Group
Golden Retriever
Labrador Retriever
Toy Group
Yorkshire Terrier
Maltese
Caring For Dogs
Keeping Your Dog Happy
Keeping Your Dog Healthy
Further Information About Dogs
Get in Touch
It’s starting to make a bit more sense, isn’t it? At the very least, we’re able to get a clearer picture of what the author is attempting to tell us. We can differentiate the importance between each section and are able to prioritize headings. The problem is, all the browser is displaying is indented text, which helps users and search engines very little. We need more than simple indents.
If we used the same code and added some HTML to it in the way of headings, we’d cement our already existing notion of what’s important in the outline above. By adding tags to the text, we’re creating much more information to assist in the browser’s visual display as well as the search engine’s interpretation.
Code:
<h1>Learning About Dogs</h1>
Navigation
<h2>Dog Varieties</h2>
<h3>Sporting Group</h3>
<h4>Golden Retriever</h4>
<h4>Labrador Retriever</h4>
<h3>Toy Group</h3>
<h4>Yorkshire Terrier</h4>
<h4>Maltese</h4>
<h2>Caring For Dogs</h2>
<h3>Keeping Your Dog Happy</h3>
<h3>Keeping Your Dog Healthy</h3>
<h2>Further Information About Dogs</h2>
<h2>Get in Touch</h2>
With these heading tags in place, we now have a slightly more understandable web page when it comes to being viewed by humans in a browser or being crawled and indexed by search engines.
Let’s take the same code and add some HTML5 sectioning and grouping elements to it. To learn more about these new elements, you can check out a nice blog post on the topic put out by Treehouse.
In this particular case, we’re going to take advantage of the new article, section, aside, nav, header and footer elements introduced in HTML5.
Code:
<header>
<h1>Learning About Dogs</h1>
<nav>
Navigation
</nav>
</header>
<article>
<h2>Dog Varieties</h2>
<section>
<h3>Sporting Group</h3>
<h4>Golden Retriever</h4>
<h4>Labrador Retriever</h4>
</section>
<section>
<h3>Toy Group</h3>
<h4>Yorkshire Terrier</h4>
<h4>Maltese</h4>
</section>
</article>
<article>
<h2>Caring For Dogs</h2>
<section>
<h3>Keeping Your Dog Happy</h3>
</section>
<section>
<h3>Keeping Your Dog Healthy</h3>
</section>
</article>
<aside>
<h2>Further Information About Dogs</h2>
</aside>
<footer>
<h2>Get in Touch</h2>
</footer>
With these structural elements in place, our page is starting to express meaning for future search engine crawlers and screen readers to digest. While all the technology for full appreciation still isn’t completely in place, with this type of code, our pages will be ready for it.
Below, I’m going to define the elements I used above and link to a resource for further exploration.
Code:
<article> – Article in the document.
<section> – Section in the document.
<aside> – Content related to, but not critical to current document.
<nav> – Navigation areas in the document.
<header> – Header area for entire document or section of the document.
<footer> – Footer area for entire document or section of the document.
If you’d like to review all elements in HTML, you can browse through this reference.
Defining a Web Page
In the following sections, I’m going to start creating an example web page from scratch. I’m going to be doing this using HTML5 syntax only, as opposed to giving example code from HTML4 and then updating it to HTML5. Since HTML5 is the new standard, I don’t think it’s helpful to discuss HTML4 to great extent.
In the code below, I’ll give you the simple beginnings of an HTML document. While there can be much more than this, this is all you need to get going. After the example, I’ll explain what the code means.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
doctype
In the above code, we’ve got a few areas that are worth discussion. The first one is called the doctype. Now, if you’re used to crazy, weird, long doctypes that you can never remember, those days are behind you. The new HTML5 doctype only consists of a few characters. Since HTML5 is not based on SGML, and therefore does not require a reference to a DTD, you can kiss the URL and additional characters goodbye. With this short bit of code, you’re able to tell the browser what version of HTML the page is written in. While you don’t necessarily even need a doctype, it’s worth having to handle some backward compatibility.
html
The next line holds the html tag, which tells the browser both that it’s interpreting an html document as well as where the root of that document is. This tag is also the container of all other html elements, which is more important to know when it comes time to add some JavaScript functionality to your pages. As you can see, the html tag has a closing tag at the bottom of the document. Also, within the html tag is the lang attribute, which specifies the language of the document’s content.
head
After the html tag, we’ve got the head element, which in this case, holds the meta charset information. The head element encloses information regarding the document, such as its title, scripts, style sheets the document uses as well as additional meta information. The meta charset element I’ve included in this short bit of code specifies the character encoding for the document.
body
Finally, we have the body element, which will wrap all visible content that a user will be able to see. This content might include headings, images, paragraphs and many other elements we’ll cover later on.
Dealing With Older Browsers
One of the more annoying tasks designers have to consider is the support of older browsers (older than IE version 9). The good news is that every single day, a certain number of old computers fall off the face of the earth, so this type of busywork is becoming a thing of the past. The bad news is that all of these ancient computers with their ancient browsers aren’t gone yet. And for some reason, people hold on to them like nothing else.
Luckily, enacting support for new HTML5 tags isn’t a difficult thing to do. All you need to set is a tiny piece of code in the head section of the document:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Best Website in the World</title>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
In the above code, I’ve added a page title and what developers call the “HTML5 Shiv.” This shiv code “…enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9…” If you’re interested, you can visit the project page on GitHub here.
Also, surrounding the shiv code, I’ve added a conditional comment for IE. This comment will allow other browsers to bypass the shiv code and will only “come alive” when a browser that’s earlier than IE version 9 visits the page. If you’re interested in learning about IE conditional comments, check out these pages:
– CSS – Conditional Comments by QuirksMode
– About Conditional Comments (Internet Explorer) by MSDN
– Internet Explorer Conditional Comments by SitePoint
Creating an Outline For Content
The next step we need to take in creating our web page is to gather together all the primary content we think we’ll include on the page. This is sort of like the outline we made above, but this time, we’ll add a bit more in the way of inclusion. Take a look at the areas of content I create below:
Code:
Learning About Dogs
Branding
Ads
Navigation
Dog Varieties
Sporting Group
Golden Retriever
Labrador Retriever
Toy Group
Yorkshire Terrier
Maltese
Caring For Dogs
Keeping Your Dog Happy
Keeping Your Dog Healthy
Further Information About Dogs
Get in Touch
Copyright Information
Reviews
Comments
Similar Pages
That’s a pretty good list of what might be on our page. Now, if we break this list down into primary and secondary content areas, things will become more clear.
Primary Content Areas
Code:
Learning About Dogs
Site Branding
Navigation
Dog Varieties
Sporting Group
Golden Retriever
Labrador Retriever
Toy Group
Yorkshire Terrier
Maltese
Caring For Dogs
Keeping Your Dog Happy
Keeping Your Dog Healthy
Comments
Secondary Content Areas
Code:
Ads
Copyright Information
Similar Pages
Further Information About Dogs
Reviews
Get in Touch
Lastly, with the above breakdown, we can create an outline that is even more clear than the last step. This outline will help guide us through the rest of the process. The goal in this step is to really focus on the low hanging fruit. I’m not going to delete anything – I’m simply going to rearrange and indent to express prioritization.
Content Outline
Code:
Site Branding
Navigation
Learning About Dogs
Dog Varieties
Sporting Group
Golden Retriever
Labrador Retriever
Toy Group
Yorkshire Terrier
Maltese
Caring For Dogs
Keeping Your Dog Happy
Keeping Your Dog Healthy
Comments
Ads
Similar Pages
Further Information About Dogs
Reviews
Get in Touch
Copyright Information
The outline looks like our content breakdown from above, but this time, we’ve added a few content area elements and basically outlined our web page.
Sectioning Out Our Web Page
In this next step, we’re going to begin putting our content into the actual HTML page, in order to create a document structure. I’ll use comments and a few of the HTML5 elements from above. I’m going to go ahead and build out some of the page directly below and then discuss what’s what below the code.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The World's Best Dog Website</title>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<!-- branding / main navigation -->
</header>
<article>
<!-- main page content -->
<section>
<!-- content comments -->
</section>
</article>
<aside>
<!-- ads -->
</aside>
<section>
<!-- similar pages / further information / reviews -->
</section>
<footer>
<!-- copyright / contact -->
</footer>
</body>
</html>
Okay, let’s take a look at the above code and discuss why I used the tags I used.
First, the header element should be clear by now. That, and the footer element, is most likely the most simple to understand. The header element surrounds the content that’s located at the top of your page and that will most likely be used on every one of them. It’s not something that’s likely to change throughout your site. It usually includes the logo (branding) and the primary navigation areas. The same definition goes for the footer area down at the bottom of the page. In between the footer tags is generally the fine print, meaning copyright and contact information.
In between the article tags is usually one of the primary content areas of the page. This is the content that, if you stripped all ancillary content away, you’d be left with. Think about printer friendly versions of a web page or even the content you’d find in a RSS feed. This is one of your primary content areas.
Within a primary content area, you may have sections. These are content areas that have to do with, or are related to your primary content.
Lastly, we have the aside tags. Asides are sort of like header and footer tags, but within them, the content may change. Think about advertising blocks or side navigation areas on blogs.
article vs. main
In this step, we’re going to add a semantically valuable element to our page. This is the main element. This element wraps around the primary content areas of your page, such as articles. If you have multiple article elements, this main element would wrap them all. If you have article and section elements like we do below, again, the main element would wrap them.
So what is the main element? Well, the main element surrounds content that’s primary to the body element. MDN puts it like this:
“The main content area consists of content that is directly related to, or expands upon the central topic of a document or the central functionality of an application. This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms.”
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The World's Best Dog Website</title>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<!-- branding / main navigation -->
</header>
<main>
<article>
<!-- main page content -->
<section>
<!-- content comments -->
</section>
</article>
</main>
<aside>
<!-- ads -->
</aside>
<section>
<!-- similar pages / further information / reviews -->
</section>
<footer>
<!-- copyright / contact -->
</footer>
</body>
</html>
Headings in HTML
In the following section, I’m going to add headings to our content areas. By adding headings, we’ll be creating new sections in our page. In the future, when technology more recognizes the HTML5 elements we included, those elements will assist with our sectioning, but for now, headings are the most appropriate way to add semantics to our pages.
I’m going to go ahead and add the headings and some content to the code below. After that, I’ll discuss what I did.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The World's Best Dog Website</title>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>The World's Best Dog Website</h1>
<nav>
</nav>
</header>
<main>
<h2>Learning About Dogs</h2>
<article>
<h3>Dog Varieties</h3>
<h4>Sporting Group</h4>
<h5>Golden Retriever</h5>
<h5>Labrador Retriever</h5>
<h4>Toy Group</h4>
<h5>Yorkshire Terrier</h5>
<h5>Maltese</h5>
<h3>Caring For Dogs</h3>
<h4>Keeping Your Dog Happy</h4>
<h4>Keeping Your Dog Healthy</h4>
<section>
<h3>Comments</h3>
</section>
</article>
</main>
<aside>
<h3>Ads</h3>
</aside>
<section>
<h3>Similar Pages</h3>
<h3>Further Information About Dogs</h3>
<h3>Reviews</h3>
</section>
<footer>
Get in Touch
Copyright Information
</footer>
</body>
</html>
Okay, as you can see, I’ve added headings H1 through H5. I put these in logical order in relation to one another. I’ll go through each heading type now.
For the H1 heading, I included the website title. There’s only one H1 per page, and I thought the title of the entire website was appropriate for this type of heading. For the H2 heading, I included the direct sub-section of the entire site and the title of the main article section. There is only one H2 heading on this page. If you look at the code above, you can begin to see how the headings relate to one another. Each heading is either as important as another heading of the same level or is a sub-section to a heading above it. It’s very hierarchical and has semantic meaning.
Page Navigation
I’m going to create the navigation portion of our website here and instead of copying over the entire code block like I’ve been doing, I’m going to simply go ahead with everything in between the nav tags. Later on, I’ll include the nav area into the entire page code. If you’re curious about where the main navigation area goes, you can see from the code above, I’m placing it inside of the header element. I’m doing this because, as I explained earlier, the primary navigation is going to span across all pages at the top of the page.
Code:
<nav>
<ul>
<li><a href="index.html" title="Home page">Home Page</a></li>
<li><a href="about.html" title="About us">About Us</a></li>
<li><a href="blog.html" title="Our blog">Our Blog</a></li>
<li><a href="support.html" title="Website support">Website Support</a></li>
<li><a href="contact.html" title="Contact us">Contact Us</a></li>
</ul>
</nav>
If you’ll notice in the above code, I put all the navigation links inside the new HTML5 nav element. I did this because, as the HTML5 specification says:
“The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.”
The spec mentions that not all links are appropriate for use with the nav element. Only sections of links that consist of major navigation blocks are to be enclosed in this element.
The spec also states:
“In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.”
If you’ll notice, I included the links as list items inside of an unordered list. This gives the navigation list semantic meaning as well as helps with CSS styling later on.
Comment Section
In this next area of the page, I’m going to build out the comment section. I’ll do the same as I did in the previous navigation section and only work on this particular area of code. Later on, I’ll include it back into the whole page.
Code:
<section>
<h3>Comments</h3>
<p>
To leave a comment, please register or log in as a user. The comment function will enable itself after you become a member of this website.
</p>
<article>
<h4>
Mary Smith commented on December 12, 2019 at 12:00PM.
</h4>
<p>
Hey, what a great website! I really enjoy learning about dogs and you presented your information in an organized manner. Keep up the good work.
</p>
</article>
</section>
As you can see, I enclosed the entire comment area within section tags. This is consistent with the code I showed above. The H3 heading was covered already as well. The new parts of this code are:
– The p (paragraph) tags that offer commenting instructions. This is a simple paragraph within the section element.
– The article tags within the section element. Each comment is a stand-alone area of the page, therefor requires an article element.
– The new H4 tags that contain the comment information. Since this is a heading under the H3 comment heading, it gets an H4.
– The p tags that contain the comment itself. This is just a paragraph within each comment article element.
Working on Headers
Before I begin, I’m going to show you what our existing header element looks like, with the nav element properly nested inside of it.
Code:
<header>
<h1>The World's Best Dog Website</h1>
<p>All about dogs and much, much more.</p>
<nav>
<ul>
<li><a href="index.html" title="Home page">Home Page</a></li>
<li><a href="about.html" title="About us">About Us</a></li>
<li><a href="blog.html" title="Our blog">Our Blog</a></li>
<li><a href="support.html" title="Website support">Website Support</a></li>
<li><a href="contact.html" title="Contact us">Contact Us</a></li>
</ul>
</nav>
</header>
This is a pretty good looking header. It meets all the requirements for a header element under the HTML5 specification.
“The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.”
The thing is, under this definition of the header element, we can have more than one header area on a page. So in the code below, I’ll show you how that would look. First, I’m going to bring down the entire code block to make it more easily understandable.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The World's Best Dog Website</title>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>The World's Best Dog Website</h1>
<p>All about dogs and much, much more.</p>
<nav>
<ul>
<li><a href="index.html" title="Home page">Home Page</a></li>
<li><a href="about.html" title="About us">About Us</a></li>
<li><a href="blog.html" title="Our blog">Our Blog</a></li>
<li><a href="support.html" title="Website support">Website Support</a></li>
<li><a href="contact.html" title="Contact us">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<header>
<h2>Learning About Dogs</h2>
<p><a href="full-list.html">Check out all dogs</a>
</header>
<article>
<header>
<h3>Dog Varieties</h3>
<p>Find out about a few of the dog varieties most important to you.</p>
</header>
<h4>Sporting Group</h4>
<h5>Golden Retriever</h5>
<h5>Labrador Retriever</h5>
<h4>Toy Group</h4>
<h5>Yorkshire Terrier</h5>
<h5>Maltese</h5>
<h3>Caring For Dogs</h3>
<h4>Keeping Your Dog Happy</h4>
<h4>Keeping Your Dog Healthy</h4>
<section>
<header>
<h3>Comments</h3>
<p>
To leave a comment, please register or log in as a user. The comment function will enable itself after you become a member of this website.
</p>
</header>
<article>
<h4>
Mary Smith commented on December 12, 2019 at 12:00PM.
</h4>
<p>
Hey, what a great website! I really enjoy learning about dogs and you presented your information in an organized manner. Keep up the good work.
</p>
</article>
</section>
</article>
</main>
<aside>
<h3>Ads</h3>
</aside>
<section>
<h3>Similar Pages</h3>
<h3>Further Information About Dogs</h3>
<h3>Reviews</h3>
</section>
<footer>
Get in Touch
Copyright Information
</footer>
</body>
</html>
So as you can see, I added a few more header elements to the page. The first additional header element I added surrounds the primary H2 page heading and a short paragraph. Since this is introductory content, it’s appropriate here. Also, you’ll find header elements right after the first article tag and after the section tag that’s in the comment area. Both of these are introductory content relating to their respective content areas.
HTML5 Footers
I’ll give you a hint here – I’m only going to include one footer on this page. Although, according the the HMTL5 specification on footers, you can include more than one.
“The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”
I’m not going to copy all the code down again. All I’ll do here is to build out the page footer and place the code below.
Code:
<footer>
<p><a href="contact.html">Get in Touch</a></p>
<p>All content ©copyright 2015 Best Doggy · Please read our <a href="privacy-terms.html">Privacy and Terms</a></p>
<p>Best Doggy</p>
<p>123 Any Road<br>
Any Town, MI USA 01234</p>
</footer>
There isn’t much to add to this section, besides some content wrapped in paragraph tags. Since this is the only footer I’m going to place on this page, I’ll leave this section alone the way it is.
Leave a Reply