Semantic HTML

by isuru_nan

HTML

<!DOCTYPE html>
<html>
    <head>
    
    </head>
    <body>
        <header>
          <h1>Interneting Is Easy!</h1>
          <nav>
            <ul>
              <li><a href='#'>Home</a></li>
              <li><a href='#'>About</a></li>
              <li><a href='#'>Blog</a></li>
              <li><a href='#'>Sign Up</a></li>
            </ul>
          </nav>
        </header>

        <article>
            <header>
                <h1>Semantic HTML</h1>
                <p>By Troy McClure. Published January 3rd</p>
            </header>
            
            
            <p>This is an example web page explaining HTML5 semantic markup.</p>

            <section>
                <h2>The Document Outline</h2>
                <p>HTML5 includes several “sectioning content” elements that
                   affect the document outline.</p>

                <h3>Headers</h3>
                <p>The <code>&lt;header&gt;</code> element is one such sectioning
                   element.</p>

                <h3>Footers</h3>
                <p>And so is the <code>&lt;footer&gt;</code> element.</p>
            </section>

            <section>
                <h2>Inline Semantic HTML</h2>
                <p>The <code>&lt;time&gt;</code> element is semantic, but it’s not
                   sectioning content.</p>

                <p>This fake article was written by somebody at InternetingIsHard.com, which
                   is a pretty decent place to learn how to become a web developer.</p>
            </section>
            
            <footer>
                <p>This fake article was written by somebody at InternetingIsHard.com,
       which is a pretty decent place to learn how to become a web developer. This
       footer is only for the containing <code>&lt;article&gt;</code> element.</p>
            </footer>
            
        </article>

        <p>&copy; 2017 InternetingIsHard.com</p>
    </body>
</html>