Good day everyone! In this post we are going to introduce you to the semantic tags. Prior to HTML5 we lacked the ability to define our contents completely for every now and then we relied on <div> tag to group our content. It was good to group our content but lacked the ability to define contents which made a big confusion for web crawlers to search for a content and even developers and designers found it hard to identify and maintain a particular contents.
However, the new HTML5 has introduced several semantic tags to define our contents and in this part 1 of our semantic tags tutorials we are going to show how to define your header, footer and article contents using <header>, <footer> and <article> semantic tags.
<header> : header semantic tags in HTML5 is used to define & group header contents. All you have to do is whatever header contents like name of the site, logo, slogan etc that you were previously grouping under the <div> group it under the <header> element. This will clearly specify that the contents are header contents. Look at the example below :
<article> : Now this is the tag we really wanted "the article semantic tag". Article semantic tag is used to define articles and posts on our blog or website. This tag can be very useful as unlike header and footer there can be multiple articles on page or website. This tag clearly specifies and define its contents. It is very useful to you and web crawlers. Look at the example below:
<footer> : Unlike the header tag footer semantic is used to define and group footer contents that can be the copyright information of your site, contacts, recent links, Quick links etc. Use footer tag to specify and group all these footer contents. Look at the example below :
So don't you think the new HTML5 tags are worth using, yes it is as it makes things a lot more easier for designers as well as for the search engines. So keep practicing and after that you can read partII of this article. We hope you liked this post if you did make sure you share it with your social networks.
However, the new HTML5 has introduced several semantic tags to define our contents and in this part 1 of our semantic tags tutorials we are going to show how to define your header, footer and article contents using <header>, <footer> and <article> semantic tags.
<header> : header semantic tags in HTML5 is used to define & group header contents. All you have to do is whatever header contents like name of the site, logo, slogan etc that you were previously grouping under the <div> group it under the <header> element. This will clearly specify that the contents are header contents. Look at the example below :
<body>
<header>
<img src="logo.jpg"></img>
<span id="slogan">All good</span>
</header>
</body>
<article> : Now this is the tag we really wanted "the article semantic tag". Article semantic tag is used to define articles and posts on our blog or website. This tag can be very useful as unlike header and footer there can be multiple articles on page or website. This tag clearly specifies and define its contents. It is very useful to you and web crawlers. Look at the example below:
<body>
<header>
<img src="logo.jpg"></img>
<span id="slogan">All good</span>
</header>
<article>
<h1>Introduction to semantic tags</h1>
<span>Sematic tags are
used to define content in HTML5</span>
</article>
</body>
<footer> : Unlike the header tag footer semantic is used to define and group footer contents that can be the copyright information of your site, contacts, recent links, Quick links etc. Use footer tag to specify and group all these footer contents. Look at the example below :
<body>
<header>
<img src="logo.jpg"></img>
<span id="slogan">All good</span>
</header>
<article>
<h1>Introduction to semantic tags</h1>
<span>Sematic tags are
used to define content in HTML5</span>
</article>
<footer>
copyright © 2014
</footer>
</body>
So don't you think the new HTML5 tags are worth using, yes it is as it makes things a lot more easier for designers as well as for the search engines. So keep practicing and after that you can read partII of this article. We hope you liked this post if you did make sure you share it with your social networks.
Happy Designing !
No comments :
Post a Comment