Home>Web design tutorial>HTML tutorial

Design web pages using HTML5 semantic code

Author：Eve Cole Update Time：2025-03-27 06:00:02

First, we want to declare and create the document type, we no longer use HTML 4 or XHTML 1.0 like PUBLIC -//W3C//DTD XHTML 1.0 Transitional..... Declaration, we can write this way:

  1.  <!DOCTYPEhtml>

Take a look, it's simple and obvious, case-insensitive. It makes it easier to be backward compatible. At least it can save you some time in typing.

We have now defined the type for the HTML 5 document. Everything went well so far. Now, let's take a look at the new tags for HTML5. Before we browse the new tab, let’s take a look at how we usually write:

  1.  <html>
  2.  <head>
  3.  ...other...
  4.  </head>
  5.  <body>
  6.  <divid=header>
  7.  <h1>CSS3-HTML5 Home</h1>
  8.  </div>
  9.  <divid=nav>
  10.  <ul>
  11.  <li>Home </li>
  12.  <li>About </li>
  13.  <li>Contact</li>
  14.  </ul>
  15.  </div>
  16.  <divid=content>
  17.  <h1>Title</h1>
  18.  <p>...</p>
  19.  </div>
  20.  <divid=footer>
  21.  <p>Copyright Information</p>
  22.  </div>
  23.  </body>
  24.  </html>

Using <div> in the example above is a very common practice now. Its purpose is dual. First, it provides a unique identity ID that can be applied specifically to web page chapters. Second, identification is as a primitive, pseudo-semantic structure. The ID names on each website may be different, so it is difficult for us to understand what those IDs mean.

<header> tag:

The <header> tag is equivalent to the one we usually define with <div id=header>. If your website is still defined like this with <div id=header>, we can now replace it with <header>.

<nav> tag:

<nav> is the navigation tag, just like we usually use:

<div id=menu>

<ul>

<li>index</li>

<li>news</li>

...

</ul>

</div>

Now use <nav>:

  1.  <nav>
  2.  <ul>
  3.  <li><ahref=index.html>Home</a></li>
  4.  <li><ahref=/about/about/about</a></li>
  5.  <li><ahref=/blog/>Blog</a></li>
  6.  </ul>
  7.  </nav>

<section> tag: The <section> tag can be a group of content or topic groups, usually with a start tag and an end tag. Of course, this tag can also be nested.

<article> tag: There can be a section of content inside the <article> tag.

<aside>

<footer> tag: <footer> tag, if you don’t say it, you can understand what this is for. There can also be multiple, usually at the bottom of the website.

Let's take a look at the last code:

  1.  <!DOCTYPEhtml>
  2.  <html>
  3.  <head>
  4.  ...stuff...
  5.  </head>
  6.  <body>
  7.  <header>
  8.  <h1>MySite</h1>
  9.  </header>
  10.  <nav>
  11.  <ul>
  12.  <li>Home</li>
  13.  <li>About</li>
  14.  <li>Contact</li>
  15.  </ul>
  16.  </nav>
  17.  <section>
  18.  <h1>MyArticle</h1>
  19.  <article>
  20.  <p>...</p>
  21.  </article>
  22.  </section>
  23.  <footer>
  24.  <p>...</p>
  25.  </footer>
  26.  </body>
  27.  </html>

Through the code, it is more concise and easier to understand, right?

Related Articles