Learn HTML Basics: HTML Practical Examples For Beginners
Learn the basics of HTML using simple & practical examples. In this post you get to see how HTML works step by step on all the HTML tags.
Outline
- What is HTML?
- How HTML works: Introduction to HTML
- Tools for writing HTML
- Basic html elements and tags tutorial
- Basic HTML Template - Headings - Paragraphs - Other text formating using HTML
- Creating sections using Div
- Creating sections using HTML5 Semantic tags
- Header - Aside - footer - Intermediate html tags [tutorial]
- Ordered list - Unordered list - Code - Pre - Forms - Html Input - Text Input - Radio input - Submit button - Blockquotes - Video - Audio - Embed - Canvas
What is HTML?
HTML is the short form for Hyper Text Markup Language. It helps us to display text, links, pictures, sounds and videos correctly on a webpage. Every time you visit a website through you should know that HTML is involved.
HTML was created by Tim Berners-Lee to share documents across the internet. It has evolved. You can now be able to share images, videos, and even play games on the internet.
How HTML Works: Introduction to HTML
HTML is used to describe the appearance of a document to be displayed by a internet browser.
HTML documents are normal text documents but with ‘.html‘ file name extension. Normal text files have a ‘.txt‘ file name extension.
When the HTML file is viewed on a browser, the browser interprets the HTML code is but does not display the html code itself.
To view the html code itself, you can right click on the webpage and click on view source.
You need to use a text editor, to edit the HTML code. There are many text editors you can use like Sublime Text or Notepad++.
Html elements
Html element includes the opening tag, the closing tag and the content between the tags.
Html tags
These are tags used to tell the browser the beginning and the end of a HTML element.
Basic html elements and tags tutorial
1. Basic HTML Page
Each HTML page contains a template that is always present in any HTML page. Further more, the tags used in the template help divide your html into meaningful sections.
Each HTML page usually has the following tags:
code:
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
This is a basic HTML page.
</body>
</html>
Result:
This is a basic HTML page.
Anything that you want to be displayed on the HTML page is added between the body tags.
HTML Text Tags
-
Headings: Creating Headings using HTML
There are 6 type of heading with h1 being used as the title of the post or article for SEO purposes.
The rest can be used for headings and sub headings.
<h1>H1 Heading1</h1>
<h2>H2 Heading2</h2>
<h3>H3 Heading3</h3>
<h4>H4 Heading4</h4>
<h5>H4 Heading5</h5>
<h6>H6 Heading6</h6>
H1 Heading1
H2 Heading2
H3 Heading3
H4 Heading4
H4 Heading5
H6 Heading6
2. Paragraphs
This is used to display the normal text in paragraphs like the normal paragraph.
<p>This is a paragraph.</p>
<p>This is a second paragraph.</p>
This is a paragraph.
This is a second paragraph.
3. Line Break
The line break tag
breaks a line of text wherever it is inserted.
The line break will be here
, and not here on a full line of text.
The line break will be here
, and not here on a full line of text.
4. Bold & Strong
Both turns the text into bold but strong is concidered to have more meaning to search engines.
Bolded text
5. Italic & Emphasized
Both turns the text into italics but strong is concidered to have more meaning to search engines.
Italized text
Emphasised text
6. Underlined
Use this carefully so that the users don’t confuse them with links.
Underlined text
7. Ordered Lists
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
-
-
- Item 1
- Item 2
- Item 3
-
8. Unordered Lists
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
-
-
- Item 1
- Item 2
- Item 3
-
- Superscript
The word <sup>tags</sup> is superscript.
- Subscript
The word <sup>tags</sup> is a subscript.
- Horizontal Line
Create a line that breaks the text.
-
Marked or Highlighted Text
-
Deleted (Cross-Through) Text
tags.
- Short & Long Quotations
All of this text will be in a blockquote like the rest of the examples.
I’m quoting this story.
- Italics
The dog ate my homework is a commonly used lie.
- Images
<img src="https://devpractical.com/public/03/pet-dogs.jpg" alt="image of a two cute dogs">
Html Links
Links help you navigate from one page to the next web page or a different website.
The tag used to make links are the <a href=”URL”></a> tags.
The URL is the target, which page or website you want to go to.
Relative path
code:
<a href=”/projects”>this is a relative link</a>
Absolute path
code:
<a href=”https://devpractical.com/projects”>this is an absolute link</a>
Result:
Link that opens in a new tab/ window
Html comment tag
Html comment tags are used to add a comment in a html document. Anything inside the comment tag is not rendered on the browser but can be seen if you check the html source code.
code:
<!– This is a comment that will not be visible –>
Result:
Html structure tags & elements
Div
<div>
</div>
Header
<header> </header>
Aside
<aside> </aside>
footer
<footer>
</footer>
Intermediate html tags
Code
<code></code>
Pre
<pre></pre>
Forms
<form>
<input type="">
</form>
Html input types
Text Inputs
<form action="contacts.php">
<input type="text" name="firstname" placeholder="First Name">
</form>
Radio input
<form action="contacts.php">
<input type="radio" name="firstname" placeholder="First Name">
<input type="radio" name="firstname" placeholder="First Name">
</form>
Submit button
<form action="contacts.php">
<input type="submit" value="Submit">
</form>
OR
<form action="contacts.php">
<button type="submit">Submit</button>
</form>
You can read an in-depth article on HTML forms that I wrote.
QUOTES
Inline quotes
<p>When Dave asks HAL to open the pod bay door, HAL answers: <q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">I'm sorry, Dave. I'm afraid I can't do that.</q></p>
Blockquotes
<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
</blockquote>
<cite>– Aldous Huxley, Brave New World</cite>
Video
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
Audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio
Embed
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
Canvas
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

Hi there! I am Avic Ndugu.
I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.
Front End Developer Newsletter
Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.