HTML Basic Examples Tutorial for Beginners – Simple Explanation

In this chapter we will show some basic HTML examples. Don’t worry if we use tags you have not learned about yet. You will pick them up as we go.

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tells the browser what version of HTML to expect. It helps browsers display your web pages correctly.

It must only appear once, at the very top of the page before any HTML tags.

The <!DOCTYPE> declaration is not case sensitive. You can write it in uppercase, lowercase, or mixed. But most people write it as <!DOCTYPE html>.

For modern HTML5, this is all you need:

Example

<!DOCTYPE html>

HTML Headings

Headings in HTML are defined with the <h1> to <h6> tags.

<h1> is the most important heading. It’s usually the biggest and boldest. <h6> is the least important heading. It’s the smallest.

Think of it like an outline for an essay. H1 is the main title. H2 is a section title. H3 is a subsection, and so on.

Example

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

Try it Yourself

HTML Paragraphs

Paragraphs in HTML are defined with the <p> tag.

A paragraph always starts on a new line. Browsers automatically add some space before and after each paragraph.

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Try it Yourself

HTML Links

Links (or hyperlinks) are defined with the <a> tag. The “a” stands for anchor.

The link’s destination goes inside the href attribute. Attributes give extra information about an element. You will learn more about attributes in a later chapter.

Here is how you create a clickable link:

Example

<a href="https://www.google.com">Go to Google</a>

Try it Yourself

HTML Images

Images are defined with the <img> tag.

The src attribute tells the browser where the image file is located. The alt attribute provides alternative text if the image cannot load (it’s also good for screen readers). The width and height attributes control the image size.

Unlike most tags, the <img> tag does not have a closing tag. It’s an empty element.

Example

<img src="picture.jpg" alt="A description of the picture" width="500" height="300">

Try it Yourself

How to View HTML Source

Have you ever seen a website and wondered “Hey, how did they do that?” You can actually look under the hood.

View HTML Source Code: Press Ctrl+U on Windows or Cmd+U on Mac when you are on any webpage. Or right click on the page and select “View Page Source”. This opens a new tab showing the raw HTML code of that page.

Inspect an HTML Element: Right click on any part of a webpage (or a blank area) and choose “Inspect”. This opens developer tools. You can see both the HTML and CSS. Even better, you can edit the HTML or CSS live in the Elements or Styles panel to see how changes would look. Very handy for learning.

Tip: The next time you see a cool website, right click and Inspect it. You will learn a ton just by seeing how other people write their code.

What Just Happened? Let Me Explain

<!DOCTYPE html> – This tells the browser “I am using HTML5”. Always put this at the very top.
<html> – The root element. Everything else goes inside this.
<body> – Everything inside here is visible to the user.
<h1> to <h6> – Headings from biggest (h1) to smallest (h6).
<p> – A paragraph of text.
<a> – A link. The href attribute tells it where to go.
<img> – An image. The src attribute tells it where the image is.

Wait. What Is an HTML Element Exactly?

An element is just an opening tag like <h1>, some content, and a closing tag like </h1>. The closing tag has a forward slash right before the tag name.

Syntax

<tagname> Your content here </tagname>

A real example looks like this:

Example

<h1>My Awesome Title</h1>
<p>Some words go here.</p>

Start Tag	Content	End Tag
`<h1>`	My Awesome Title	`</h1>`
`<p>`	Some words go here	`</p>`
`<br>`	(nothing)	(nothing)

Note: Some elements like <br> (line break) and <img> don’t need a closing tag. They are called empty elements.

How Do Browsers Actually Work?

A browser like Chrome or Safari reads your HTML file line by line. It does not show the tags themselves. It uses those tags to figure out how to display things. A <h1> becomes big and bold. A <p> becomes normal paragraph text. A link becomes blue and underlined until you click it.

Think of HTML like a recipe. You write the instructions, the browser cooks the meal.

Tip: Want to practice? Open VS Code, create a new file called basics.html, and try making your own page with headings, paragraphs, a link, and an image. Break things and fix them. That is the best way to learn.