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.
- Use the
navelement to wrap your navigation links (which will be anchor tags).
- Use the
mainelement to wrap your main content on the page (this will exclude the
navelement 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
sectionelement 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
h1tag for the main title on your page (this will likely match your
titletag, 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
h3to title those sections. The pattern continues from there until you reach the
- 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.
No references available.