What is the best way for a beginner to learn HTML?

A beginner learning HTML on her laptop computer. — How Beginners Learn HTML
The best way for a beginner to learn HTML is to repeatedly markup documents.

HTML, or HyperText Markup Language, is the backbone of the web, and learning it is the first step towards becoming a web developer. Every webpage you visit is built using HTML. It structures the content on the web, making it readable and accessible. As someone who has been coding HTML for almost 20 years now, I'm here to encourage and help you get started with HTML.

Getting Started with HTML

So what is the best way for a beginner to learn HTML? The best way for a beginner to learn HTML markup is to code a page of text and images on their laptop or desktop computer. What webpage content (text and images) you use is not important. Grab a recent homework assignment, an article you wrote, or copy and paste a lengthy email to get started.

Avoid the temptation to HTML markup resumes and portfolio type pages initially. These types of web pages can distract your attention away from the task at hand. The idea is to focus your efforts on selecting the best HTML tags to use for a given block of text, for example, not to edit the text.

Basic Structure of an HTML Document

Every HTML document starts with a basic structure. This structure includes a <doctype> declaration, <html> tag, <head> tag, and <body> tag. Here's what a simple HTML template might look like:


<!DOCTYPE html>
<html>
<head>
  <title>Title of Your Webpage</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first webpage.</p>
</body>
</html>

Essential HTML Tags and Their Purposes

HTML consists of various tags that define the structure and content of a webpage. Moving from beginner to expert in HTML means that you have repeatedly marked up many documents and used many different tags. Take your time and seek out new HTML tags as the need arises. Here are some of the most commonly used HTML tags:

<h1> to <h6>: Heading tags, with <h1> being the most important and <h6> the least.
<p>: Defines a paragraph.
<a href="URL">: Creates a hyperlink to another webpage.
<img src="imageURL" alt="image description">: Embeds an image on the webpage.
<ul> and <ol>: Defines unordered and ordered lists, respectively, with <li> for each list item.

For a complete list of HTML tags, use an HTML Standard documentation website like MDN Web Docs. I don't know anyone who carries around an HTML book or HTML cheat sheet. Maybe if you are practicing somewhere where the internet is slow you might need one.

Creating and Viewing Your First HTML Page

Now that you're familiar with some basic HTML tags, it's time to create your very own HTML page. Follow these steps to create an HTML file, paste in the previously provided template, and view it in your Google Chrome or similar desktop browser.

Step 1: Create a New HTML File

Open a text editor such as Notepad and create a new file. Save this file with an .html extension, for example, article.html. The .html extension will later tell the browser that this is an HTML file full of tags.

Step 2: Copy and Paste the HTML Template

Copy the HTML template provided in the Basic Structure of an HTML Document section above or create your own template. Then, paste it into your newly created HTML file. This template is a simple HTML document structure that you can improve upon later.

Step 3: Save Your HTML File

After copying the template into your file, save your changes. Usually you can simply press Ctrl+S (Windows) or Cmd+S (Mac) to save.

Step 4: Open Your HTML File in the Chrome Browser

To view your HTML file, open the Google Chrome browser. Then, you can either drag and drop the file into the browser window or use the File menu to open it. To open it from the File menu:

Click on the three dots in the upper right corner of the Chrome browser to open the menu.
Hover over More Tools and select Open File from the drop down menu.
Navigate to the location of your saved HTML file, select it, and click Open.

Your HTML page should now display in the Chrome browser. Congratulations! You have just created and viewed your first HTML page.

Tips for Learning How To Markup HTML

As you begin your HTML learning journey, here are some tips to follow:

Copy, paste, then markup existing content to avoid being distracted by edits.
Practice regularly to strengthen your understanding and skills.
Seek out new HTML tags as the need arises.
Build small projects to apply what you have learned and gradually increase complexity.

Use online resources and documentation like MDN Web Docs for reference and learning. Once you're comfortable with HTML, the next step is to learn CSS (Cascading Style Sheets) to style your web pages and JavaScript to add interactivity. These three technologies are the pillars of front-end web development.

Learning HTML is the first step on a rewarding journey into web development. With practice and dedication, you'll find yourself creating increasingly complex and beautiful webpages and even full websites. Remember, every expert was once a beginner. Happy coding!

HTML

Resources:

HTML: HyperText Markup Language. Mozilla. Retrieved March 11, 2024.
HTML Elements. HTML Living Standard. Retrieved March 11, 2024.
HTML Images. W3Schools. Retrieved March 11, 2024.
HTML. WIKIPEDIA. Retrieved March 11, 2024.
NetBeans IDE. The Apache Software Foundation. Retrieved March 11, 2024.

How Beginners Learn HTML