Learn HTML

"Are you looking to learn HTML from scratch? Look no further! Our HTML course is designed for both beginners and advanced learners who want to master the fundamental concepts of HTML. Our comprehensive course covers everything from the basic concepts of HTML, including tags, attributes, and elements, to the more advanced concepts such as multimedia, responsive design, and accessibility."

HTML Chapters Menu

HTML Block and Inline Elements

 In HTML, elements are classified as either block-level or inline-level based on their default behavior and display style. Understanding the difference between these two types of elements is important for creating the layout and structure of your web pages. 

 

Block Elements

Block elements are displayed as a block-level element and take up the entire width of their parent container. They typically start on a new line and create vertical space around themselves with margins, padding, and borders. Examples of block elements include:

Here's a complete list of all the block-level elements in HTML:

  • <address>: Defines the contact information for the author/owner of a document or an article.
  • <article>: Defines an independent, self-contained content of a document, such as a blog post or news article.
  • <aside>: Defines content aside from the content it is placed in, typically used for sidebars or call-out boxes.
  • <blockquote>: Defines a section of quoted content.
  • <canvas>: Used for drawing graphics with JavaScript.
  • <dd>: Defines a description for a term in a description list.
  • <div>: Defines a generic container for other elements.
  • <dl>: Defines a description list.
  • <dt>: Defines a term in a description list.
  • <fieldset>: Defines a set of form fields.
  • <figcaption>: Defines a caption or legend for a figure element.
  • <figure>: Defines self-contained content, such as an image with a caption or a diagram.
  • <footer>: Defines the footer section of a document or section.
  • <form>: Defines a form for user input.
  • <h1> to <h6>: Defines heading levels 1 through 6.
  • <header>: Defines the header section of a document or section.
  • <hr>: Defines a thematic break between paragraphs or sections.
  • <li>: Defines a list item in an ordered or unordered list.
  • <main>: Defines the main content of a document or section.
  • <nav>: Defines a section of navigation links.
  • <ol>: Defines an ordered list.
  • <p>: Defines a paragraph of text.
  • <pre>: Defines preformatted text, preserving spaces and line breaks.
  • <section>: Defines a section of a document, such as a chapter, sub-section, or a grouping of related content.
  • <table>: Defines a table of data.
  • <tfoot>: Defines the footer section of a table.
  • <ul>: Defines an unordered list.
  • <video>: Defines a video or movie.

Note that some of these elements are HTML5-specific and may not be supported by older browsers.

Here's an example of a block element:


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Block Element Example</title>
</head>
<body>
    <div>
        <h1>Welcome to my website</h1>
        <p>This is a block element</p>
    </div>
</body>
</html>


In this example, the <div> element is a block element that contains a heading and a paragraph element.

 

Inline Elements

Inline elements are displayed inline with the text around them and do not create any vertical space. They only take up as much width as necessary to display their content. Examples of inline elements include:

Here is a complete list of inline elements in HTML:

  • <a>: Anchor element that is used to create hyperlinks to other web pages or files.
  • <abbr>: Abbreviation element that is used to define an abbreviation or acronym.
  • <acronym>: Acronym element that is used to define an acronym (deprecated in HTML5).
  • <b>: Bold element that is used to apply bold formatting to text.
  • <br>: Line break element that is used to create a line break within a paragraph or heading.
  • <cite>: Citation element that is used to indicate the source of a quotation or reference.
  • <code>: Code element that is used to display computer code.
  • <em>: Emphasis element that is used to apply emphasis to text.
  • <i>: Italic element that is used to apply italic formatting to text.
  • <img>: Image element that is used to display images.
  • <input>: Input element that is used to collect input from users.
  • <label>: Label element that is used to associate a label with a form control.
  • <q>: Inline quotation element that is used to enclose a short quotation.
  • <s>: Strikethrough element that is used to apply strikethrough formatting to text.
  • <small>: Small text element that is used to display text in a smaller font size.
  • <span>: Generic inline container element that is used to group other inline elements together and apply styles to them.
  • <strong>: Strong text element that is used to indicate important text.
  • <sub>: Subscript element that is used to display text as a subscript.
  • <sup>: Superscript element that is used to display text as a superscript.
  • <textarea>: Textarea element that is used to collect multi-line input from users.
  • <time>: Time element that is used to display dates and times.

Note that some elements, such as <img> and <input>, can be both inline and block-level depending on how they are used.

Here's an example of an inline element:


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Inline Element Example</title>
</head>
<body>
    <p>This is an <em>inline</em> element.</p>
</body>
</html>


In this example, the <em> element is an inline element that emphasizes the word "inline" within a paragraph.