HTML HTML Basics Structuring Your Content Semantic HTML: <header>, <footer> and <section>

Leo Penaloza
Leo Penaloza
5,489 Points

Question about <Sections>

What's the difference between the three? <div> <span> <section> they seem the same by they way they are used, from what I know a <div> is a block type tag and that a <span> is a inline tag, but how does <section> compare?

1 Answer

Shay Paustovsky
Shay Paustovsky
294 Points

Hi Leo,

<div>, <span>, <section> tags are all semantic markup that simply gives meaning to the text between them.

<div> & <section> do have a "block" display property by default but that is not what differentiates them.

DIV - is more used as a generic wrapper/container simply for styling purposes, and does not hold a meaning.

SECTION - denotes a section in your website - (welcome, contact, about, etc...) essentialy a thematic break in content.

SPAN - is the same purpose as a <div> but for text, it's a generic container for text styling purposes VS the <div> that is a generic container for other tags like <section>.

Later when learning CSS Layout, you will understand that <div's> purpose is to control layout width and grouping.

Hopefully I've cleared some confusions

~ Shay ~