The <p> element defines a paragraph. Browsers automatically add margin before and after each paragraph. A paragraph is composed of two or more sentences.

<!--Paragraph Example-->
<p>
    This is a sentence. A paragraph is composed of two or more sentences.
    So now, I am a pragraph! Wow!
</p>

HTML defines six heading levels. <h1> carries the most weight and is used for main titles; <h6> is the smallest. Proper heading hierarchy improves both accessibility and SEO.

<!--Headings Example-->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

All three tags render text in italic but have different semantic meanings: <i> is used for stylistic italics, <dfn> marks a term being defined, and <cite> references a creative work (book, film, etc.).

<i>This is a sentence.</i>   <!-- stylistic italic -->
<dfn>This is a sentence.</dfn> <!-- definition term -->
<cite>This is a sentence.</cite><!-- citation/work title -->
<i>A phrase.</i>
<dfn>A phrase.</dfn>
<cite>A phrase.</cite>

The <mark> element highlights text, similar to using a highlighter on paper. It is used to mark text of special interest or relevance in a given context.

<mark>This text is highlighted.</mark>

<sup> renders text as superscript (raised above baseline), commonly used for exponents or ordinals like X². <sub> renders text as subscript (below baseline), used in chemical formulas like H₂O.

<sup>This is a superscript text.</sup>
<sub>This is a subscript text.</sub>

All three render in a monospace font but serve different purposes: <code> represents a fragment of computer code, <kbd> represents keyboard input, and <samp> represents sample output from a program.

<code>This is a sentence.</code>
<kbd>This is a sentence.</kbd>
<samp>This is a sentence.</samp>
<code>A phrase.</code>
<kbd>A phrase.</kbd>
<samp>A phrase.</samp>

<u> renders text with an underline for stylistic purposes (e.g., proper names in Chinese). <ins> marks text that has been inserted into the document — it also underlines but carries semantic meaning for document revision tracking.

<u>This text is underlined.</u>
<br>
<ins>This line is inserted.</ins>

The HTML entity   inserts a non-breaking space character. Unlike a normal space, it will not collapse or wrap. It can be chained together to add indentation inside a paragraph.

<p>&nbsp;&nbsp;&nbsp;This sentence is indented.</p>

The <div> element is a generic block-level container. When combined with a CSS class attribute, it can be targeted with style rules. Below, the .myDiv class applies a red background and black outset border.

.myDiv {
  border: 5px outset black;
  background-color: red;
  text-align: center;
}

<div class="myDiv">
  <h2>Heading in div</h2>
  <p>Some text in a div.</p>
</div>

The <blockquote> element defines a section quoted from another source. Browsers typically indent blockquotes. The cite attribute specifies the URL of the source.

<blockquote cite="http://www.worldwildlife.org/...">
  For 50 years, WWF has been protecting the future of nature...
</blockquote>

The <pre> element displays text exactly as written in the HTML — preserving spaces, line breaks, and indentation. A <p> collapses all whitespace into a single space.

You ask about the cows, wearin' my sweater
It's somethin' 'bout the weather that makes them lie down
The only time I feel I might get better
is when we are together, oh, together

You ask about the cows, wearin' my sweater
It's somethin' 'bout the weather that makes them lie down
The only time I feel I might get better
is when we are together, oh, together

The CSS id selector targets a single unique element using the # prefix. An id must be unique on the page. Below, #para1 styles the paragraph with blue centered text.

#para1 {
  text-align: center;
  color: blue;
}

<p>An example for id Selector</p>
<p id="para1">
  This paragraph is an example
  for id Selector.
</p>

The CSS class selector targets any element with a matching class attribute using the . prefix. Unlike id, the same class can be applied to multiple elements. Here, .right right-aligns and colors the text red.

.right {
  text-align: right;
  color: red;
}

<p class="right">
  Styled using a class selector.
</p>
<h2 class="right">
  Also using the same class.
</h2>

The CSS grouping selector applies the same rules to multiple selectors at once, separated by commas. This reduces code repetition. Here, both h3 and h4 are centered and colored green.

h3, h4 {
  text-align: center;
  color: green;
}

<h3>
  Styled using a group selector.
</h3>
<h4>
  Also using the same group.
</h4>