Skip to Main Content or Page Contents

the most popular inline & block HTML5 elements / tags

Reference for the most popular HTML5 elements / tags. All the HTML5 elements / tags used in our tutorials

Results per page:

Match: any search words all search words

HTML 5 Tag | Element Reference

 

Page Menu


 

List of HTML5 Block Level Elements

List of HTML5 Inline Level Elements

Block-level & Inline-level elements - Difference

 

HTML Block-level & Inline-level elements - Difference

Block-level & inline-elements are displayed differently by your web browser. Basically  Block-element elements are displayed vertically, i.e. the first Block-element element is displayed above the second one.

Inline-elements are displayed one after the other on the same line, if the line is wide enough else they  will word wrap

List of Block-level elements in HTML5

<address>, <article>,<aside>,<blockquote>, <div>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>

  • Block-level elements may appear only within a <body> element.
  • Block-level elements by default always start on a new line, having a built in line break before and after the element. and takes up the full width of there Containers (stretches out to the left and right as far as it can)
  • Block-level elements can include inline-elements within them
  • Someelements such as <div> can have other Block-level elements nested within them
    • The Block-level <p> element can NOT have other Block-level elements nested within it.

List of Inline-level elements in HTML5

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>

Example of How Block-level elements are Displayed

 

HTML

<p>Block-element 1.</p>

<p>Block-element 2.</p>

<p>Block-element 3.</p>

Result

Block-element 1.

Block-element 2.

Block-element 3.

Example Explanation

The 3 <p> block-level elements are displayed stacked vertically

 

These display defaults can be changed by CSS using the display property, to any of the following inline, inline-block, block
or to hardly used properties of none, list-item, run-in, compact, marker, table, inline-table, table-row, table-row-group, table-header-group, table-footer-group, table-column-group, table-column, table-cell, table-caption, inherit.

E.g.
h2 { display: inline-block}
This allows the h2 element to be placed next to other inline-elements but still retain some of the block properties such as top & bottom margins
All

h3 elements

h4 elements

h5 elements

in this HTML CSS tutorial have been changed to inline-blocks by CSS ans there fore appear on 1 line in your window is wide enough

inline-elements


Can have other inline-elements nested within them but can not contain Block-elements

Inline-level Elements

Note Inline-level Elements are usually, but not always are nested within a Block-level element such as a <p> or <div> element

Example of How Inline-level elements are Displayed


HTML

<p><strong>Inline-element 1.</strong> <img src="graphics/banner/Logo-My-Company.gif" width="125" height="125"> <span style="color: red; background-color: white; ">Inline-element 3.</span></p>

Result

Inline-element 1. Inline-element 3.

Example Explanation


The following inline-level elements <strong> <img> & <span> are nested within the block-level <p> element
  • Inline-level elements may appear only within a <body> element.
  • By default, inline-elements do not begin on new lines.
    • Can include:
      • Other inline-elements located on there left or right. Long lines will word wrap, i.e. will use additional lines.
      • Left & right margins
    • Can NOT include:
      • Top & bottom margins
      • Include block elements
      • Set width and height

 


© tutorials4u.com
HTML Tutorial by John McGuinn.