HTML Text and Inline Elements

Common inline HTML tags with examples and code snippets

Headings <h1> to <h6>

Heading tags define a hierarchy of titles and subtitles. <h1> is the most important.

h1: Largest heading

h2: Section heading

h3: Sub-section

h4: Deeper sub-section

h5: Even deeper
h6: Smallest heading
<h1>h1: Largest heading</h1>
<h2>h2: Section heading</h2>
<h3>h3: Sub-section</h3>
<h4>h4: Deeper sub-section</h4>
<h5>h5: Even deeper</h5>
<h6>h6: Smallest heading</h6>

Paragraph <p>, Line Break <br>, Horizontal Rule <hr>

The paragraph tag <p> defines a block of text.

Line break example:
Second line appears after <br>.


<p>This is a paragraph</p>
Line break:<br>
Horizontal rule:<hr>

Text Emphasis & Styling

Strong: strong, Emphasis: em, Bold: bold, Italic: italic, Underline: underline

Smaller text: small, Superscript: E=mc2, Subscript: H2O

<strong>strong</strong>
<em>em</em>
<b>bold</b>
<i>italic</i>
<u>underline</u>
<small>small</small>
<sup>2</sup>
<sub>2</sub>

Semantic Tags

Abbreviation: W3C

Definition: HTML is a markup language.

Citation: The Starry Night

<abbr title="World Wide Web Consortium">W3C</abbr>
<dfn>HTML</dfn>
<cite>The Starry Night</cite>

Code, Preformatted, Keyboard, Sample, Variable, WBR, Mark

Inline code: console.log("Hello")

function greet() { console.log("Hello world"); }

Keyboard input: Ctrl + C

Sample output: File not found

Variable: x

Optional line-break: pneumonoultramicroscopicsilicovolcanoconiosis

Highlight: Important text

<code>console.log("Hello")</code>
<pre>...</pre>
<kbd>Ctrl</kbd>
<samp>File not found</samp>
<var>x</var>
<wbr>
<mark>Important text</mark>

Blockquote & Citation

"This is a long quotation example."

— Author Name, Book Title
<blockquote>
  <p>...</p>
  <footer><cite>Book</cite></footer>
</blockquote>