How to create a basic HTML structure?

Updated On: 2024-06-02

Creating a basic HTML structure is very easy. This article provides a clear understanding on basic HTML structure, step by step guide on how to create it, related resources and advanced examples.

HTML basic structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Now lets see the step by step guide to create its different sections

Step 1) DOCTYPE Declaration

<!DOCTYPE html>

DOCTYPE tells the browser that the document is an HTML5 document. Every HTML file should start with this <!DOCTYPE>. This is not an HTML tag rather it is an information to the browser telling the file type.

Step 2) HTML Tag

<html lang="en"> <html>

The root element of an HTML document.

Step 3) Head Section

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>

Contains meta-information about the document.

Step 4) Title Tag

 <title>My First HTML Page</title>

Sets the title of the document, which is shown in the browser's title bar or tab.

Step 5) Body Tag

<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>

Contains the content of the document that will be displayed to the user.

lets see some more examples of HTML structure.

01) Simple Personal Webpage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Personal webpage of Your Name">
    <meta name="author" content="Your Name">
    <title>Personal Webpage</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Your Name</h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>About Me</h2>
            <p>A brief description about yourself.</p>
        </section>

        <section id="portfolio">
            <h2>Portfolio</h2>
            <p>Details about your work and projects.</p>
        </section>

        <section id="contact">
            <h2>Contact</h2>
            <p>Contact details or a contact form.</p>
        </section>
    </main>

    <footer>
        <p>© 2024 Your Name. All rights reserved.</p>
    </footer>

    <script src="scripts.js"></script>
</body>
</html>

02) Blog page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A blog about various topics">
    <meta name="author" content="Blog Author">
    <title>My Blog</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>My Blog</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#posts">Posts</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home">
            <h2>Welcome to My Blog</h2>
            <p>Introductory text about the blog.</p>
        </section>

        <section id="posts">
            <h2>Recent Posts</h2>
            <article>
                <h3>Post Title 1</h3>
                <p>Summary or excerpt of the post.</p>
                <a href="post1.html">Read more</a>
            </article>
            <article>
                <h3>Post Title 2</h3>
                <p>Summary or excerpt of the post.</p>
                <a href="post2.html">Read more</a>
            </article>
        </section>
    </main>

    <footer>
        <p>© 2024 Blog Author. All rights reserved.</p>
    </footer>

    <script src="scripts.js"></script>
</body>
</html>

03) E-commerce Product Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Product page for online store">
    <meta name="author" content="Store Name">
    <title>Product Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Store Name</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#products">Products</a></li>
                <li><a href="#cart">Cart</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="product">
            <h2>Product Title</h2>
            <img src="product.jpg" alt="Product Image">
            <p>Description of the product.</p>
            <p>Price: $XX.XX</p>
            <button>Add to Cart</button>
        </section>
    </main>

    <footer>
        <p>© 2024 Store Name. All rights reserved.</p>
    </footer>

    <script src="scripts.js"></script>
</body>
</html>

04) Portfolio page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Portfolio of Your Name">
    <meta name="author" content="Your Name">
    <title>Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Your Name's Portfolio</h1>
        <nav>
            <ul>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="projects">
            <h2>Projects</h2>
            <article>
                <h3>Project Title 1</h3>
                <p>Brief description of the project.</p>
                <a href="project1.html">View details</a>
            </article>
            <article>
                <h3>Project Title 2</h3>
                <p>Brief description of the project.</p>
                <a href="project2.html">View details</a>
            </article>
        </section>

        <section id="skills">
            <h2>Skills</h2>
            <ul>
                <li>Skill 1</li>
                <li>Skill 2</li>
                <li>Skill 3</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>© 2024 Your Name. All rights reserved.</p>
    </footer>

    <script src="scripts.js"></script>
</body>
</html>

05) Company landing page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Landing page for Company Name">
    <meta name="author" content="Company Name">
    <title>Company Landing Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Company Name</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home">
            <h2>Welcome to Company Name</h2>
            <p>Introduction to the company.</p>
        </section>

        <section id="about">
            <h2>About Us</h2>
            <p>Information about the company's history, mission, and values.</p>
        </section>

        <section id="services">
            <h2>Our Services</h2>
            <ul>
                <li>Service 1</li>
                <li>Service 2</li>
                <li>Service 3</li>
            </ul>
        </section>

        <section id="contact">
            <h2>Contact Us</h2>
            <form action="/submit-form" method="post">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                
                <label for="message">Message:</label>
                <textarea id="message" name="message" required>   
                <button type="submit">Submit</button>
            
        
    

    <footer>
        <p>© 2024 Company Name. All rights reserved.</p>
    </footer>

    <script src="scripts.js"></script>

Related Resources

For more information, you can use the following resources:

Doctype at Mozilla

HTML Doctype Declaration at W3cshools

How To

How to create a basic HTML structure?

HTML basic structure

Step 1) DOCTYPE Declaration

Step 2) HTML Tag

Step 3) Head Section

Step 4) Title Tag

Step 5) Body Tag

01) Simple Personal Webpage

02) Blog page

03) E-commerce Product Page

04) Portfolio page

05) Company landing page

Related video

Related Resources

How To

How to create a basic HTML structure?

HTML basic structure

Step 1) DOCTYPE Declaration

Step 2) HTML Tag

Step 3) Head Section

Step 4) Title Tag

Step 5) Body Tag

01) Simple Personal Webpage

02) Blog page

03) E-commerce Product Page

04) Portfolio page

05) Company landing page

Related video

Related Resources

Related Reads