Header Ads Widget

What are the semantic & non-semantic HTML?

My codding spot July 03, 2021

 As you know HTML is used to create the structure of a website. But you have to wonder to know about its categorization. 

Most commonly HTML has two parts: semantic and non-semantic HTML. 

And HTML elements are also divided into semantic and non-semantic elements. 

In this post, we discuss HTML's semantic and non-semantic elements. Differences between them. 

So let’s start. 

First, understand the semantic HTML. 

What is semantic HTML? 

As the name suggests semantic HTML describes the meaning of its elements on a website or web page to both developers and other devices like (search engines, and browsers) 

Semantic HTML includes those HTML elements which have meaning and structure. 

Now, 

What are semantic HTML elements? 

Semantic HTML elements are elements that have proper meaning and define structure. 

For example, element <p> </p> describes that the content in between is a paragraph. 

The series of <h1></h1>…to.. <h6></h6> describes that content of these elements consider as a heading. 

HTML 4 Semantic elements


• <h1>… <h6>
• <blockquote>
• <p>
• <form>
• <table>
• <img>
• <abbr>
• <code>
• <address>
• <em>
Let’s see them in detail

✒ <h1> to <h6> elements :

The series of heading elements includes different levels of headings according to their sizes. 
h1 represents the biggest heading. h6 represents the smallest heading. 
So you can understand that while the order of heading elements increases the size of heading become small. 
See the example. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<html>
<head>
      <title>headings</title>
<style>
h1,h2,h3,h4,h5,h6{
color:red;
background-color:orange;}
</style>
</head>
<body>
      <h1>Most important heading</h1>
       <h2>Most important heading</h2>
       <h3>Most important heading</h3>
       <h4>Less important heading</h4>
       <h5>Less important heading</h5>
       <h6>Less important heading</h6>
</body>
</html>

Output:-
Output of heading tags

✒ <blockquote> :

The blockquote element contains some portion of the text of another website. You should add the website address using the “cite” attribute. 
The browser displays “blockquote” text as a block.

✒ <p>:

The p element specifies the paragraph text. 

✒ <form>:

The form element contains forms like login, registration form, etc. Form element contains the following attributes. 

target: describes where you want to open the page, within a page or in a new tab. 

method: contains a post and get methods. 

action: an URL of the page where you want to redirect. 

✒ <table>:

A table element creates a table. Arrange data in tabular form. 

✒ <img>:

An img element is responsible for displaying an image on a browser window. This element includes the “src” attribute containing the path of an image. 

✒ <abbr>:

The “abbr” element specifies the short form of the longer word or phrase. “title” attribute contains the phrase or longest text of this abbreviation text. Like, CPU, WWW, HTML, etc. 
An abbreviated word has a dotted underline. 

✒ <code>:

The code element is generally used to specify the programming statements in a unique style. 

✒ <address>:

An address element specifies the address of the author or owner. Generally used on the contact us page. 

✒ <em>:

An “emphasize text”. The text in between <em> </em> tag is displayed in italic form. 

An example gives you a better understanding. 



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!Doctype html>
<html>
<head>
<title>semantic</title>
</head>
<body>
<!--blockquote-->
<h3>This is example of blockquote.</h3>
<blockquote cite="https://www.healthathomes.com/">
<p>According to the www.healthathomes.com-"Health at Homes provides integrated healthcare services, by combining medical expertise with convenience and affordability with an aim to make professional services easily accessible to people on time."</p>
</blockquote>
<p>This is simple text.</p>
<!--abbriviation-->
<h3>This is an example abbrviation element.
</h3>
<p>This is <abbr title="world wide web">WWW</abbr> the accronym text.</p>
<!--em tag-->
<h3>This is an example emphasize element.
</h3>
<p>The <em>emphasize</em> text.</p>
<h3>This is an example of address element.
</h3>
<h4>Contact Us</h4>
<address>
<p>B-5,city square,<br>
lunkcikui,Vadodara.</p>
</address>
<h3>This is an example code element.
</h3>
<code>
var a,b,c;<br>
c=a+b;
</code></br>
<h3>This is image element example.</h3>
<img src="/download (1).jpeg" height="100" width="200"></img>
</body>
</html>

Output:-




Semantic HTML 5 elements

Using HTML 4, the web designer use <div> element as a container for heading, navigation, articles, etc.. with class or Id attributes. (<div class=”header”></div>, <div id=”nav”></div>) 

HTML 5 introduces some semantic elements for website design. These elements replace the div element. 
For example, <header> is similar to <div class=”header”>, <nav> is similar to <div id=”nav”>. 

Let’s see 

which are the HTML 5 semantic elements?

<header>

<header> is used for applying heading in web pages. Normally this element has used the top of the page before starting any content. 

What <header>  includes? 

• Heading elements (<h1> to <h6>). 
• Sometimes navigation bar can be added. 
• Website logo can be added. 

Where <header> element is not used? 

  • Some places like the footer of the page(<footer>) and in <address>.
  • Can’t use in <h1> to <h6>.

<nav>

You can put multiple navigation links in this element. 

Which type of links includes in <nav>? 

Only links containing internal pages of the website include in this section. This bunch of links is known as the menu bar. 

What can not be included in <nav>? 

Another link within the page is not included in <nav> element like a link of documents. 

<section>

<section> element defines a section on a web page. 

What <section> includes? 

<section> element includes content, content heading. A web page is divided into multiple sections. Like about us, service, contact information, etc... 

<article>

An article is self-written content. The content in this tag is independent. 

Which type of content is included in the article? 
• An article in a magazine or newspaper. 
• Post of blog or forum. 
• User comments. 

<aside>

An aside element represents content that is related to a web page’s other content. Generally content of the aside element displays on the sidebar. 
For example, On the university website, you see information about students' results, examinations, events, and more. 

<figure>

The figure element specifies pictorial information like a diagram, images, etc. 
A <img> tag is used for that. 

<figcaption>

As the name suggests <figcaption> specify captain for <figure>. 

<details>

The <detail> element hide or display its content according to user requirement. By default, the content is hidden. When the user wants to see content, the user can open it with the open attribute. 
The <summary> element is used with <detail> for visible content. 
Syntax
<details>
    <summary>Visible text</summary>
     Content that is hidden by default. 
</details>

<main>

<main> element specify important and unique content for a page. 

What to include in <main> element? 

  • Navigation links
  • Website logo
  • Copyright information
  • Sidebar
Note:
Only one <main> element can be used. 
It can't nest in <article>, <aside>, <header>, <footer>, and <nav> elements. 

<mark>

The <mark> element is used to highlight the text inside html elements like lists, and paragraphs. 
The text inside <mark> is displayed in black font and yellow background. 

<summary>

The <summary> element specify text or title for hidden content. It is used with <detail> tag. 

<footer>

The footer element specifies the footer part in web pages. Mostly the content of <footer> remains the same on all pages of a website.

A footer is added at the bottom of the page. 
For example, copyright information. 

What to include in <footer> tag? 

• Contact information
• Sitemap of website
• Copyright information
• Social media icons
• Navigation links 
• Authorship 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<title>Structure of HTML5
</title>
<style>
body{
font-family:Arial;
background-color:black;
}
h1{
border:4px inset blue;
padding:20px;
text-align:center;
color:red;
}
#city{
border:4px inset blue;
padding:15px;
text-align:center;
color:red;
}
nav{
color:green;
}
nav,article{
border:4px inset #e6fe4c;
padding:4px;
}
ul li {
display:inline;
padding:3px;
}
a{
text-decoration:none;
padding:2px;
font-size:20pt;
font-weight:bold;
background-color:mediumseagreen;}
section{
border:4px inset violet;
padding:4px;
color:red;
}
h2{
padding:4px;
color:blue;
}
h3{
color:white;
}
section,article{
margin:30px;
}
footer{
border:4px inset blue;
padding:4px;
margin:10px;
text-align:center;
color:red;
}
main{
border:4px inset #3f3;
margin:2px;}
</style>
</head>
<body>
        <h2 id="city">Biggest cities of India</h2>
    <nav>
       <ul>
         <li>
         <a href="#">Mumbai</a>
         </li>
         <li><a href="#">Ahmedabad</a> 
         </li>
         <li><a href="#">Banglore</a>
         </li>
       </ul>
    </nav>
<main>
      <section>
          <h2>About Cities</h2>
        <article>
          <h3>Mumbai</h3>
          <p>Mumbai is capital of Maharastra.Entertainment indusrty is located here.Hotel Taj and gate way of india are the famous place for visiting.
          </p>
        </article>
        <article><h3>Ahmedabad</h3><p>Ahmedabad in capital of gujarat.Visiting places are Kakariya talav,sidi sayad jali.Navratri festival is celebrated here.</p></article>
        <article>
        <h3>Banglore</h3>
        <p>Banglore is the capital of the Indiaan southern state karnataka.The center of india's high-tech industry.</p>
         </article>
      </section>
    </main>
<footer>
  <p>All copyrights are reserved.</p>
</footer>
</body>
</html>

Output:-
Output of html 5 semantic elements
Example of structure of HTML 5

What is non-semantic HTML? 

Non-semantic HTML represents the look of a website. It doesn’t have proper meaning. 

What are non-semantic elements? 

Non-semantic elements have no meaning. The web developer uses these elements as a container for semantic elements. 

For example, <div class=”header”><h1>Non-semantic elements</h1></div>

List of non-semantic elements

<div>:- 

It is a container for other elements. It includes semantic elements such as <p>,<h1>.. <h6>, etc... 

<span>:- 

It is the inline container used to format some part of the text of elements like <p>,<h1>… <h6>, <table>.

Examples of non-semantic elements



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
<head>
<title>non-semantic</title>
<style>
#main{
background-color:slateblue;
height:auto;
width:auto;
margin:50px;}
.header{
text-align:center;
color:slateblue;
background-color:pink;
margin:20px;
padding:4px;}
.navratri,.janmastami,.ganesh{
background-color:skyblue;
color:slateblue;
padding:5px;
margin:40px;}
span{
font-weight:bold;}
</style>
</head>
<body>
<div id="main">
    <div class="header">
    <h1>Festivals of india</h1>
    </div>
    <div class="navratri">
     <h2>Navratri</h2>
      <p>Navratri festival is the festival of gujarati. During festival people pray godess Amba and play <span>garaba</span> in night.
      </p>
    </div>
    <div class="janmastami">
     <h2>Janmastami</h2>
      <p>Janmastami festival is celebrated in memory of birth of <span>Lord Krishna.</span>
      </p>
    </div>
    <div class="ganesh">
     <h2>Ganesh Chaturthy</h2>
      <p>Like navratri Ganesh chaurthi is biggest and main festival of maharastrian.The <span>lalbaug ka raja</span> is famous for biggest statue of Ganpati bapa.
      </p>
    </div>
</div>
</body>
</html>
Output:-
Output of non-semantic elements
Example of non-semantic html 

What is the difference between semantic elements and Non-semantic elements? 

Very first difference is meaning. 
Semantic elements have an exact meaning. 
While non-semantic elements do have no meaning itself. 

Look at the below figure you can see the difference between semantic and non-semantic elements. 

Different between semantic and non-semantic HTML
Semantic vs. Non-semantic html elements 


🔸While using non-semantic <div>, the developer uses either class or id attribute to create a structure. 
The semantic elements don’t need any attribute to create structure. 

🔸It’s easy to use semantic elements. 
For example, for heading use <header>. 
Using a non-semantic <div> tag you have to specify its purpose by defining the attribute name.

 For example, for heading, when giving a class name, it is the difference from one developer to another. One developer gives the class name header, the second one gives the heading and another gives the head. So here attribute name is different from the person to person. 


🔸Semantic elements have specific elements for different types of structure. 
While in non-semantic elements, you have to specify different names of attributes for different structure 

Conclusion:-

Semantic and non-semantic html elements both work as containers. Web developers not familiar with HTML 5 still using <div> element. 

But with semantic elements, you can save extra effort to type and remember class names. 



Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments