HTML for Beginners: Div, Span #10

The <div> and <span> elements are two of the most commonly used HTML elements, often referred to as generic containers. Other usages include grouping related elements for styling purposes and serving as hooks for JavaScript to manipulate and interact with the DOM.

div

<div> is a block-level element, which means it will take up the full width available, starting on a new line. It is used to group block-level content.

It is often used to create sections or divisions of a webpage, allowing for better organization and layout structure.

<div> elements can be styled with CSS and manipulated with JavaScript to create complex layouts and dynamic behaviors.

It can contain other block-level or inline elements, making it versatile for structuring HTML documents.

<div class="container">
    <h1>Title</h1>
    <p>This is a paragraph inside a div.</p>
</div>

span

<span> is an inline element, meaning it does not start on a new line and only takes up as much width as necessary. It is used to group inline content.

It is primarily used for styling a part of the text or content within other elements without breaking the flow of the document.

<span> is often used when no semantic meaning or structural division is needed, making it ideal for applying styles or JavaScript effects to small parts of the text.

<p>This is a <span class="highlight">highlighted</span> word in a paragraph.</p>

<style>
  .highlight {
    color: #f9c282;    
  }
</style>