HTML5 Structure?

What is HTML5 Structure?

HTML5 provides a new and semantic structure for building web pages, helping improve accessibility, SEO, and maintainability. Here’s a basic structure of an HTML5 document:

<header>: It contains the section heading as well as other content, such as a navigation links, table of contents, etc.
<nav>: The nav tag is used to declaring the navigational section in HTML documents.
<section>: The section element defines a section in a document.
<article>: The article tag is used to represent an article.
<aside>: The aside tag is used to describe the main object of the web page more shortly like a highlighter
<footer>: The footer tag in HTML is used to define a footer of HTML document.

How to create HTML Layout?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Think4U</title>
    <!-- Link to external CSS -->
    <link rel="stylesheet" href="styles.css"> 
</head>
<body class="main">
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
       <div class="page-container">
            <div class="left-col">
                <section>
                    <h1>Welcome to Think4U</h1>
                    <p>This is a brief introduction to what my site offers.</p>
                </section>
                
                <article>
                    <h2>Article Title</h2>
                    <p>This is some content for the article section. It contains more detailed information.</p>
                </article>                
            </div>
            <div class="right-col">                
                <aside>
                    <h3>Sidebar Content</h3>
                    <p>Additional information such as links, ads, or related topics.</p>
                </aside>
            </div>
       </div>
    </main>
    
    <footer>
        <div class="footer-container">
        <p>&copy; 2025 Think4U. All rights reserved.</p>
    </div>
    </footer>
    <!-- Link to external JavaScript -->
    <script src="script.js" defer></script> 	
</body>
</html>

style.css

body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
}

.main {
	width: 960px;
	margin: 50px auto;
}

header {
	background-color: #333;
	padding: 20px;
}

nav ul {
	list-style-type: none;
	padding: 0;
	display: flex;
	justify-content: center;
}

nav ul li:not(:last-child) {
	margin-right: 30px;
}

nav ul li a {
	color: #fff;
	text-decoration: none;
}

.page-container {
	margin: 0px auto;
	display: flex;
	color: #fff;
}

.left-col section {
	background-color: #1bc8df;
	padding: 30px;
	min-height: 100px;
}

article {
	background-color: rgb(230, 161, 35);
	padding: 30px;
	min-height: 100px;
}

.right-col aside {
	background-color: rgb(48, 197, 48);
	padding: 30px;
	min-height: 282px;
}

footer {
	background-color: #000;
	padding: 20px;
	color: #fff;
	text-align: center;
}

Demo:

Blog Detail

HTML5 Structure?

What is HTML5 Structure?

How to create HTML Layout?

Categories