How to structure an HTML file

Details

The most important thing to know when structuring your HTML file is to use your HTML elements for the purpose they were designed for.

For example, it’s possible to make something that looks like a list using just paragraph tags, but if you need a list on your page it makes more sense to use an ordered list or unordered list element since that’s what they’re designed for. Using the appropriate tag helps search engines understand your web page better and helps people who use a screen reader to navigate your site.

Guidelines

Use the nav element to wrap your navigation links (which will be anchor tags).
Use the main element to wrap your main content on the page (this will exclude the nav element that you use for your sitewide navigation). Put your elements in the order that you want them to appear in the browser. (It’s possible to change the order of the elements using CSS, but when you’re dealing with HTML only you’ll want to put them in the right order.)
Use the section element to wrap around distinct sections of your web page.
Use the heading elements to create headings. Make sure you use them in the right order. Start with an h1 tag for the main title on your page (this will likely match your title tag, but it doesn’t have to be the same). When you need a subheading for a new section on your page, use an h2. If that new section needs to be divided into more sections, use an h3 to title those sections. The pattern continues from there until you reach the h6 tag.
Use paragraph tags for paragraphs of text. (In some cases, a paragraph might just be one sentence.)
Use the ordered list element for lists that have a particular order.
Use the unordered list element for lists that don’t have a particular order.
Use an anchor tag for links.

You can view our sample project on GitHub for a demonstration of these principles in action.

Exercises

There are no exercises for this lesson.

References

No references available.

Lesson tags: Open Lesson