HTML5 Section
HTML Section group different HTML Element (eg> text, heading, paragraphs, images etc.) together.
Creating sections is essential for organizing and styling web contents.
Elements Used for HTML Sections
- <div> : use dto group large group of HTML elements like navigation, header, main content, footer, images, it is a block-level element.
- <span> : used to group samller group of text in a paragraph and few HTML elements; it is an inline element.
HTML5 Semantic Elements
Here is a list of HTML5 Semantic Elements that work similarly with the <div> element:
- <nav> : defines a navigation list or bar
- <header> : defines a header
- <main> : defines the main content
- <footer> : defines a footer
However these elements work the same way with <div> element in terms of rendering in a browser.
<div> Example:
<!doctype html><html><head><title> div element example </title></head><body><!-- let's make divs with different contents and style --><div style="background: gold; width:200px; height: 200px;"><p>This is a paragraph</p></div><div style="background: yellow; width:200px; height: 200px;"><p>This is a paragraph</p></div></body></html>
Output:
✔️As you can see the two <div> elements are separaterd from each other they also have different styles. Thst's one of the advantages of HTML sections, it lets us style specific parts of an HTML document.
<span> Example:
<!doctype html>
<html>
<head>
<title> span element example </title>
</head>
<body>
<!-- let's put some text inside a span and style them differently -->
<p>
<span style="font-size: 30px;">I</span><span style="color:blue;">am a pragraph</span><span style="color: red;">and my words are styled</span><sapn style="color: green;">differently using</sapn><span style="color: gold;">the span element.</span>
</p>
</body>
</html>
Output:
💡Always Remember. The <span> element is good for styling and organizing few and inline elements while the <div> element is good for larger elements.
Post a Comment