In HTML, elements are broadly divided into two categories: block-level and inline. Block-level elements take up the full width of their container and always start on a new line, while inline elements only occupy as much space as needed and flow within the same line.
The <div>
is a generic block-level container.
This is a paragraph of text.
The <p>
element defines a paragraph and always starts on a new line.
Headings <h1>–<h6>
are block-level and define hierarchical titles.
The <ul>
defines an unordered list.
The <ol>
defines an ordered list.
"Coding is the new literacy."
The <blockquote>
is used for quotations.
The <hr>
element creates a thematic break (horizontal rule).
Row 1, Col 1 | Row 1, Col 2 |
Row 2, Col 1 | Row 2, Col 2 |
The <table>
displays tabular data.
This is inside a section block.
The <section>
represents a thematic grouping of content.
This is a span inside text.
The <span>
is an inline container.
Visit Example Website for more info.
The <a>
defines a hyperlink.
This is bold text and this is italic text.
<b>
makes text bold, <i>
makes it italic (both inline).
This is important and this is emphasized.
<strong>
and <em>
add semantic meaning to bold/italic text.
Water formula is H2O, and Einstein’s equation is E=mc2.
<sub>
makes text subscript, <sup>
makes it superscript.
This is underlined text.
The <u>
element underlines text.
This is highlighted text.
The <mark>
highlights text inline.
HTML stands for HTML.
The <abbr>
element defines abbreviations.
Example code: console.log("Hello World")
The <code>
element displays code inline.
Block Elements | Inline Elements |
---|---|
<div> | <span> |
<p> | <a> |
<h1> | <b> |
<ul> | <i> |
<blockquote> | <abbr> |
<table> | <code> |
<hr> | <sup> |
<section> | <mark> |