HTML Block and Inline Elements

Last Updated : 17 May, 2025

HTML elements are either block-level, which structure the layout and span full width (like <div> or <p>), or inline, which styles content within blocks without breaking the flow (like <span> or <a>). This distinction covers 80–90% of common HTML usage.

inline — Inline and Block Level Element

Example: Here, we illustrate the use of the block-level element(Div) and the inline element(<a>).

index.html

<!DOCTYPE html>
<html>
  <body>
    <div>GeeksforGeeks</div>
    Checkout the GeeksforGeeks
    <a href="www.youtube.com" alt="GeeksforGeeks youtube"> official </a>
    youtube for the videoes on various courses.
  </body>
</html>

Code Overview:

In the above example, we have used the <div> tag that always starts in a new line & captures the full width available. and We have used the inline element anchor tag <a> that is used to provide a link to a text that doesn't start in a new line & captures only the space around the element.

HTML Block Elements

A block-level element always starts on a new line and stretches out to the left and right as far as it can i.e, it occupies the whole horizontal space of its parent element & the height is equal to the content's height.

div element:

The <div> element is used as a container for other HTML elements. It has no required attributes. Style, class, and id are the commonly used attributes.

Syntax:

<div>GFG</div>

Example: The below code illustrates the implementation of <div> tag.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Block-level Element</title>
</head>
<body>
    <div>
        <h1>GeeksforGeeks</h1>
        <h3>GeeksforGeeks is a science portal for geeks.</h3>
        <h3>
            You can give reviews as well as
            contribute posts on this portal.
        </h3>
    </div>
</body>
</html>

Output:

Block Element

Inline Elements

An inline element is the opposite of the block-level element. It does not start on a new line and takes up only the necessary width ie., it only occupies the space bounded by the tags defining the HTML element, instead of breaking the flow of the content.

span element:

The <span> tag is used as a container for text. It has no required attributes. Style, class, and id are the commonly used attributes.

Syntax:

<span>GFG</span>

Example: The below code illustrates the implementation of <span> tag.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML span element</title>
    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
        span {
            color: white;
        }
    </style>
</head>
<body>
    <h1>Geeks
        <span> for</span>
        Geeks
    </h1>
</body>
</html>

Output:

Inline Element

HTML Iframes

apeksharustagi1998

Improve

Article Tags :

Similar Reads

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript

HTML Introduction

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It defines the structure of a webpage by using a series of elements, tags, and attributes to organize text, images, links, and other multimedia elements.HTML is a markup language,

An HTML Editor is a software application designed to help users create and modify HTML code. It often includes features like syntax highlighting, tag completion, and error detection, which facilitate the coding process. There are two main types of HTML editors: Text-Based Editors - Allow direct codi

HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It defines the layout of a webpage using elements and tags, allowing for the display of text, images, links, and multimedia content. As the foundation of nearly all websites, HTML is used in over

HTML comments are used to add notes or explanations in the HTML code that are not displayed by the browser.They are useful for documenting the code, making it easier to understand and maintain.To add a comment, use the syntax . HTML<!-- This is a comment and will n

An HTML Element consists of a start tag, content, and an end tag, which together define the element's structure and functionality. Elements are the basic building blocks of a webpage and can represent different types of content, such as text, links, images, or headings.For example, the <p> ele

HTML Attributes

HTML Attributes are special words used within the opening tag of an HTML element. They provide additional information about HTML elements. HTML attributes are used to configure and adjust the element's behavior, appearance, or functionality in a variety of ways. Each attribute has a name and a value

HTML headings are used to define the titles and subtitles of sections on a webpage. They help organize the content and create a structure that is easy to navigate.Proper use of headings enhances readability by organizing content into clear sections.Search engines utilize headings to understand page

HTML Paragraphs

A paragraph in HTML is simply a block of text enclosed within the <p> tag. The <p> tag helps divide content into manageable, readable sections. Itâ€™s the go-to element for wrapping text in a web page that is meant to be displayed as a distinct paragraph.Syntax:<p> Content</p>H

HTML Text Formatting

HTML text formatting refers to the use of specific HTML tags to modify the appearance and structure of text on a webpage. It allows you to style text in different ways, such as making it bold, italic, underlined, highlighted, or struck-through. Table of ContentCategories of HTML Text FormattingLogic