SEMANTIC ELEMENTS
The word semantic is the study of the implications of words and phrases in language. A semantic element clearly depicts its intending to both the browser and the developer. These are the elements that are used to give some meaning to the various section or parts of the webpage. In Earlier versions of html, you use <div> element , using ids or class to differentiate them from each other.
But now, HTML5 has introduced some semantic elements to determine what the particular area is doing. These elements are :
1. <header>: The header tag denotes the head part of the web page . For early content, header tag can be used as a container. The following illustration characterizes a header of a page:
EXAMPLE:
<header>
<h1>What is semantic elements?</h1>
<p>Semantic elements</p>
</header>
<p>A semantic element clearly describes its meaning to both the browser and the developer..</p>
2. <footer>: The footer tag indicates a footer for a section of the webpage. A <footer> tag contains information about its containing component. A footer typically contains the creator of the document, copyright information, links to terms of use, contact information, etc.
EXAMPLE:
<footer>
<p>Posted by: xyz</p>
<p>Contact information: <a href="mailto:abc@abc.com">
abc@abc.com</a>.</p>
</footer>
3. <nav>: This is used for primary navigation links on a webpage.
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
4. <article>: The <article> element indicates free, independent content. An article should make sense on its own, and it should be conceivable to peruse it freely from the rest of the web site. we can use article in :
- Forum post
- Blog post
- Newspaper article
EXAMPLE:
<article>
<h1>What is semantic elements?</h1>
<p>Semantics is the study of the meanings of words and phrases in language.
Semantic elements are elements with a meaning.
A semantic element clearly describes its meaning to both the browser and the developer.</p>
</article>
5. <section>: The <section> element defines a section in a document.
EXAMPLE :
<!DOCTYPE html>
<html>
<body>
<section>
<h1>Semantic elements</h1>
<p>TSemantics is the study of the meanings of words and phrases in language. Semantic elements are elements with a meaning. A semantic element clearly describes its meaning to both the browser and the developer.</p>
</section>
<section>
<h1>HTML5 section Element</h1>
<p>The <section> element defines a section in a document.
According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading."
A Web site's home page could be split into sections for introduction, content, and contact information.</p>
</section>
</body>
</html>
1 Comment(s)