Learn HTML For Beginners With Examples: Practical Guide

image poster of learning HTML

In this beginner-friendly guide your will learn the basics of HTML through a hands-on and practical approach. This guide is tailored for anyone with interest in learning HTML and how it contribute to the world of websites. No previous coding knowledge required.

Outline

  1. What is HTML?
  2. Tools For Working With HTML
  3. Create First HTML file
  4. HTML tags and Elements
  5. Headings and Paragraphs
  6. Text formatting
  7. Creating Lists
  8. Links and Anchors
  9. Working with Images
  10. Creating Forms
  11. HTML5 Semantic Elements
  12. HTML File Template
  13. Common HTML Mistakes to Avoid
  14. Additional Resources

1. What is HTML?

HTML, which stands for Hypertext Markup Language. HTML is the language that allows us to display content(text, links, pictures, sounds and videos) on a website. Every time you interact with a website by reading, listening or watching something, you should know that HTML is involved.

HTML was created by Tim Berners-Lee to only display text documents with links. It has evolved into something much better. With HTML, you can show, images, videos, audio clips and many more things.

Tools For Working With HTML

As you start learning HTML, you’ll need some tools to create and test your web pages created with HTML. Here are a few simple and user-friendly tools to get you started:

a. Text Editors: For Writing HTML

To get started with HTML, you’ll need to use an app to write and save HTML code. You can use common text editors(apps) like Notepad (on Windows), TextEdit (on macOS), or VSCode, Sublime Text, and many more. These editors help you write and save your HTML code.

Text editors

b. Web Browsers for Viewing Web Pages

After you’ve written your HTML code, you will want to test it to make sure it works. You will need another app, a web browser to test and view your HTML code.

Common web browsers include: Google Chrome, Mozilla Firefox, and Microsoft Edge. These browsers will allow you to test your HTML web pages as you build them.

Web Browsers

3. Creating and Testing Your First HTML Code

Now that you have the tools in place, let’s dive into creating your writing HTML code. You will start by creating a HTML file, then adding the code and finally test it. So:

a. Open your text editor.

b. Copy the HTML code below and paste it into your your text editor.

<!DOCTYPE html>
<html>
  <head>
    <title>Your Page Title</title>
  </head>
  <body>
    Hello World
  </body>
</html>

copy paste the code into editor

Every HTML page starts with a <!DOCTYPE> declaration to specify the version of HTML you’re using.

Then, everything is wrapped between the <html></html> tags. Inside that, you’ll find two sections. The:

  • <head></head> section, which contains metadata. You’ll learn more about metadata later.
  • <body></body> section, where your visible content goes.

c. Save your file with an appropriate name and the “.html” extension. For example, “first.html” or “index.html”.

save html file

d. Ensure that the file type is set to “All Files” or “.html” when saving to avoid any issues.

e. Navigate to the folder where you saved your HTML file.

f. Right-click on your HTML file, choose “Open With,” and select your preferred web browser (e.g., Google Chrome, Firefox).

open html file with web browser

g. Your browser will open, displaying your simple HTML webpage. Congratulations on creating your first HTML file!

view html code web browser

4. HTML Tags and Elements

When you start working with HTML, two essential concepts to grasp are tags and elements. Let’s break down these concepts in a beginner-friendly way:

a. HTML Tags:

Think of tags as instructions that tell the browser how to display content.

Tags are written with angle brackets, like this: <tag>.

Most tags come in pairs: an opening tag, like <tag>, and a closing tag, like </tag>. For example, <p> is the opening tag for a paragraph, and </p> is the closing tag. Some tags don’t have closing tags like <br>.

Check the comprehensive list of HTML tags

b. HTML Elements:

An element is made up of a pair of tags, an opening tag <tag>, a closing tag </tag> and content that you put between these two tags. For example: <p>This is a paragraph</p> is a paragraph element.

5. Adding Headings and Paragraphs

Headings are created using <h1> to <h6>, with <h1> being the largest and most important, and <h6> the smallest. They help structure your content.

Paragraphs are made with the <p> tag and are used to add paragraphs in HTML.

Example:

<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
<p>This is a paragraph of text.</p>

Headings and paragraph screenshot

4. Text Formatting

Formatting with Bold and Italic

You can make text bold using the <b> tag for bold and the <i> tag for italic.

For example:

<p>This is <b>bold</b> and <i>italic</i> text.</p>

screenshot

Underlining Text

If you want to underline text, use the <u> tag. Here’s how:

<p>This text is <u>underlined</u>.</p>

screenshot

Line Breaks and Horizontal Rules

To create line breaks within a paragraph, use the <br> tag. It’s handy for poetry or addresses.

<p>This<br>text<br>is<br>broken<br>down.</p>

screenshot

