Skip to content
Related Articles

Related Articles

Improve Article

Difference between semantic and non-semantic elements

  • Difficulty Level : Easy
  • Last Updated : 11 Sep, 2020
Geek Week

Semantic HTML elements:
These elements simply mean, elements with meaning. The reason being, there definition in the code tells the browser and the developer what they are supposed to do. Framing in simpler words, these elements describe the type of content they are supposed to contain.

Following is the list of some semantic elements :

  • article
  • aside
  • details
  • figcaption
  • figure
  • footer
  • form
  • header
  • main
  • mark
  • nav
  • table
  • section

Example: The following program contains some semantic elements to explain the context better:




<!DOCTYPE html>
<html>
<head>
    <title>my web page</title>
    <style type="text/css">
        h1{
            color: green;
            font-weight: bold;
        }
        table, tr, td{
            border: 1px solid black;
        }
        th{
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>
     <article
         <h1>GeeksforGeeks</h1
         <p>A Computer Science Portal for Geeks</p
      </article
      <table>
          <tr>
              <th>head1</th>
              <th>head2</th>
          </tr>
          <tr>
              <td>A</td>
              <td>0</td>
          </tr>
          <tr>
              <td>B</td>
              <td>1</td>
          </tr>
      </table>
</body>
</html>

Output:

Non-Semantic elements: Unlike, semantic elements they don’t have any meaning. They don’t tell anything about the content they contain. They can be used with different attributes to mark up semantics common to a group.



Following is the list of some non-semantic elements:

  • div
  • span

Example:
The following code depicts how non-semantic elements work:




<!DOCTYPE html>
<html>
<head>
    <title>my web page</title>
    <style type="text/css">
     span{
         color: green;
         font-size: 40px ;
         font-weight: bold;  
            }
    </style>
</head>
<body>
    <div>
        <span>GeeksForGeeks</span> <br>
        A computer science portal for geeks
    </div>
</body>
</html>

Output:

Difference between semantic and non-semantic elements:

Semantic elementsNon-Semantic elements
they have meaningthey don’t have meaning
they describe how the content within them is supposed to behavethey can contain anything
they have specific attributes for their structure‘class’ attribute can be used to work with their structure

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :