A semantic HTML element is an element which has its meaning clearly defined to both the browser and the developer. By merely looking at a semantic element or tag you can tell its function. In this example we will learn about HTML5 semantic elements.
For this example we will use:
- A computer with a modern browser installed.
- notepad++.
1. Getting Started
Semantics, to put it simply, is the study of meanings. According to the definition by W3C a semantic element clearly describes its meaning to both the browser and the developer.
Semantic tags or elements have been before the advent of HTML5. Elements like table(< table >) image ( < img > ) are semantic elements, by merely looking at the names of the tags you have an idea of their respective functions.
Examples of non semantic elements are div(< div >) and span (< span >). They tell us nothing about their contents. Semantic tags or elements make it easy for developers and computers to easily understand your mark up.
Let’s look at some HTML5 semantic tags.
1.1 <header>
The header tag defines the header for a document or section. It is used to hold introductory content. It is also valid to have several header tags in your HTML document. A header tag usually contains a heading element(< h1> – <h2>). A <header> tag cannot be placed within a <footer> or another <header> element.
The syntax for the header tag is below.
< header> </header>
An example below.
index.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:visible;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>
Html5 Semantic Elements Example
</title>
</head>
<body>
<header>
<h1>
Onclick Event Attribute
</h1>
The onclick event occurs when the user clicks on an element. When a user clicks on an element with the mouse or touches an element in a touchscreen environment. We can listen for click events on an element in so many ways.
One way we can do this is to add an onClick attribute directly to the element
</body>
</html>
1.2 <footer>
A footer element defines a footer for the document or a section. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
A document can has more than one footer, although it cannot be placed within a <header> or another <footer> element, and it cannot contain a <header> element.
index2.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:visible;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>
Html5 Semantic Elements Example
</title>
<style>
</style>
</head>
<body>
<header>
<h1>
Onclick Event Attribute
</h1>
</header>
The onclick event occurs when the user clicks on an element. When a user clicks on an element with the mouse or touches an element in a touchscreen environment. We can listen for click events on an element in so many ways.
One way we can do this is to add an onClick attribute directly to the element
<footer>
© 2016 HTML5 LEARN Corporation
</footer>
</body>
</html>
1.3 <aside>
The aside element defines content aside from the page content. Its content should always be related to the page content. It is often represented as side bars.
index3.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:visible;
padding:0%;
border:0%;
}
#as{
font-size:larger;
font-style:italic;
color:red;
float:right;
width:35%;
padding-left:5px;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>
Html5 Semantic Elements Example
</title>
<style>
</style>
</head>
<body>
<header>
<h1>
Onclick Event Attribute
</h1>
</header>
<aside id=as>
In HTML and JavaScript parlance an event can be something the browser does or something the user does.
</aside>
The onclick event occurs when the user clicks on an element. When a user clicks on an element with the mouse or touches an element in a touchscreen environment. We can listen for click events on an element in so many ways.
One way we can do this is to add an onClick attribute directly to the element
<footer>
© 2016 HTML5 LEARN Corporation
</footer>
</body>
</html>
1.4 <main>
This tag defines the main content of the page. An HTML document can has a maximum of one <main> element. It must not appear within the <article>, <aside>, <footer>, <header> or <nav> tags. The <main> tag was introduced in HTML5.
index4.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:visible;
padding:0%;
border:0%;
}
#as{
font-size:larger;
font-style:italic;
color:red;
float:right;
width:35%;
padding-left:5px;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>
Html5 Semantic Elements Example
</title>
<style>
</style>
</head>
<body>
<header>
<h1>
Onclick Event Attribute
</h1>
</header>
<aside id=as>
In HTML and JavaScript parlance an event can be something the browser does or something the user does.
</aside>
<main>
The onclick event occurs when the user clicks on an element. When a user clicks on an element with the mouse or touches an element in a touchscreen environment. We can listen for click events on an element in so many ways.
One way we can do this is to add an onClick attribute directly to the element
</main>
<footer>
© 2016 HTML5 LEARN Corporation
</footer>
</body>
</html>
1.5 <article>
The article tag defines an article in the document. The content within the <article> tag is independent from the other content on the site (even though it could be related). Examples of article content could include a forum post, a newspaper article, a blog entry, or a user-submitted comment.
The <article> tag was introduced in HTML5.
index5.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:visible;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>
Html5 Semantic Elements Example
</title>
<style>
</style>
</head>
<body>
<header>
<h1>
Onclick Event Attribute
</h1>
</header>
The onclick event occurs when the user clicks on an element. When a user clicks on an element with the mouse or touches an element in a touchscreen environment. We can listen for click events on an element in so many ways.
One way we can do this is to add an onClick attribute directly to the element
<footer>
© 2016 HTML5 LEARN Corporation
</footer>
</body>
</html>1.6 <address>
The address tag defines the contact information for the author/owner of a document or an article. The <address> tag cannot contain <article>, <aside>, <nav>, <section>, <header>, <footer>, <hgroup>, <h1>-<h6> or other <address> elements.
1.7 <details> and <summary>
The <details> tag defines additional information that the user can view or hide. It functions as an open and close widget- it can be opened to view additional details.
The content of a <details> is not visible by default unless the open (boolean) attribute is set to true.
The <summary> tag is used to specify a visible heading for the details. The heading can be clicked to view/hide the details.
index6.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:visible;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>
Html5 Semantic Elements Example
</title>
<style>
</style>
</head>
<body>
<header>
<h1>
Terms Of Service
</h1>
</header>
<details>
<summary>
see more...
</summary>
You are not allowed to lift data from this domain without our express and written permission
</details>
</body>
</html>
2. Summary
In this example we learnt about HTML5 semantic elements. We also gave detailed information about each of them with examples.
3. Download the source code
Download
You can download the full source code of this example here: html5semanticelement
