-
Structural Semantic Elements in HTML5
over 8 years ago
- Hello readers, Today we will discuss about the Structural Semantic Elements that are used in HTML5.
Introduction of HTML5
HTML5 is basically a latest and an enhanced version of HTML.
HTML5 has various new features including new elements ,attributes and many more that helps in Here buiding a websites.
The syntax used in HTML5 is <! DOCTYPE html>.
It also has new HTML5 attributes and elements. Some attributes are defined globally while others are defined for particular elements only.
Here is the difference between the HTML4 and HTML5 Structural Elements:-
HTML4 HTML5
<div id=”nav” > <nav>
<div class=”header” > <header>
<div class=”footer”> <footer>
Firstly , we must clearify the basic meaning of “semantic” it is basically a study of meaning of words and phrases in the basic grammar that we all use. Whereas in HTML5 semantic elements clearly describes the element meaning to both the browser and the developer.
Due to the following features we use semantic elements:-
- It has lighter code.
- Accessibilty
- It has search engine optimization.
- Repurposing.
Below is the list of various semantic elements that defines the different parts in a particular web page:
<article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time> <section> <summary> <time>
Here is the brief discription about the structual semantic elements:
-
<article> - This element represents a section of self-contained content of a document or website.
-
<aside> - This element represents to a piece of content that is slightly related to the main text of the document.
-
<details> - This element defines to the piece of content representing additional details that the user can hide or view.
-
<figcaption> - This element defines a caption for the figure used in the document by giving explanition to the image .
-
<figure> - This element defines an image, video ,graphic , or audio that is included in the document.
-
<footer> - This element defines the footer section of the document.
-
<header> - This element defines the header section of the document.
-
<main> - This element represents the main content of the document or the site.
-
<mark> - This element represents to the highlighted text in the document.
-
<nav> - This element defines to a set of navigation link used in the document.
-
<section> - This element defines a section in a document or website.
-
<summary> - This element defines to the the visible heading basically for the <detail> element in the document.
-
<time> - This element defines to the date/time used in a document.
Below is the HTML code showing the structual semantic tags :-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Semantic Elements</title> <style> body {font-family: Verdana, sans-serif; font-size:0.8em;} header { border:1px solid red; margin:5px; padding:8px;} footer { border:1px solid green; margin:5px; padding:8px; } section { border:1px solid orange; margin:5px; padding:8px; } nav { border:1px solid black; margin:5px; padding:8px; } article{ border:1px solid purple; margin:5px; padding:8px; } nav ul {margin:0; padding:0;} nav ul li {display:inline; margin:5px;} </style> </head> <body> <div class="container"> <header> <h1>Welcome On Our Website!</h1> <p>Here is our logo and slogan.</p> </header> <nav> <header> <h2>Choose Your Interest</h2> </header> <ul> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> </ul> </nav> <article> <header> <h1>Title of Article</h1> <h2>Subtitle of Article</h2> </header> <section> <h3>First Logical Part (e.g. "Theory")</h3> <p>Paragraph 1 in first section</p> <h4>Some Other Subheading in First Section</h4> <p>Paragraph 2 in first section</p> </section> <section> <h3>Second Logical Part (e.g. "Practice")</h3> <p>Paragraph 1 in second section</p> <p>Paragraph 2 in second section</p> </section> <footer> <h4>Author Bio</h4> <p>Paragraph in Article's Footer</p> </footer> </article> <aside> <h2>Get To Know Us Better</h2> <section> <h3>Popular Posts</h3> <ul>...</ul> </section> <section> <h3>Partners</h3> <ul>...</ul> </section> <section> <h3>Testimonials</h3> <ul>...</ul> </section> </aside> <footer> <ul> <li>Copyright</li> <li>Social Media Links</li> </ul> </footer> </div> </body> </html>Conclusion:-
Hence, The HTML5 structual semantic elements are easy to understand and use in forming the websites.
Note:- The latest versions of Safari ,Google Chrome , Mozilla Firefox and Opera all support HTML5 new features.
0 Comment(s)