Key Characteristics:

• Start on a new line
• Take full available width
• Stack vertically
• Can contain other block and inline elements
• Can have width, height, margins, and padding set

Code Example:

<!-- Heading elements -->
<h1>Main Heading</h1>
<h2>Subheading</h2>

<!-- Paragraph -->
<p>This is a paragraph of text that forms a block.</p>

<!-- Division -->
<div>This is a div container.</div>

<!-- Lists -->
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
</ul>

<!-- Form -->
<form>
  <input type="text">
  <button>Submit</button>
</form>

<!-- Sectioning elements -->
<header>Header content</header>
<nav>Navigation</nav>
<section>Section content</section>
<article>Article content</article>
<footer>Footer content</footer>

Visual Representation:

Key Characteristics:

• Do not start on a new line
• Take only necessary width
• Flow within content
• Cannot contain block-level elements
• Width and height properties don`'t apply

Code Example:

<!-- Span -->
<p>This is a <span>span element</span> within text.</p>

<!-- Links -->
<p>Visit our <a href="#">website</a> for more information.</p>

<!-- Text formatting -->
<p>This is <strong>bold text</strong> and this is <em>italic text</em>.</p>

<!-- Images -->
<p>Here's an image: <img src="image.jpg" alt="Description"></p>

<!-- Form elements -->
<p>Enter your name: <input type="text"> <button>Submit</button></p>

<!-- Code -->
<p>Use <code>console.log()</code> for debugging.</p>

<!-- Line break -->
<p>First line<br>Second line</p>

Visual Representation:

Code Example:

/* Make block element inline */
div.inline-div {
  display: inline;
  background-color: lightblue;
  /* width and height won't work */
}

/* Make inline element block */
span.block-span {
  display: block;
  background-color: lightgreen;
  /* now width and height work */
}

/* Make element inline-block */
div.inline-block-div {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-color: lightcoral;
  /* behaves like inline but accepts dimensions */
}

/* Hide element completely */
.hidden-element {
  display: none;
}

/* Flexible box layout */
.flex-container {
  display: flex;
}

/* Grid layout */
.grid-container {
  display: grid;
}

Output Examples:

Code Example:

<!-- Navigation menu -->
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<!-- Article with inline elements -->
<article>
  <h2>Article Title</h2>
  <p>This is a paragraph with <strong>important text</strong> and a <a href="#">link</a>.</p>
  <p>Another paragraph with <em>emphasis</em> and <code>code snippets</code>.</p>
</article>

<!-- Form with mixed elements -->
<form>
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name">
    <span class="help-text">Enter your full name</span>
  </div>
  <div>
    <button type="submit">Submit</button>
    <button type="reset">Cancel</button>
  </div>
</form>

<!-- Card component -->
<div class="card">
  <img src="image.jpg" alt="Card image">
  <div class="card-content">
    <h3>Card Title</h3>
    <p>Card description with <a href="#">link</a>.</p>
    <button>Learn More</button>
  </div>
</div>