Good day everyone! this is Part3 of sematic tag tutorials for beginners, before moving on we would like you to go through the Part1 & Part2 of this tutorial for better understanding. In this Part 3 of our semantic tags tutorials we are going to show how to define different sections of a webpage using <section> tag, and how to highlight text using <mark> tag & defining timings using <time> semantic tags.
<section> : <section> semantic tag is used to define different sections of your page. For example imagine a webpage with few parts like login part, article part, community follow part, subscription part etc. now these different parts which contributes to your webpage are different sections of your web page which were earlier grouped using <div> tags without any definition to what it was can now be grouped using <section> tags for each different sections. Although you will use <article> tag or any other semantic tag to define the specific contents but still each specific content is a part of your page and so each part will go inside the section tag and also a webpage can have any number of sections. Look at the example below :
<mark> : <mark> semantic tag is a very simple definitive tag used to highlight text in webpages. Look at the example below:
<time> : <time> semantic tag is also a very simple definitive tag used to define time and dates in webpages. <time> can not only be used to time & date like "12:00" , "2014-02-12" but can also be used to define words that relates to time & dates like for example "tomorrow" , "yesterday" , "2 hours" etc. The datetime attribute of <time> tag is used to define a specific time or date to the related words. Look at the example below :
We hope you liked this post if you did make sure you share it with your social networks.
Happy Designing !
<section> : <section> semantic tag is used to define different sections of your page. For example imagine a webpage with few parts like login part, article part, community follow part, subscription part etc. now these different parts which contributes to your webpage are different sections of your web page which were earlier grouped using <div> tags without any definition to what it was can now be grouped using <section> tags for each different sections. Although you will use <article> tag or any other semantic tag to define the specific contents but still each specific content is a part of your page and so each part will go inside the section tag and also a webpage can have any number of sections. Look at the example below :
<body>
<section>
<header>
<img src='logo.jpg'></img>
<p>Contact Us</p>
</header>
</scetion>
<section>
<main>
<section>
<article>
--- article goes here ---
</article>
</section>
</main>
</section>
</body>
<mark> : <mark> semantic tag is a very simple definitive tag used to highlight text in webpages. Look at the example below:
<body>
<p>
<mark>Eifel Tower</mark> is in <mark>Paris</mark>
</p>
</body>
<time> : <time> semantic tag is also a very simple definitive tag used to define time and dates in webpages. <time> can not only be used to time & date like "12:00" , "2014-02-12" but can also be used to define words that relates to time & dates like for example "tomorrow" , "yesterday" , "2 hours" etc. The datetime attribute of <time> tag is used to define a specific time or date to the related words. Look at the example below :
<body>
<p>
I am going to paris tomorrow for a seminar
on HTML5 at <time>12:00</time>
</p>
<p>
I am going to my native place
<time datetime="2014-06-25">tomorrow</time>.
</p>
</body>
We hope you liked this post if you did make sure you share it with your social networks.
Happy Designing !
