semantic html structure code example

Example 1: all semantic html tags

<article> 	Defines independent, self-contained content
<aside> 	Defines content aside from the page content
<details> 	Defines additional details that the user can view or hide
<figcaption> 	Defines a caption for a <figure> element
<figure> 	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> 	Defines a footer for a document or section
<header> 	Specifies a header for a document or section
<main> 	Specifies the main content of a document
<mark> 	Defines marked/highlighted text
<nav> 	Defines navigation links
<section> 	Defines a section in a document
<summary> 	Defines a visible heading for a <details> element
<time> 	Defines a date/time

Example 2: html semantic layout

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Semantic HTML</title>
  </head>
  <body>

    <h1>Interneting Is Easy!</h1>
    <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>

  </body>
</html>

Tags:

Html Example

Recent Posts