What is HTML Inline and Block Elements

• Introduction
• What is inline and block elements
• Uses of elements
• Block vs Inline
• Conclusion

Introduction

  Hello guys, In this article we’ll see the what is html inline block elements and two different types of HTML elements present. And will lay more emphasis on block level elements. Every HTML element has a default display value and the elements in HTML can be categorized into two different categories inline elements and block level elements.

What is inline and block elements

Inline:

Inline which takes as much space as they need and we can add contents without any line break. The bold, italic and underline elements are some of the elements that fall under the category of inline elements. It does not start on a new line.

Block:

  Block level element takes full line or full white of a web page. There is no need to specify the line break they automatically take full line or width of the web page and create a line break. It always starts on a new line. Block elements always takes up the full width available and stretches out to the left and right as far as it can. The paragraph element header element and the list element fall under the category of block level elements. Anything that follows these types of elements appears on its own new line. The most important block level element is the <div> element it is used to create the actual layout of the web page by grouping similar types of elements together. You can also provide similar CSS properties to a group of elements present within the <div> tag.

Uses of elements

Block element uses:

<address> – to contact information for person.
<article> – to represents a self-contained composition.
<aside> – represents a portion of a document.
<blockquote> – to indicates enclosed text.
<canvas> – to to draw graphics.
<dd> -provides the description, definition.
<div> – to defines a division.
<dl> – to represents a description list.
<dt> – specifies a term in a description.
<fieldset> – to group several controls.
<figcaption> – represents a caption.
<figure> – to specifies self-contained content.
<footer> – to represents a footer.
<form> –  create an HTML form.
<h1>-<h6> – to define HTML headings.
<header> – to represents introductory content.
<hr> – Thematic Break Horizontal Rule
<li> – to represent an item in a list.
<main> – to specifies main content of a document.
<nav> – provide navigation links.
<noscript> – to defines a section of HTML to be insert.
<ol> – to defines an ordered list
<p> – define paragraph.
<pre> – to represents preformatted text
<section> – to defines the section.
<table> – used to create a table
<tfoot> – to defines a set of rows summarizing the columns.
<ul> – to represents an unordered list
<video> –  embed video content

Inline element Uses

<a> – define a hyperlink.
<abbr> – to defines an abbreviation
<acronym> – to define the acronym.
<b> –  bring attention to element.
<bdo> – to change current text direction.
<big> – to increase text size.
<br> – produces a line break.
<button> – for create button.
<cite> – to reference.
<code> – to define a code.
<dfn> –  indicate the term.
<em> – to emphasis compared to surrounding text
<i> – to defines a part of text.
<img> –  add a image.
<input> – to declare input controls.
<kbd> – to represents a span of inline text.
<label> –  create a label.
<map> – to define an image map.
<object> – to define container.
<output> – represent result.
<q> – to indicates that the enclosed text.
<samp> – to enclose inline text.
<script> –  embed a client-side script
<select> – to create a drop-down list
<small> – to make the text one size smaller
<span> –  group elements for styling purposes
<strong> – to greater importance.
<sub> – to specify Subscript element.
<sup> – specify Superscript element.
<textarea> – to defines a multi-line text.
<time> – to defines a time.
<tt> –  creates inline text.
<var> – to represents the name of a variable.

HTML Inline vs Block Elements

Conclusion

  I hope these inline and block elements are very useful for you. And we learn many things like this on these website.