HTML Block And Inline Level Elements Difference - Tech Altum Tutorial

Trang chủ » Html Block Element List » HTML Block And Inline Level Elements Difference - Tech Altum Tutorial

Có thể bạn quan tâm

  • HTML Tutorial
  • HTML Tags
  • HTML Attributes
  • HTML Text
  • HTML Headings
  • Block & Inline Elements
  • HTML Lists
  • Hyperlink
  • HTML Images
  • HTML Iframes
  • HTML Entities
  • HTML Meta Tag
  • HTML Tables
  • HTML Form
  • HTML5
  • HTML5 New Tags
  • HTML5 Attributes
  • HTML5 Vs HTML4
  • HTML5 Audio and Video
  • HTML5 Form.
  • HTML5 SVG.
  • HTML5 Canvas.
  • HTML5 Geolocation.
  • Local & Session Storage
  • HTML Marquee
  • Doctypes in HTML
  • XHTML
  • DHTML
  • ← HTML Headings
  • HTML List →
HTML Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 69 reviews
  1. Home
  2. Frontend
  3. Html
  4. Block and Inline Elements
  1. Block Vs Inline
  2. Block Elements
  3. Inline Elements

HTML elements are classified into block-level and inline-level elements based on their default display behavior. Block-level elements create a block formatting context, while inline elements flow within the text.

To determine if an HTML element is block or inline, inspect it in your browser's developer tools and check the 'display' property in the user agent stylesheet. If it's 'display: block', it's a block-level element; otherwise, it's inline.

Block Vs Inline level Elements

<p>, <div>, <h1>, <h2>, <address>, etc., are block-level elements, whereas <b>, <strong>, <i>, <span>, <u>, and <s> are inline-level elements.

HTML Block and Inline Elements Diagram
HTML Block and inline Elements

A block-level element can contain both inline and block elements as children or descendants, but inline-level elements can have only inline elements as children or descendants. (Except for the anchor tag or hyperlink, which allows inline content).

HTML Block Elements

HTML block-level elements are elements that behave like blocks, such as <p>, <h1>, <div>, <ul>, <ol>, <pre>, and <address>. These elements always start on a new line and occupy the full width of their parent container. Block elements can contain both inline elements and block elements. Here are some common block elements.

HTML Block Level Elements List

Element Name Code Use
Html Tag <html> </html> Root tag to build html page.
Body Tag <body> </body> To group visible content of a webpage.
Para Tag <p> </p> Create new paragraph
Pre Tag <pre> </pre> Create pre formatted text.
hr <hr> Thematic Break or formally known as Horizontal rule, used to break with 2px gradient shadow.
Blockquote <blockquote> </blockquote> Create a blockquote from new line.
Div Tag <div> </div> Create a new division
ul Tag <ul> </ul> Create an unordered list. Unordered List
ol Tag <ol> </ol> Create an ordered list. Ordered List
Address <address> </address> Define a postal address
Headings <h1> </h1>, <h2> </h2> till <h6> </h6> Create Headings and sub-headings.HTML Headings
Form Tag <form> </form> Used to group form controls and submit form data. HTML Form
Fieldset <fieldset> </fieldset> This is a fieldset, used to group form elements.

←Swipe to See more →

HTML block-level elements always start on a new line and occupy the full width of their parent container. They support width, height, and text-align properties since they occupy the full width.

HTML Inline Elements

HTML inline elements always start in the same line. Their width is equal to their content. Most inline elements are presentational, e.g., <b>, <i>, <s>, <u>. Some functional inline elements are <strong>, <em>, <del>, <time>, etc.

HTML Inline Level Elements List

Element Name Code Use Example
span <span> </span> Used to group inline elements. span tag
hyperlink <a href=""></a> Used to create hyperlinks. hyperlink
b Tag <b> </b> Used to give bold appearance. bold text
i Tag <i> </i> Presentational element used to italicize text. italic text
Strong Tag <strong> </strong> Gives bold appearance and highlights content for search engines. strong tag.
em tag <em> </em> Emphasizes text and highlights content for search engines. emphasis
small tag <small></small> Displays small print text. small text
u tag <u> </u> Underlines text. underlined
s tag <s> </s> Shows struck-through text. struck text
del tag <del> </del> Shows deleted text. delete
sup tag <sup> </sup> Shows superscript text. 2 * 103.
sub tag <sub> </sub> Shows subscript text. H2O.
abbr tag <abbr title="Prime Minister">PM</abbr> Shows the full version of an abbreviation using the title attribute. He is the PM.
kbd tag <kbd> </kbd> Shows a keyboard command. press Ctrl + p.
code tag <code> </code> To display computer code. var x = "ab";
q tag <q> </q> To display quotes. quoted text.
cite tag I resides in <cite>India </cite> To cite the title of a work. I resides in India.
samp tag <samp> </samp> To display a sample output. This is a sample password.
ins tag <ins> </ins> To indicate an addition to the document. This is inserted text for above column
var tag <var> </var> To display variables in code. x +y = z
output tag <output> </output> To display the output of a program. + = 2

←Swipe to See more →

HTML inline-level elements are generally used inside block-level elements. They don't support width, height, and text-align properties since they are used inline. Only the <img> tag supports width and height among inline elements.

Div tag

The HTML <div> tag is used to create divisions or sections. It is a block-level element, so it starts on a new line and occupies the full width of its parent. A <div> can contain all types of block-level and inline elements.

<div> // content inside div </div>

Span tag

The HTML <span> tag is used to create divisions within a line. It is an inline-level element, so it starts in the same line and occupies only the width of its content. A <span> is used to group inline-level elements.

<span> // content inside span </span>

Changing Display with CSS

You can change the default display behavior of HTML elements using CSS. For example, to make a block-level element behave like an inline element, use display: inline;. Conversely, to make an inline element behave like a block, use display: block;. This is useful for layout and styling purposes.

div { display: inline; } span { display: block; }
  • ← HTML Headings
  • HTML List →

Từ khóa » Html Block Element List