HTML Block & Inline Elements
Elements are categorized into two types: block-level elements and inline elements. These elements determine how HTML content is displayed on a webpage.
Block-level Elements
These elements start a new line and take up the full width of the container they are in. Block-level elements are used to create larger sections of content, such as paragraphs, headings, and divisions. Examples of block-level elements include <p>, <h1>-<h6>, <div>, <ul>, <ol>, <li>, <form>, <table>, etc.
As an example:
Editor
Inline Elements
These elements do not start a new line and only take up as much width as necessary. Inline elements are used to format smaller parts of content within a block-level element, such as bold or italicized text, links, or images. Examples of inline elements include <a>, <img>, <strong>, <em>, <span>, <input>, etc.
As an example:
Editor
The block-level elements cannot be nested within inline elements, but inline elements can be nested within block-level elements.
<div> Elements
The <div> element can be thought of as a container that holds other HTML elements, such as text, images, videos, and other HTML elements. It is often used with CSS styles to apply styles and formatting to a group of elements or to position elements on a webpage.
As an example:
Editor
In this example:
- A
<div>element with the class"container"is used to group together the title, text, and image elements on the webpage. - The CSS styles applied to the "container" class apply to all of the elements inside the
<div>element, allowing them to be styled and formatted together.
<span> Elements
The <span> element does not have any specific meaning on its own. Instead, it is used to apply styles, formatting, or scripting to a group of inline elements, such as text or images.
As an example:
Editor
The <span> element is often used in combination with JavaScript to manipulate or add functionality to specific sections of text or elements on a webpage.