HTML markup examples

This is heading 2

<strong>This sentence in bold used STRONG Tag</strong>.

When do you need to use STRONG TAG for a phrase, a sentence or a paragraph?. You use STRONG TAG when you want to highlight, make emphasize.

This is also bold and we created a CSS Class called ‘.bold’ and declared a “font-weight: bold;” element to it, we then called the class in the markup using <span class=”bold”>bold</span>.

The difference between STRONG and declaring “font-weight: bold;” in a Class, is that the former is semantic that is relevent to your actual content, whereas the latter is purely presentational that gives no intrinsic meaning to your content.

This is heading 3

In this paragraph <em>we emphasize this sentence</em> using em tag, this tells our readers and Search Engine that the word/pharse that is emphasized is of something important. Browsers default the em tag to italics but in this example we overwrote the default setting and declared an orange color instead.

Similar to the “font-weight: bold”, there is a ‘font-style: italic’ we can use in CSS to style italic and it is purely presentational.

• Example of UL (Unordered List)
• In this UL we use ‘disc’ class and it shows a bullet point.
• Which is controlled by “list-style-type: disc;” in CSS

This is heading 4

1. Example of OL (Ordered List)
2. We Use ‘decimal’ class for OL example
3. Which is controlled by “list-style-type: decimal;” in CSS

This is heading 5

Below example is a Definitions List in which a DL tag starts and stops the list, the DT tag is the term and the DD tag is the definition. The DL markup looks like so:


<dl>
<dt>....</dt>
<dd>...</dd>
</dl>
<dl>


You can have more than one DT wrapped inside the DL with the condition that no two DT can go together, it has to come in pair with DD like so:

Example:


<dt>....</dt>
<dd>...</dd>
<dt>...</dt>
<dd>...</dd>


However with each DT you can have many DD:

Example:


<dt>....</dt>
<dd>...</dd>
<dd>...</dd>
<dd>...</dd>


You can also use other tags and selectors inside the DD

Example:


<dt>....</dt>
<dd>
<ol>
<li>....</li>
<li>....</li>
</ol>
<ul>
<li>....</li>
<li>....</li>
</ul>
<p>paragraph....<strong>,,,,,</strong></p>
</dd>


This page shows the example of Definitions List we did for the Customer Service content.

This is Blockquote

“And have you never known the pleasure and triumph of a lucky guess?–I
pity you.–I thought you cleverer–for, depend upon it a lucky guess is
never merely luck. There is always some talent in it. And as to my
poor word ‘success,’ which you quarrel with, I do not know that I am so
entirely without any claim to it. You have drawn two pretty pictures;
but I think there may be a third–a something between the do-nothing and
the do-all. If I had not promoted Mr. Weston’s visits here, and given
many little encouragements, and smoothed many little matters, it might
not have come to any thing after all. I think you must know Hartfield
enough to comprehend that.”

This is a tabular Data