The Ultimate HTML Structure Guide: 10 Minutes to Better SEO and Engagement!
Welcome to our HTML structure guide! We’ll be going over the basic structure of an HTML page and how to add some extra elements like <article>, <section>, <header>, and <footer>.
First, let’s start with the basic structure of an HTML page:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Here’s what each part does:
<!DOCTYPE html>: This declares that the document is an HTML5 document. You can think of it as the “Hello, World!” of HTML.
<html>: This is the root element of an HTML page. It wraps everything else on the page.
<head>: This element contains metadata about the page, such as the page title, CSS styles, and scripts. It’s not visible on the page itself, but it’s important for the browser and search engines.
<title>: This element specifies the title of the page, which is displayed in the browser’s title bar or tab. This is the title that will show up when you bookmark the page or share it on social media.
<body>: This element contains the visible content of the page. This is where you put all the good stuff that people will actually see and read.
<h1>: This element defines a large heading. It’s like a giant exclamation mark for your page.
<p>: This element defines a paragraph. It’s where you put all your juicy text content.
Now let’s add some extra elements to the mix. The <article> element represents a self-contained composition in a page, such as a blog post or news article. The <section> element represents a generic section of a document or application, such as a chapter or tab content. We can use these to break up our content into more organized sections:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<article>
<section>
<h2>Section 1</h2>
<p>Content for section 1.</p>
</section>
<section>
<h2>Section 2</h2>
<p>Content for section 2.</p>
</section>
</article>
</body>
</html>
We’ve added an <h2> element to each section to define a medium-sized heading. Now our page is starting to look more organized and structured.
Next, let’s add a <header> and <footer> to the page. The <header> element represents the header of a page or section, and the <footer> element represents the footer of a page or section. These can contain things like the page or section title, logo, navigation, and other elements.