Every web developer's journey begins with learning HTML. It is a tag-based markup language used for structuring web pages. Like any language, HTML follows certain rules that a developer must understand. The core components of HTML are elements and tags.
Tags in HTML
A tag is the fundamental building block of HTML, consisting of characters written in English enclosed in angle brackets. Tags are what transform plain text into hypertext for a web page.
There are paired and self-closing tags.
Paired tags include an opening and a closing tag, with content placed in between. A typical example is the <title> tag. The closing tag is marked by a slash “/” after the angle bracket.
Self-closing tags. A good example is the <img> tag. It does not have a closing tag and, like most self-closing tags, it doesn’t contain content but is used to insert images.
Elements in HTML
An element in HTML is a logically complete structure. A self-closing tag is an element on its own. A paired tag forms an element when both the opening and closing tags are used along with the enclosed content.
So to learn HTML, you must understand and navigate its tags. But how is that possible with over 100 tags? Do you have to memorize them all?
Here's the good news: from your very first days working with HTML, you don’t need to memorize all 100+ tags. In fact, around 50–60% of them are rarely used even by advanced developers.
The first and most essential tags you must become familiar with are the ones that form the basic structure of an HTML document. That’s where the developer’s cheat sheet begins.
Among the many available tags, you can build a basic HTML cheat sheet and group them into categories.
Heading Tags
These are vital elements in an HTML document. First, they help organize and structure content. Second, they play an important role in SEO.
Heading tags include six levels: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. They should be used in strict hierarchical order, starting from <h1> as the most important heading, down to <h6>.
On a page, each heading level appears differently. The <h1> heading is the largest and boldest.
All heading tags are paired and must include a closing tag.
Text Formatting
Working with Tables in HTML
To create a table in HTML, you start with the <table> tag. This tag holds all the data for the table. It is a paired tag and requires a closing </table> tag.
A table consists of rows and cells, created using the <tr> and <td> tags, respectively. The <td> tag is nested inside <tr>, which in turn is placed inside the <table>.
The <table> tag supports many attributes that define border thickness and color, cell padding, table height, number of columns, and more.
Creating HTML Forms
HTML forms are created using the <form> tag. Forms enable data exchange between users and services. There is no limit to the number of forms in a document, but each form must be independent and include both opening and closing tags. Forms cannot be nested inside each other.
Embedded HTML Elements
The <audio> tag is used to embed and control audio on a web page. The file path is specified using the <source> tag. It is a paired tag and must be closed. Inside the <audio> tag, you can include fallback text to be shown if the browser cannot play the file.
The process for adding and managing video is similar to audio, but done using the <video> tag.
You can add subtitles to audio and video content using the <track> tag.
To display images in JPEG, PNG, or GIF format on a webpage, use the <img> tag.
For the first few months, this HTML cheat sheet will be more than enough. Over time, you’ll expand it with the tags you use most often — and eventually, you’ll memorize most of them without even trying.