HTML Block and Inline Elements

Last Updated : 25 Jul, 2024

HTML Block elements, are used to structure the main content of a webpage. They typically start on a new line and take up the full width of their container examples <div>, <p>, <h1> to <h6>, and <ul>, etc.

On the other hand, Inline elements are used within block-level elements to style or format specific parts of the content. They don’t start on a new line and only take up as much width as necessary for example include <span>, <a>, <strong>, and <em>.

Example: This example illustrates the use of the block-level element & inline element.

HTML

<!DOCTYPE html>
<html>
    <body>
        <div>
   GeeksforGeeks
        </div>
  Checkout the GeeksforGeeks
        <a alt="GeeksforGeeks" href="https://www.geeksforgeeks.org/">
   official
        </a>
  website for the articles on various courses.
    </body>
</html>

Output:

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

Block Level 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.

Supported tags:

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.

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.

Supported tags:

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.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML span element</title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        span {
            color: red;
        }
    </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 for creating and structuring web pages. It defines the structure of a webpage using elements and tags.HTML is responsible for displaying text, images, and other content.It serves as the foundation for building websites and web applicat

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 . [GFGTABS] HTML <!-- This is a commen

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> el

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

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 Content Categories of HTML Text FormattingLogi