HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

HTML Block and Inline Elements

❮ Previous Next ❯

Each HTML element has an inherent default display value, which varies depending on the type of element it represents.

HTML elements have two primary display values: "block" and "inline." These values determine how elements are visually presented within a document's layout.

Block-level Elements

A block-level element is always rendered on a new line, and browsers automatically include space (margin) both before and after the element. This design ensures that block-level elements are visually separated from other content on the webpage.

A block-level element spans the entire available width on a webpage, extending fully from the left to the right side of its container.

Two frequently utilized block elements in HTML are the <p> and <div>.elements. These elements are crucial for structuring and organizing content on webpages.

The <p> element in an HTML document is used to define a paragraph. It is commonly used to group and present text content in a structured manner.

The <div> element in an HTML document is used to create a division or section, allowing developers to group and organize content for styling and layout purposes.

The <p>element is categorized as a block-level element in HTML.

The <div> element is categorized as a block-level element in HTML.

Below is the list of 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

An inline element is displayed without starting on a new line.

An inline element occupies only the width required to fit its content..

This is a <span> element inside a paragraph.

Below are some 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> Element

The <div> element is commonly utilized as a wrapper or container for grouping and organizing other HTML elements together.

The <div> element does not have any mandatory attributes, but it often includes common attributes such as style, class and id These attributes allow developers to apply CSS styles, apply class definitions, and provide unique identifiers to the element.

By combining the <div>element with CSS, developers can effectively apply styles to groups of content, enabling them to design and format blocks of content as per their requirements:

The <span> Element

The <span> element serves as an inline container in HTML, allowing developers to designate specific portions of text or sections within a document with distinct markup or styling.

The <span> element does not necessitate any mandatory attributes, yet it commonly employs attributes like style, class and id to apply CSS styles, assign class definitions, and provide unique identifiers to the designated parts of content.

When combined with CSS, the <span> element is employed to apply styles to specific portions of the text, enabling developers to customize and format those parts as needed:

Chapter Summary

  • HTML elements have two primary display values: "block" and "inline." These values determine how elements are visually presented within a document's layout.
  • A block-level element always starts on a new line and takes up the full width available
  • An inline element is displayed without starting on a new line and occupies only the width required to fit its content.
  • The <div> element is categorized as a block-level element in HTML and is frequently employed as a container to group and organize other HTML elements together.
  • The <span> element serves as an inline container in HTML, utilized to apply markup or styling to specific sections of text or parts of a document.
❮ Previous Next ❯