semantic elements
- Elements has meaning.
- Describes its meaning to browser and developer.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form> <table> <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time> |
Some of semantic elements
- <section> – <section> element is grouping content. We can split page into different sections.
|
1 2 3 4 |
<section> <h1>Section heading</h1> <p>Section description...</p> </section> |
- <article> – <article> element is independent and has self-contained content. <article> element used to write Forum post, Blog post, Newspaper article.
|
1 2 3 4 |
<article> <h1>Article Heading</h1> <p>It has roots in a piece of classical Latin literature from 45 BC, making it years old.</p> </article> |
- <header> – <header> element specifies header of document or section.
|
1 2 3 4 5 6 |
<section> <header> <h1>Section heading</h1> </header> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </section> |
- <footer> – <footer> element define footer for a document or section.
|
1 2 3 |
<footer> <p>Copyright © 2019 All rights reserved.</p> </footer> |
- <aside> – <aside> element defines the content which will be set to the side.
|
1 2 3 4 |
<aside> <h1>Aside heading<h1/> <p>Content</p> </aside> |
- <details> – <details> element define detail of your website. It may be visible or hidden.
|
1 2 3 |
<details> <summary>Copyright</summary>-by Your company All the rights are owned by your company </details> |
- <nav> – <nav> is one of the semantic element which define set of navigation link.
|
1 2 3 4 5 6 |
<nav> <a href="/home/">HOME</a> <a href="/content/">CONTENT</a> <a href="/casestudy/">CASE STUDY</a> <a href="/contactus/">CONTACT US</a> </nav> |
- <time> – The <time> tag defines date/time.
|
1 |
<p>Our office open at <time>10:00</time> every morning.</p> |
non-semantic elements
- Elements has no meaning called non-semantic elements.
Example
|
1 2 |
<div> <span> |
