Learn HTML Basics: HTML Practical Examples For Beginners

image poster of learning HTML

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

  1. What is HTML?
  2. How HTML works: Introduction to HTML
  3. Tools for writing HTML
  4. Basic html elements and tags tutorial
    - Basic HTML Template - Headings - Paragraphs
  5. Other text formating using HTML
  6. Creating sections using Div
  7. Creating sections using HTML5 Semantic tags
    - Header - Aside - footer
  8. 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++.

Advertisement

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

  1. 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>
      1. Item 1
      2. Item 2
      3. 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
  1. Superscript
The word <sup>tags</sup> is superscript.
The word tags is superscript.
  1. Subscript
The word <sup>tags</sup> is a subscript.
The word tags is a subscript.
  1. Horizontal Line

Create a line that breaks the text.

  1. Marked or Highlighted Text

  2. Deleted (Cross-Through) Text

tags.

  1. Short & Long Quotations
All of this text will be in a blockquote like the rest of the examples.

I’m quoting this story.

  1. Italics

The dog ate my homework is a commonly used lie.

  1. Images

<img src="https://devpractical.com/public/03/pet-dogs.jpg" alt="image of a two cute dogs">

image of a two cute dogs

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>

this is a relative link

Absolute path

code:

<a href=”https://devpractical.com/projects”>this is an absolute link</a>

Result:

this is an absolute link

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>

Aside

  <aside>

  </aside>

<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>
author's bio photo

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.