Mastering HTMl is an essential foundation to building websites on the internet. In this guide we'll walk through how to begin formatting content for a webpage.
We discussed in an earlier post [Creating Your First HTML Page: A Beginner's Guide to Basic Structure] (https://matthewseiwert.com/blog/posts/create-first-html-page) this idea of how tags are used to add content to a page either serving as a structure tag or a content tag. Here we are expanding upon this idea through a practical example that can be applied to any project you are working for yourself or a client.
It is extremely important to know what you are building before diving into your code. I even recommend preparing at the very least a wireframe preferably a high-fidelity mockup before diving it the code. For practice on this step check out my guide How to Build a Simple Website to Promote Yourself Online .
Know what you are coding and seeing a mockup visually allows you to begin recognizing what HTML tags will be best for the job that you are working on.
Let's break down this code. HTML is shaped like a tree in the browser and in your code. You work your way inward to get to more specific elements (children) and work your way outward to get to the parents elements that enclose other elements.
Imagine a LEGO box where you place your LEGO pieces inside a storage container whenever you were finished playing with LEGOs. The LEGO pieces are the children and the storage container is the parent. That same idea is with HTML and you use containers to organize elements on a page.
Some containers are have extra special meaning like in our example above. You can use a <div></div> tag to serve as a container but it is more generic. Since I mentioned at the beginning knowing what you want to code before you start to code it helps avoiding being generic and building messy HTML.
In our example we would like to display a blog post in the browser. First it is helpful to think of the tag you would use for most of your webpages such as <header></header>, <main></main>, <footer></footer> . Most webpages will have these three elements so you can consider those as some of your outermost tags that you would use. You essentially work outward and then move inward when writing HTML. In this example we just are using <main></main> to wrap our blog post wrapped in <article></article> because that serves as the main content of the page. If we were creating a contact page than the <form></form> would be more than likely within <main></main>.
To break up our blog post <article></article> we are using <section></section> tags. This also a search crawler as well as any page visitors to understand how content is divided on the page and more importantly how to find the content they are searching for more quickly. Use <section></section to organize your post when switching between different points of the article.
Finally we have the content elements wrapped with header tags and paragraph tags. Header tags start with the letter "h" and end with a number between 1 and 6. The <h1></h1> element is the most important whereas the <h6></h6> is the least important header. A first heading is often use for the blog title or the main point of the page so that search crawlers and web visitors can grasp the idea of the page and what to expect. You'll then use second headings and third headings for your sub points in the blog post. Generally I personally only use first headings and second headings and occasionally third headings for my blog posts.
The paragraph tag is used to wrap around your paragraphs in the blog post denoted by <p></p>. Whenever you have multiple lines of text on a page consider using the <p></p> tags.
That's it! You know have a better grasp of using HTML tags to start building out content pages like blog post. The more specific and selective you can be with your tags the better organized your code will be, the easier your code will be to understand for others and help SEO crawlers crawl and indexed your site better. The format used in this guide is not the only way to format content. Honestly if you were slightly different like not including section tags search crawlers should still not have a problem crawling the page. So no need to overthink it, but whenever you learn about a new tag that can make your code more specific and organized be sure to take advantage of it.
No fluff. Just real projects, real value, and the path from code to cash — one useful build at a time.