HTML Basic Examples

In this chapter, we’ll show you some simple examples of HTML code.

Don’t worry if we use tags that you haven’t seen before.

HTML Documents

All HTML files must start with <!DOCTYPE html>, which says what kind of file it is.

The HTML document starts with the <html> tag and ends with the </html> tag.

Between <body> and </body> is the part of the HTML file that can be seen.


<!DOCTYPE html>
<title>Page Title</title>

<h1>Your Heading</h1>
<p>Your paragraph.</p>



The Declaration of Type ( <!DOCTYPE> )

The document type is shown by the <!DOCTYPE> declaration, which helps browsers show web pages correctly.

It should only be at the top of the page (before any HTML tags).

The case of the words in the <!DOCTYPE> declaration doesn’t matter.

This is what the HTML5 <!DOCTYPE> declaration says:

<!DOCTYPE html>


Headings in HTML

The <h1> to <h6> tags are used to set up headings in HTML.

<h1> shows which heading is the most important.<
<h6> is the heading that is the least important:



<h1>Your H1 Heading</h1>
<h2>Your H2 Heading.</h2>



<h6> Your H6 Heading</h6>


HTML Paragraphs

The <p> tag tells HTML what a paragraph is:


<p>paragraph  example </p>

<p> second paragraph.</p>

HTML Links

The <a> tag is used to describe links in HTML:


<a href=””></a>

In the href attribute, you can tell where the link goes.

Attributes are used to tell HTML elements more about themselves.

In the next chapter, you will learn more about attributes.

HTML Images

The <img> tag tells HTML what an image is.

As attributes, we give the source file (src), alternative text (alt), width, and height:


<img src=”coderazaa.jpg” alt=”” width=”250″ height=”150″>

How to See the HTML Code

Have you ever seen a Web page and wondered “Hey! how they do it?”

Look at the HTML Source Code:

Right-click on an HTML page and choose “View Page Source” or “View Source” (in Chrome) or something similar (in Edge or other browsers).
This will open a new window with the page’s HTML source code.

Inspect an HTML Element:

Right-click on an element or a blank area and choose “Inspect” or “Inspect Element” to see what the element is made of (you will see both the HTML and the CSS).
In the Elements or Styles panel that opens, you can also change the HTML or CSS on the fly.

People also search
Scroll to Top