HTML Block Elements and Inline Elements
📌 Key Takeaways
- HTML Block Elements and Inline Elements
- Inline Elements
- The <div> Tag
- <span> Tag
- HTML Block Elements and Inline Elements
Depending on its type, each HTML element has a predefined default display value.
You can choose between two different values for the screen: block and inline.
Block-level Elements
Browsers will always insert extra space (a margin) before and after a block-level element because of how they treat new lines.
The width of a block-level element is always 100%. (stretches out to the left and right as far as it can).
The <p> and <div> tags are two examples of frequently used block elements.
If you want to create a paragraph in an HTML document, use the p> element.
To separate content in an HTML document, use the div> element.
Example
<!DOCTYPE html>
<html>
<body><p style=”border: 1px solid black”>Test p Block</p>
<div style=”border: 1px solid black”>Test div Block</div></body>
</html>
Output
As a block-level element, <p> is used to separate content within a block.
The <div> tag is used to create sections within a document.
block-level elements in HTML:
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
Inline Elements
To put it simply, an inline element does not begin on a new line.
If an inline element is included, it will only consume the minimum amount of width required.
Example
<!DOCTYPE html>
<html>
<body><p>This is an example of inline span <span style=”border: 1px solid black”>Test Spam</span> element inside a paragraph.</p>
</body>
</html>
Output
a <span> tag used within a paragraph.
inline elements in HTML:
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
The <div> Tag
It’s common practise to place content into the div> element and then utilise that to hold more HTML content.
There are no required properties for the <div> element, however style, class, and id are frequently used.
The <div> element can be used to create visually distinct sections of text when used with CSS:
Example
<!DOCTYPE html>
<html>
<body><div style=”background-color:blue;color:white;padding:20px;”>
<h2>Welcome </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div></body>
</html>
Output
<span> Tag
Marking up a segment of text or document with the span> element is done inline.
There isn’t a set list of mandatory properties for the span> element, but style, class, and id are frequently used.
The CSS <span> element allows for selective formatting of text:
Example
<!DOCTYPE html>
<html>
<body><h1>The span element Example</h1>
<p>Hi this is <span style=”color:red;font-weight:bold;”>Span tag </span> example. I hope you <span style=”color:darkolivegreen;font-weight:bold;”>understand it.</span> </p>
</body>
</html>
Output
HTML Block Elements and Inline Elements
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
