Want to be able to create websites that pop, write text in any color you’d like and format hyperlinks like a pro? Then you need to learn HTML.
Best of all, doing so is easier than you think. With just a few simple symbols and letters, you can start using basic HTML today. And with a few more, you can begin customizing web pages, creating unique visual elements and even building entire websites.
- What Is HTML and What Is It Used For?
- Should You Learn HTML?
- Basic HTML for Beginners
- HTML Tags vs. Attributes
What Is HTML and What Is It Used For?
Hypertext Markup Language, or HTML for short, is the standard computer language for creating web pages across the entirety of the internet.
It was first created in the early 1990s by Tim Berners-Lee, the same person who invented the internet itself in 1989. But unlike Palm Pilots, car phones and other breakthrough products of the 90s, HTML is still in use today, with nearly 95 percent of websites using it as of July 2022.
But what is HTML used for, exactly? Simply put, it serves to structure a web page and the content it contains. This can include the following:
- headings and subheadings
- text formatting
- links and their accompanying anchor text
- bulleted and numbered lists
- tables and charts
- embedded images and videos
- paragraph formatting
It’s able to do so through HTML elements, or pieces of HTML code that bookend snippets of text. Each element consists of two HTML tags, one opening and one closing. The opening tag indicates where the formatting should be applied, while the closing tag indicates where it should stop:
With nothing but a handful of HTML tags and some content to work with, even a novice developer can create a clean, well-formatted web page in minutes. And with a wealth of HTML knowledge, more advanced developers can (and do!) create professional-grade websites for some of the world’s biggest companies.
Should You Learn HTML?
It’s all well and good that HTML is used on so many websites, but should you bother learning it?
If you’re even remotely interested in developing and customizing websites, then the answer is an unequivocal “yes.”
The Benefits of Learning HTML
If you decide to learn HTML, you’ll be able to:
- easily customize web pages;
- create your own unique websites;
- gain a better understanding of how the internet works;
- more easily troubleshoot site errors;
- see how other sites are built;
- complete more tasks without having to wait for a web developer to help; and even
- become a web developer yourself.
More of a creative type? You can even create one-of-a-kind artworks with HTML. Diane Smith’s stunning images, created solely with HTML and Cascading Style Sheets (CSS), serve as proof:
And if you’re wondering whether it might be worth learning HTML from a career-focused perspective, the answer is a “yes” here too. HTML skills are valued for a wide variety of both office- and home-based jobs, not just those with the title of “web developer.” These include positions such as:
- game developer
- content writer
- content editor
- graphic designer
- quality assurance analyst or tester
- software engineer
- technical writer
- app developer
Suffice it to say that even if you have no plans to develop websites, chances are you could benefit from learning the fundamentals of HTML.
Where to Learn HTML
So you know you want to start learning HTML, but where can you go to do so? Fortunately for new HTML students everywhere, there are a number of readily available options.
For instance, you can start learning HTML by:
- Attending online classes: If you have a computer or mobile device and access to the internet, then you already have what you need to start taking online HTML classes.
- Attending in-person classes: If you prefer face-to-face learning (and don’t mind spending some more cash to get it), you might consider taking an in-person class at a local university, community college or trade school.
- Teaching yourself: Though it will likely take plenty of trial and error, free online resources like W3Schools and Mozilla’s MDN Web Docs make it possible to learn some HTML basics by yourself.
Basic HTML for Beginners
Ready to start learning some of the fundamentals of HTML? No problem – these are some of the most common elements you’ll come across.
This is an inline element (i.e., one that doesn’t require a new line of text) that’s used to group content together for styling purposes.
For example, you could use span tags to indicate which section of text should have a different font color.
As their name suggests, heading tags are used to indicate which portions of content should be displayed as headings rather than body text.
Heading tags range from h1 (for the largest and most important heading of a page) to h6 (for the smallest and least important). In fact, the text you’re reading at this very moment is written under an h3 heading.
Similarly to span tags, div tags are used to indicate where text should be divided for styling purposes.
For instance, you could use div tags to define a section of text that should have a different font from the rest of the page’s text.
Anchor and Href
If you want to include a hyperlink in a page’s text, you can use anchor tags and the href attribute to create one (more on the difference between tags and attributes later).
The content between the anchor tags is the link’s visible text, while the URL you add after the href attribute is the page the link will lead to. Here’s how it works:
In instances when users may not be able to see an image due to a poor internet connection, visual impairments or other reasons, the HTML alt attribute can be used to provide alternative text.
For an image of a puppy playing with a ball, for instance, the alt text could read “Black labrador puppy chasing a yellow tennis ball across a green grassy field.”
If you want to create a list on your webpage, you can use either the unordered list tag “ul” or the ordered list tag “ol.” The former makes bulleted lists, while the latter makes numbered lists.
Within those tags, the tag “li” separates each of the list’s items from each other. This is what it looks like in practice:
Rather than being a specific tag in and of itself, semantic HTML is a category of tags. What makes them distinct is that they provide semantic meaning.
Examples of semantic tags include header, footer and nav. With those tags, both the browser and developer can easily tell what those tags are used for (indicating a page’s header, footer and navigation bar, respectively).
By contrast, non-semantic tags such as span and div don’t have any meaning on their own – they just serve as a way to separate portions of text.
HTML Tags vs. Attributes
If HTML elements are individual portions of HTML that bookend snippets of text, and tags are used to indicate where each element should start and stop, then what are attributes?
In short, HTML attributes are additional pieces of information you can add to an element’s opening tag in order to provide web browsers with further instructions. For example, you can use the style attribute to specify which color a particular portion of text should be:
All attributes follow that same basic format. Specifically, the name of the attribute, the equals sign and your chosen value contained within quotation marks:
Once you know how to use HTML attributes, you’ll be able to customize just about any HTML element however you see fit.
Want to Learn HTML? You Won’t Regret Taking the Plunge
If there was ever a computer language everyone should get familiar with, it’s surely HTML. It’s easy to learn, universally useful and always valuable.
So if you’ve been thinking about learning HTML, go for it. You’ve got nothing to lose, and only have beautifully formatted web pages to gain.
Even More Coding Classes to Choose From
Beginner to Expert Programming Lessons