HTML Section and HTML Semantic Element.
HTML TUTORIAL (PART-06)
HTML Section and HTML Semantic Element.
Guys in this Tutorial we learn about HTML (Hyper Text Markup Language) Section, (HTML Section) and HTML Semantic Element.
HTML Sections
HTML section is a group element, that group of elements is (e.g., text, heading, paragraph, images,) etc. Section creating is essential for HTML web development and styling the web content it is best not necessary but good for web pages.
Important Element used for HTML Section.
- <span> It is used to smeller group of text in a paragraph and uses of few HTML elements. We all know It is an Inline Element in HTML.
- <div> It is used to larger group of text in a paragraph and HTML element like header, footer navigation, body, main content, images. And it is block-Level element in HTML.
- Very important for you, remember this. The <span> element is used to good for designing and arranging some few text and inline element but the <div> element is best for large element, and it is good better than <span> element.
Example of <div> element with different style.
<!DOCTYPE html> <html>lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>studymuch.in</title> </head> <body> <h2>Div Element</h2> <div style="height:100px; width:130px; background-color: yellow;"> <p>I am yellow colour.</p></div> <div style="height:100px; width:130px; background-color: yellowgreen;"> <p style="text-align: center;">I am yellowgreen colour. </p></div> </body> </html> |
Output of this Example.
Div. Element
|
You can see above example <div> element are separated from each other and they also have different style and color.
HTML Semantic Element
Semantic Element is an element that use to more understandable the webpages and websites, it is not mandatory but it is still better for practice and recommended because it might help in search engine optimization (SEO) of website and your code is more untestable with section wise.
Here list of some Semantic Elements.
List of Semantic Element
- <section>: It is use to define section.
- <article>: It is used to define article.
- <header>: It is defined header of website.
- <nav>: It is used to define navigation list of website and bar.
- <footer>: It is used to define a footer.
- <main>: It is used to define the main content.
Here the Example of span element with inside style them differently.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>studymuch.in</title> </head> <body> <p>Example of span element.</p> <span style="font-size: 40px;">I</span> <span style="color: blue;"> am</span> <span style="color: rgb(100, 10, 184);">span</span> <span style="color: rgb(3, 90, 3);">element.</span> </body> </html> |
Output of this Example.
| Example of span element. I am span element. |
As you can see above example <span > element is doing not separate into multiples line. It is showing all span element on one line. So span element id inline element.
In this tutorial we learned HTML Section and HTML Semantic Element with programming example both input and output.
Also Learn This.
- Semantic elements in html5,
- What are the new semantic Elements in html5 details div nav mark?
- Non semantic elements in html5,
- Semantic elements in html Mozilla,
- HTML semantic tags cheat sheet,
- Semantic html examples,
- Html elements list,
- Non semantic tags in html,
4 Comments
Kritika · December 12, 2021 at 4:10 am
Good atrical, help to learn HTML.
zoritoler imol · June 30, 2022 at 6:56 am
This is a topic close to my heart cheers, where are your contact details though?
gate.io türkiye · May 9, 2023 at 2:37 pm
Your article made me suddenly realize that I am writing a thesis on gate.io. After reading your article, I have a different way of thinking, thank you. However, I still have some doubts, can you help me? Thanks.
binance signup · November 2, 2024 at 7:02 pm
Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?