HTML Semantic Tags- Demonstration

HTML Semantic Elements - Demo code used in video lecture


  HTML file code 
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
      <link rel="stylesheet" href="test.css">
      <title>HTML Basics</title>
  </head>
  <body>
     <header>
      <div class="d1">
          login
      </div>
  </header>
      <nav>
          <ul>
              <li><a href="test.css">Home</a></li>
              <li><a href="test.css">About</a></li>
              <li><a href="test.css">Register</a></li>
          </ul>
      </nav>
      <section>
          <article class="a1">This is article1</article>
          <article class="a2">This is article2</article>
          <article class="a3">This is article3</article>
      </section>
      <aside>
          These are some quick tips
      </aside>
      <footer>
          copyright@satishcj
      </footer>
  </body>
  </html>

CSS File code


  header
{
    background-color: black;
    width: 100%;
    height: 100px;
    color:white;
    text-align: right;
    font-size: x-large;
    font-weight: bold;
}

nav ul li
{
    list-style-type: none;
    float:left;
    padding:10px;
    background-color: aqua;
    border-right-style: solid;
}

nav ul li:hover 
{
    background-color: bisque;
}

section
{
    height: 600px;
    width: 600px;
    background-color: bisque;
    position:relative;
    top:50px;
}

.a1
{
    background-color: aqua;
    height: 200px;
    width: 600px;
}

.a2
{
    background-color:red;
    height: 200px;
    width: 600px;
}

.a3
{
    background-color:blue;
    height: 200px;
    width: 600px;
}

aside
{
    background-color: antiquewhite;
    height: 600px;
    width:200px;
    position:absolute;
    left:700px;
    top:200px
}

footer
{
    background-color: black;
    color:white;
    position:relative;
    top:60px;

}

Output

image showing webpage using semantic elements