HTML Style Guide

❮ Prev Next ❯

HTML style guides provide guidelines and best practices for writing clean, maintainable, and consistent HTML code.

Following a style guide can make your code easier to read, understand, and maintain for you and other developers who work on the same project.

In this section, we'll explore some of the key elements of an HTML style guide with examples.

Indentation and Formatting

Proper indentation and formatting can make your code more readable and easier to understand. Here is an example of good indentation and formatting in HTML:

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <header>
      <h1>Heading 1</h1>
      <p>Paragraph text goes here.</p>
    </header>
    </body>
</html>

HTML Document Structure

A clear and consistent structure for your HTML documents can help improve the readability and organization of your code. Here's an example of a well-structured HTML document:

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta charset="UTF-8">
      <link rel="stylesheet"  href="style.css"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <header>
      <h1>Welcome To Kodingkoleji</h1>
      <nav>
        <ul>
          <li><a href="URL">Home</a></li>
          <li><a href="URL">About</a></li>
          <li><a href="URL">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>Our Services</h2>
        <p>We offer a range of services including web design, development, and marketing.</p>
        <ul>
          <li><a href="URL">Web Design</a></li>
          <li><a href="URL">Web Development</a></li>
          <li><a href="URL">Online Marketing</a></li>
        </ul>
        <aside>
          <h2>Related Articles</h2>
          <ul>
            <li><a href="URL">10 Tips for Designing a Website</a></li>
            <li><a href="URL">How to Improve Your SEO</a></li>
            <li><a href="URL">The Importance of Responsive Design</a></li>
          </ul>
      </aside>
      </section>
      <section>
        <h2>Our Team</h2>
        <p>Meet our team of experts who are dedicated to providing you with the best service.</p>
        <ul>
          <li>John Smith - CEO</li>
          <li>Jane Doe - Marketing Manager</li>
          <li>Bob Johnson - Web Developer</li>
        </ul>
      </section>
    </main>
    <footer>
        <p>copyright:© 2023 Company Name</p>
        <p>Contact Us: 123 Main Street, Anytown, USA</p>
    </footer>
    </body>
</html>

Naming Conventions

Using consistent and meaningful names for your HTML elements can make your code more readable and easier to understand. Here are some examples of good naming conventions for HTML elements:The section element represents a generic section of the document.

  • Use lowercase letters for all HTML element names and attribute names.
  • Use hyphens to separate words in multi-word class and ID names.
  • Use descriptive names for class and ID names that describe the content or function of the element.

Today you learn how to structure layout of HTMl page with some techniques of formatting page. let see what Entities is in the next chapter.

❮ Prev Next ❯