Html Template

HTML template

Created By: chatGPT

HTML templates are pre-structured arrangements of HTML elements that streamline the creation of web pages. They allow for reusability and consistency across different parts of a website. Below is a simple template example that includes the essential parts of an HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home">
            <h2>Home Section</h2>
            <p>This is where the main content goes.</p>
        </section>
        <section id="about">
            <h2>About Section</h2>
            <p>Information about the website.</p>
        </section>
        <section id="contact">
            <h2>Contact Section</h2>
            <p>Details on how to get in touch.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 Your Name. All Rights Reserved.</p>
    </footer>
</body>
</html>

You can customize this template by modifying the title, adding stylesheets, and changing the content in the sections. It's also possible to add JavaScript for enhanced interactivity. Remember to link your JavaScript file in the or right before the closing </body> tag.

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

To add more styles, create a styles.css file and include your CSS rules there. This keeps your HTML clean and separates the concerns of structure and styling.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
h1, h2 {
    color: #333;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 15px;
}