In HTML, elements are broadly divided into two categories: block-level and inline. Block elements always start on a new line and take up the full width available, while inline elements only take as much space as needed and flow with surrounding content.
[Block Elements] [Inline Elements] [Comparison]
Explanation: The <div> is a block container for grouping content.
This is a paragraph of text.
Explanation: <p> defines a block of text that always starts on a new line.
Explanation: Headings (<h1>–<h6>) are block-level elements that take the full width.
Explanation: <ul> creates unordered lists as block elements.
Explanation: <ol> creates ordered lists as block elements.
"Coding is the new literacy."
Explanation: <blockquote> represents a block quotation.
Explanation: <hr> draws a horizontal line, which is a block-level element.
| Row 1 Col 1 | Row 1 Col 2 |
| Row 2 Col 1 | Row 2 Col 2 |
Explanation: <table> is a block-level element that organizes data.
This is inside a section.
Explanation: <section> is a semantic block-level element for grouping content.
This is a span element inside a sentence.
Explanation: <span> is inline and used for styling or grouping inline content.
Visit Google now.
Explanation: <a> creates a hyperlink, an inline element.
This word is bold.
Explanation: <b> makes text bold and is inline.
This word is italic.
Explanation: <i> makes text italic and is inline.
This word is underlined.
Explanation: <u> adds underline and is inline.
This word is important.
Explanation: <strong> adds strong importance and is inline.
This word is emphasized.
Explanation: <em> emphasizes text and is inline.
E = mc2
Explanation: <sup> is superscript inline text.
H2O is water.
Explanation: <sub> is subscript inline text.
This is a highlighted word.
Explanation: <mark> highlights inline text.
HTML stands for HTML.
Explanation: <abbr> defines abbreviations inline.
Example: console.log("Hello World")
Explanation: <code> represents programming code inline.
| Block Elements | Inline Elements |
|---|---|
| <div> | <span> |
| <p> | <a> |
| <h1> | <b> |
| <ul> | <i> |
| <blockquote> | <abbr> |
| <table> | <code> |
| <hr> | <sup> |
| <section> | <mark> |