HTML Block and Inline Elements

HTML blocks are the topic of our discussion. Depending on what type of element it is, HTML elements have default display values.

Inline and block are the two display values.

Table Of Content-

Block-level Elements

There is always a new line at the beginning of a block-level element in HTML.

In block-level elements, the width is always full (it lengthens to the left and right as far as it can go).

Inline elements do not have margins, while block-level elements do.

Divs “<div>” are block-level elements.

Example

<!DOCTYPE html> <html> <body><div>Mr Examples</div></body> </html>

Here is another example of the Block level Element:

Example: 

<!DOCTYPE html> <html> <body> <div>Mr example <blockquote> Every thing you need to learn about html is here</blockquote> </div> </body> </html>

The HTML block-level elements are as follows:

ElementsOverview
<address>Defines the contact information for the author/owner of a document or article.
<article>Defines a self-contained, independent piece of content that can stand alone and be reused on different pages.
<aside>Defines content that is tangentially related to the surrounding content, often used for sidebars or callout boxes.
<blockquote>Used to indicate a section of quoted text.
<canvas>Allows for dynamic, scripted rendering of graphics and visualizations.
<dd>Used in conjunction with the
tag to define a description of a term.
A generic container element that does not have any specific semantic meaning.
<dl>Used to define a list of terms and their associated descriptions.
<dt>Used in conjunction with the
tag to define a term being described.
<fieldset>Used to group related form elements together.
<figcaption>Used to provide a caption or description for a
element.
<figure>Used to group together an image or video with its caption or description.
<footer>Defines a footer section for a document or section of content.
<form>Used to create an HTML form that allows users to input data.
<h1>–</h6>Heading tags used to define the hierarchy of content on a page, with

being the most important and

being the least important.
<header>Defines a header section for a document or section of content.
<hr>Used to create a horizontal rule or line.
<li>Used to define a list item in an ordered or unordered list.
<main>Used to indicate the main content area of a document.
<nav>Used to define a navigation section for a document or website.
<noscript>Used to provide an alternate content for users who have disabled JavaScript in their browser.
<ol>Used to define an ordered list.
<p>Used to define a paragraph of text.
<pre>Used to define preformatted text, where white space is preserved and displayed as written in the HTML code.
<section>Used to define a section of content within a document.
<table>Used to create a table to display data.
<footer>Used to define the footer section of a table.
<ul>Used to define an unordered list.
<video>Used to embed video content into a web page.

Reminder : Inline Elements do not start on a new line.In HTML blocks, an inline element only takes up as much space as needed. Here it is a <span> element inside a <p> paragraph.

Example: 

<!DOCTYPE html> <html><body><br><br><br><span>Mr Examples</span><br><br><br> </body></html>

Another example of the inline element:

Example: 

<!DOCTYPE html> <html><body><br><br><br><p>Hello there we are using the <b>inline element here</b></p><br><br> </body></html>

HTML inline elements are as follows:

Elements Overview
<a>creates a hyperlink that can be clicked to navigate to another web page, document, or file.
<abbr>used to define an abbreviation or acronym, with the full version shown when the user hovers over the abbreviated text.
<acronym>a deprecated tag used to define an acronym, similar to <abbr>.
<b>makes text bold.
<bdo>used to override the default text directionality for languages that are read from right to left, such as Arabic or Hebrew.
<big>makes text larger.
<br>creates a line break, typically used to separate text onto multiple lines.
<button>creates a clickable button that can trigger an action or submit a form.
<cite>used to indicate the title of a creative work, such as a book or movie.
<code>used to display computer code or other programming-related content.
<dfn>used to define a term or concept.
<em>makes text italicized to indicate emphasis.
<i>similar to <em>, makes text italicized but typically used for stylistic purposes rather than emphasis.
<img>displays an image on the web page.
<input>creates a form element where users can enter data, such as text or numbers.
<kbd>used to indicate keyboard input, typically displayed in a monospace font.
<label>associates a label with a form element, making it easier for users to understand what information they need to enter.
<map>used in conjunction with <img> to create an image map where different parts of the image can be clicked to navigate to different web pages or trigger actions.
<object>used to embed multimedia content, such as video or audio, onto the web page.
<output>displays the result of a calculation or script.
<q>indicates a quotation, typically displayed in quotation marks.
<samp>used to display sample output from a computer program or script.
<script>
used to include JavaScript code on the web page.
<select>creates a drop-down menu where users can select from a list of options.
<small>makes text smaller.
<span>used to group elements together for styling or scripting purposes.
<strong>makes text bold to indicate strong emphasis.
<sub>used to display subscript text, typically smaller and slightly below the main text.
<sup>used to display superscript text, typically smaller and slightly above the main text.
<textarea>creates a form element where users can enter multiple lines of text.
<time>
used to indicate a date or time, with optional formatting.
<tt>displays text in a monospace font, similar to <kbd>.
<var>indicates a variable or placeholder value in a computer program or script.
Reminder : Please take note that block-level elements cannot be included in inline elements.

Block and Inline CSS We can apply CSS properties to both block and inline element here is how you can do that when it comes to HTML blocks:

Example: 

<!DOCTYPE html> <html><body><br><br><br><style><br>blockquote{<br>color: red;<br>}<br>i{<br>color: green;<br>}<br></style><br><br><br><div>Mr example<br><blockquote> Every thing you need to learn about html is here</blockquote><br></div><br><p>Here is example of <i>inline element</i> using CSS</p><br><br> </body></html>

The <div> Element <Div> elements are commonly used as containers for other HTML elements.Divs cannot have required attributes, but style, class, and id are required.Content blocks can be styled using the div element when combined with CSS:

Example: 

<!DOCTYPE html> <html><body><br><br><br><br><div style="background-color:tomato;color:black;padding:26px;"><br><h2>New York</h2><br><p>New York is the capital city of America. It is the most populous city in the America.</p><br></div><br><br><br> </body></html>

The <span> ElementInline containers, or <spans>, are utilised to mark chunks of text or documents as it comes to HTML blocks.There are no mandated attributes for the <span> tag, but style, class, and id are all standard attributes.Operating the <span> tag and CSS, you can style specific parts of the text:

Example: 

<!DOCTYPE html> <html><body><br><br><br><br><p>My father has <span style="color:blue;font-weight:bold">green</span> eyes<br>and my mother has <span style="color:darkolivegreen;font-weight:bold"><br>blue</span> eyes.</p><br><br><br> </body></html>

Inline and Block elements differ in the following ways:

Inline Elements Block Elements
Only the necessary width is occupied by inline elements.Regardless of their necessity, block elements occupy the full width.
Elements inline do not begin on a new line in HTML blocks.Lines always start at the beginning of a block element as it comes to HTML blocks.
It is possible to sit behind inline elements when using inline elements in HTML blocks.The block element prevents other elements from resting behind it.
There are no top and bottom margins for inline elements.There is a margin at the top and bottom of block elements.

HTML Tags Tag Description <div> Sections in a document (block levels) and <span> Describes how a document’s sections are structured (inline) in HTML blocks.

Here is a complete list of all HTML tags available.

Chapter Summary

  • Block and inline are the two display values.

  • Block-level elements take up the full width when they begin on a new line.

  • An inline element takes up as much space as necessary and doesn’t start on a new line.

  • Divs are block-level elements that are often used to contain other HTML elements.

  • Inline containers like <spans> can be used to mark up parts of text or documents.

If this article somehow fulfilled your educational needs, do leave your reaction below as a form of appreciation or a source of suggestion for the betterment of this site.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *