HTML Examples

By | February 9, 2020

In this chapter, we will see some examples of HTML which we may have had before.

HTML Basic Examples:-

HTML Document:- Paragraph Heading Hyperlink These together make a document of HTML all of these together are called HTML Document.


<h1>This is My h1 Heading.</h1>

<p>This is My paragraph</p>

Output:-

html example

HTML Paragraphs:-

<p>This is First paragraph.</p>

<p>This is Second paragraph.</p>

Output:-

html example

HTML Headings:-


<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

Output:-

html example

HTML Links:-

<h2>HTML Links Example</h2>

<a href="https://learnhtmlcoding.com">This is Link</a>

HTML Buttons:-

<h2>HTML Buttons Example</h2>

<button>Click Button</button>

Output:-

html button example

HTML lists:-

<h2>HTML Unordered List</h2>

<ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
</ul>

<h2>HTML Ordered List</h2>

<ol>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
</ol>

Output:-

html example

HTML Styles Example:-

HTML background-color:-


<body style="background-color: blue;">
  
  <h1>This is Heading 1</h1>

  <p>Lorem ipsum dolor sit amet.</p>

</body>

Output:-

html example

HTML text color:-

<h1 style="color: red;">This is Heading 1</h1>

  <p style="color: blue;">Lorem ipsum dolor sit amet.</p>

Output:-

html example

HTML text size:-

  <h1 style="font-size: 40px;">This is Heading 1</h1>

  <p style="font-size: 20px;">Lorem ipsum dolor sit amet.</p>

Output:-

html example

HTML text font:-

<h1 style="font-family: verdana;">This is Heading 1</h1>

  <p style="font-family: courier;">Lorem ipsum dolor sit amet.</p>

Output:-

html example

HTML text alignment:-

<h1 style="text-align: center;">This is Heading 1</h1>

  <p style="text-align: center;">Lorem ipsum dolor sit amet.</p>

Output:-

html example

HTML Text Formatting:-


  <h2>HTML b Tag:</h2>
  <p>Lorem ipsum dolor <b>sit amet</b> consectetur.</p>

<h2>HTML i Tag:</h2>
<p>Lorem <i>ipsum dolor sit amet</i> consectetur.</p>

<h2>HTML em Tag:</h2>
<p>Lorem <em>ipsum dolor sit amet,</em> consectetur.</p>

<h2>HTML strong Tag:</h2>
<p>Lorem <strong>ipsum dolor sit amet,</strong> consectetur.</p>

<h2>HTML small Tag:</h2>
<p>Lorem <small>ipsum dolor sit amet,</small>consectetur.</p>

<h2>HTML del Tag:</h2>
<p>Lorem<del>ipsum dolor sit amet,</del> consectetur.</p>

<h2>HTML mark Tag:</h2>  
<p>Lorem <mark>ipsum dolor</mark> sit amet, consectetur.</p>

<h2>HTML ins Tag:</h2>
<p>Lorem <ins>ipsum dolor sit</ins> amet, consectetur.</p>

<h2>HTML sub Tag:</h2>
<p>Lorem <sub>ipsum dolor</sub> sit amet, consectetur.</p>

<h2>HTML sup Tag:</h2>
<p>Lorem <sup>ipsum dolor</sup> sit amet, consectetur.</p>

By putting this code in your code editor, you can see its result.

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *