View video tutorial

HTML Basic

HTML

We've discussed some of the most commonly used tags here.

HTML Doctype


All HTML Document must start with <!DOCTYPE html> element

The Doctype appears at the top of the HTML page and is only once and not case sensitive.

It helps the browser to load the correct html version.

For HTML5 the doctype declaration is <!DOCTYPE html>

<!DOCTYPE html>

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        h1,p {
            font-family: arial, sans-serif;
            background-color: #e7e9eb;
            padding:10px;
        }
    </style>
    <title>HTML DOCTYPE Example</title>
</head>
<body>
    <h1>!DOCTYPE Example.</h1>
    <p>!DOCTYPE html, declaration represents the html5 document type. It does not dispaly anything but helps to load the proper html engine.</p>

</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.


HTML Heading


Heading is the title for a section or a paragraph or a page, and carry the short description of the contents.

Heading starts from <H1> to <H6>element, where <H1> the biggest and <H6> is the smallest in size.

Defines text headings in different formats.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        p.heading {
            font-family: arial, sans-serif;
            background-color: #e7e9eb;
            padding:10px;
            font-size:20pt;
        }
    </style>
    <title>HTML Heading Example</title>
</head>
<body>
    <p class="heading">HTML Heading Example.</p>
    <h1>This is Heading H1</h1>
    <h2>This is Heading H2</h2>
    <h3>This is Heading H3</h3>
    <h4>This is Heading H4</h4>
    <h5>This is Heading H5</h5>
    <h6>This is Heading H6</h6>
    <p>Note: Elements from h1 to h6 represent headings for sections at six levels. H1 is the highest level and h6 is the lowest level</p>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.


HTML Paragraph


Paragraph is created by <p></p> element.

A separate section of text with intervals before and after a paragraph.

A paragraph describe something in full details and can be used multiple times.

Example

<h1>Heading for pagaraph one</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat</p>
<h1>Heading for pagaraph two</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit</p>
<p class="note">Note: Paragraph is a block level element.</p>
Try it Now »

Click on the "Try it Now" button to see how it works.


HTML Hyperlinks


Hyperlink is created by <a> tag. See the example below a link open in a new tab or window.

Creates a link (hyperlink) to another page.

<p><a href="https://www.google.com" target="_parent">Go to google</a> to search more about hyperlinks.</p>
<p><a href="https://www.w3context.com" target="_blank">Go to w3context</a> to search more about 
hyperlinks.</p>

hyperlink can be internal or external.

Example

<p><a href="https://www.google.com" target="_blank">Go to google</a> to search more about hyperlinks.</p>
Try it Now »

Click on the "Try it Now" button to see how it works.


HTML Images


HTML images are defined by the <img> tag.

The <img> tag does not hold the images to itself but rather refers to a link to the source image.

<img src="puppy.jpg" alt="Friendly dog" width="105" height="143">
<img src="puppy.jpg" alt="Nice dog" width="150" height="200">

In <img> tag src attribute is used as the source url for the image, width and height are used to set the image size, and alt is used for alternative text if the image cannot be found for any reason.

Example

<img src="puppy.jpg" alt="My nice dog" width="100" height="150">
Try it Now »

Click on the "Try it Now" button to see how it works.


Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Try sample code

Copy each file contents and paste it to your project, run and see the final output when everything is correct.