structure of html documents code example

Example 1: html basic structure

<!DOCTYPE html>
<html>
  
  <head>
  	<title>Some Title</title>
    <link href="css_file.css" rel="stylesheet"> <!-- external CSS -->
  </head>
  
  <body>
    <!-- main content -->
  </body>
  
</html>

Example 2: html body structure

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Breaker</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>Give A Like if you see this heading</h1>
    </header>
    <nav>
        <ul>
            <li>Wrote it simpler to easily delete.</li>
            <li>Home</li>
            <li>Services</li>
            <li>About Us</li>
            <li>Contact</li>
        </ul>
    </nav>
    <section>
        Havn't you liked this answer yet!
    </section>
    <footer>
        Copyright &copy; 2020-2030
    </footer>
</body>

</html>

Example 3: html document structure

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First WebPage</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>This is the biggest heading tag used for name of the comapany</h1>
    </header>
    <nav>
        <ul>
            <li>This is a list.</li>
            <li>Home</li>
            <li>Services</li>
            <li>About Us</li>
            <li>Contact</li>
        </ul>
    </nav>
    <section>
        Havn't you liked this answer yet!
    </section>
    <footer>
        Copyright &copy; 2019-2020
    </footer>
  <img src='data:image/png;base64,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'/>
  <h2>The structure of HTML Doc</h2>
</body>

</html>

Example 4: structure of an html document

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A website</title>
  </head>
  <body>
  	...
  </body>
</html>

Tags:

Html Example