For horizontal lines to separate content, employ the <hr> tag:

<p>Content above</p>
<hr>
<p>Content below</p>

screenshot

5. Creating Lists

Ordered Lists

To create a numbered list of items, use ordered list. Ordered lists are used for items that have a specific sequence. Use the <ol> tag for the list container and <li> tags for list items. For instance:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

screenshot

Unordered Lists

Unordered lists are for items without a particular order. They’re created using the <ul> tag and <li> tags for list items:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

screenshot

Definition Lists

Definition lists pair terms with their definitions. You use the <dl> tag to create the list, <dt> for terms, and <dd> for definitions:

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

screenshot

Hyperlinks are essential for navigation. To create one, use the <a> (anchor) tag. Here’s how to link to an external webpage:

<a href="https://www.example.com">Visit Example.com</a>

screenshot

9. Working with Images

Adding Images

Images are integral to web design. To include an image in your HTML page, use the <img> tag with the src attribute pointing to the image file:

<img src="https://placehold.co/600x400/004d36/f8f9fa/png?text=Hello+World&font=roboto" alt="A beautiful image">

Image Attributes

  • The src attribute contains the path to the image.
  • The alt attribute is a brief description of the image, important for accessibility.
  • You can also adjust the image dimensions with the width and height attributes.
<img src="https://placehold.co/600x400/004d36/f8f9fa/png?text=Hello+World&font=roboto" alt="A beautiful image" width="300" height="200">

10. HTML Forms

Forms are used to collect information from the users and sent it to a server(another computer).

Form Elements

To create a form, use the <form> tag. Within the form, you can include various input elements, such as text fields, password fields, checkboxes, radio buttons, and more. Here’s an example:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  <br>

  <input type="checkbox" id="subscribe" name="subscribe" value="yes">
  <label for="subscribe">Subscribe to our newsletter</label>
  <br>

  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label>
</form>

HTML forms screenshot

Buttons and Submitting Forms

You can include buttons inside a form to trigger actions, and the most common one is the submit button. To create a submit button, use the <button> element or an <input> element with the type “submit.”

<form>
  <!-- Form elements here -->

  <button type="submit">Submit</button>
</form>

Handling form submissions often requires server-side programming or external services, which is a more advanced topic. But understanding the basic form structure is the first step.

11. HTML5 Semantic Elements

HTML5 introduces semantic elements that provide more meaning to the structure of your web page. They make your code more accessible and help search engines understand your content better.

Introduction to Semantic Elements

Semantic elements like <header>, <nav>, <article>, <section>, and <footer> add context to your content. For instance, you can use the <header> element for the page header, the <nav> element for navigation menus, and the <footer> element for the page’s footer. This not only makes your code cleaner but also benefits SEO and accessibility.

Here’s an example of how they can be used:

<header>
  <h1>My Website</h1>
  <p>Welcome to my website!</p>
</header>

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<article>
  <h2>Article Title</h2>
  <p>This is the main article content.</p>
</article>

<footer>
  <p>&copy; 2019 My Website</p>
</footer>

Semantic HTML screenshot

By incorporating these elements, you make your HTML more meaningful and user-friendly.

12. HTML File Template

A well-structured HTML document begins with a <!DOCTYPE> declaration, indicating the HTML version. Then, it has an <html> element that encloses the entire document. Inside the <html>, you find two main sections:

  • The <head> section, where you add metadata like the page title, character encoding, and links to external resources.
  • The <body> section, which contains the visible content of your web page.

Here’s a simplified example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Other metadata here -->
  </head>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a simple example.</p>
  </body>
</html>

Basic web page screenshot

13. Common HTML Mistakes to Avoid

Even the best of us make errors, and HTML is no exception. Here are some common mistakes to be aware of and avoid:

Unmatched Tags

One of the most common mistakes is forgetting to close tags properly. Every opening tag should have a corresponding closing tag, and they should be nested correctly.

Correct:

<p>This is some text.</p>

Incorrect:

<p>This is some text.

Invalid Nesting

Ensure that your tags are nested correctly. Opening and closing tags should match up in the right order.

Correct:

<div>
  <p>Paragraph inside a div.</p>
</div>

Incorrect:

<div>
  <p>Paragraph inside a div.</div></p>

Forgetting to Close Tags

Don’t forget to close your tags, even if modern browsers may handle it. Clean code is essential for reliability and maintainability.

Correct:

<p>This is a sentence.</p>

Incorrect:

<p>This is a sentence.

By being mindful of these common pitfalls, you’ll produce clean and reliable HTML code.

14. Additional Resources

To continue your learning, here are some resources you might find helpful:

Thank you for taking the time to learn HTML from me. I hope this article has been a valuable starting point for your web development journey. Happy coding!

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.