Learn HTML the easy way – The ultimate guide for beginners
Web developers use HTML to create web pages. If you’re getting into web development, you should learn HTML first.
But what if I told you you’ve already created plenty of HTML content before?
Even if I haven’t written a single line of HTML? you might ask.
And I would say yes!
Those emails you write to your co-workers, family, and friends are HTML too. That’s why they can be displayed on the web browser.
When writing an email, you have a set of tools to format your message, add a link, or insert image.
But when writing HTML as a developer, you have to annotate your content manually – to do the same thing.
I’m quite sure you can’t wait to figure out how long it’ll take to learn HTML!
But how about we begin with the most basic question first?
What is HTML anyway?
HTML (Hypertext Markup Language) is the base technology behind any web page.
Web developers use HTML to present plain data in a web page format – viewable by web browsers. Just like this very page, made by sincerely yours.
I could write this with a word processor like Microsoft Word, but I had to upload it somewhere and share the download link with you.
And you had to download the file and view it offline.
Web pages are also known as HTML pages.
HTML is considered a markup language; It has a special set of annotations, known as HTML tags that wrap a piece of text.
Some say, HTML is a programming language, and some argue against that.
If you ask me, it has all the characteristics of a declarative-paradigm language.
However, it’s absolutely okay to believe otherwise.
What matters is you need to learn HTML to create web pages and start earning.
It’s all about annotating text
HTML tags instructs the web browser on how to render your document.
HTML tags consist of tag name enclosed with a “<>“
Most come in pairs, the opening part and the closing part. Each pair a portion of a text, a whole paragraph, or even other tags.
Some text here <tag-name>some text annotated by a tag</tag-name>
<another-tag>
Some text also here
and even more
</another-tag>
And so on
The closing part is distinguished with an additional "/" symbol.
Let's see an example of a real tag.
Imagine you have a piece of content on a web page, like this:
I'm a piece of text
It's just a plain text, right?
If you want to emphasize the word "piece" (say make it italic), you can wrap it with <em> tag like so:
I'm a <em>a piece</em> of content
HTML is all about annotating your content with tags.
Each tag creates an element on the page.
Headings, paragraphs, buttons, links, fields, tables, images, videos, etc., are all elements of a web page - made by tags.
It's like creating a document with MS Word or Google Docs, but without any select & format tool. It's all code that you write.
There are hundred of HTML tags, but you need to remember only a handful of them. The rest, you usually look up when you need them from time to time.
I'll teach you the tags you need to know in a few minutes, but first, let's get the fundamentals down.
What is Hypertext?
A website is a group of related HTML documents (a.k.a pages) connected via hyperlinks.
Hyperlinks or simply links are what you click on and go to a different page; Or to a different section of the same page.
For instance, by clicking this very hyperlink, you go to the next paragraph!
🛎️ The text you read on a webpage is called hypertext because it contains hyperlinks.
For instance the following content is considered hypertext:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the <a href=/destination-url-here>industry's standard</a> dummy text ever since the 1500s, when an unknown <a href=/destination-url-here>printer</a> took a galley of type and scrambled it to make a type <a href=/destination-url-here>specimen book</a>.
Links are created with anchor tags (<a>).
We click on tens of link daily when surfing the web.
Don't worry! You'll learn HTML anchors shortly!
How long does it take to learn HTML?
I know you don't take "it depends" as an answer, and you need a number - in days.
But I have a suggestion, if you don't mind. Instead of focusing on the time to "learn HTML", I suggest you adjust your angle a bit:
"How long does it take to learn enough HTML to create my first web page?"
I can answer this question easily: Today!
Learning HTML is a "learn → build, learn → build, learn → build" process. Rather than "learn, learn, learn → build".
That's how it works; The more you learn HTML, the more you can do with it. And as you start, it's all about making things with whatever you know.
Today you can learn HTML and make a cool HTML page, and probably a cooler one tomorrow!
What a real HTML page look like?
So much theories! But trust me, it's helpful to build a solid foundation.
But now it's time for action. And let's start by looking at a real HTML page:
<html>
<head>
<title>Learning HTML is fun</title>
</head>
<body>
<h1>How long does it take to learn HTML?</h1>
<time datetime="10-05-2022">10 May</time>
<p>I know you don't take <em>"it depends"</em> as an answer, and you need a number - in days.</p>
<p>
But I have a suggestion, if you don't mind.
</p>
<p>Instead of focusing on the time to <a href="#">learn HTML"</a>, I suggest you <strong>adjust</strong> your angle a bit:</p>
<p>"How long does it take to create my first web page?"</p>
<p>I can answer it easily.</p>
<p>Today!</p>
<p>Here are the things you should learn:</p>
<ul>
<li>HTML tags</li>
<li>HTML attributes</li>
<li>HTML document structure</li>
<li>Tables</li>
<li>Forms</li>
</ul>
</body>
</html>
At the first glance, you might think: "oh that's looks complicated". "It's rocket science; It's not for me!"
But it isn't. I mean it's not that complicated.
Once you learn the anatomy of an HTML page, everything will start to make sense.
By the end of this article, you'll be able to create an HTML page much better than the one above!
First, learn the HTML skeleton
HTML files are like a family tree. I starts with a root with children, and those children will have children and so forth.
The HTML skeleton looks like this:
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
The tag <html> is the head of the clan. It encloses every tag on your document.
<html> has two children: <head>, and <body> tags.
This is where the family starts; Obviously, it won't have any output.
This structure applies to every single web page on the web.
All html tags are either the children of <body> or the children of <head>.
But what are these two tags? you ask.
Let's get to know them briefly.
Head tags
The tags inside <head> are called head tags or metadata tags. Web browsers don't display these tags, though.
The metadata tags contain information about the page itself. This information include page titles, and additional data to help browsers and search engines understand the structure and purpose of the page.
External CSS and JavaScript files are also linked to the document from within the <head> tag - more on this below.
Body tags
All tags that have a visual output are placed inside the <body> tag.
Everything you see on a web page (when you access it from your browser) are the tags inside the body tag.
These tags can be headings, paragraphs, images, videos, links, tables, forms, etc.
Wait, what's that <!doctype> before the <html> tag? 🤨 you may ask.
<!doctype html> is a required hint to the browser to follow the HTML5 specifications when parsing and rendering your HTML document. So you should always make sure your document starts with this hint.
Get yourself a nice code editor
Before getting your feet wet, there's one thing you need to do.
You need to install a code editor, if you haven't done yet.
There are many options in the market. However, two of the most popular editors are Sublime Text and Visual Studio Code (VS Code).
Writing HTML (or any code) without an editor is practically impossible. They provide you syntax highlighting and automatic indentation, which become crucial as you add more code to your HTML page.
VS code, which is an excellent free alternative to Sublime Text. It's an open-source project by Microsoft, and probably the most popular code editor in the market for web developers.
You can download VS code for free on Visual Studio Code website.
HTML tags you need to learn no matter what.
🎸 Did you know you can play and sing hundreds of songs with learning only four chords?!
HTML is no different! There are a few tags that are must-know no matter what.
Once you know them, you can start building HTML pages right away.
So let's start with learning HTML tags you'll use frequently.
Page title: <title>
You can set your page's title with this head tag. That's what you see on your web browser tabs.
<html>
<head>
<title>The ultimate HTML guide for us dummies - Decoding Web Development</title>
</head>
<body>
</body>
</html>
Additionally, if your site is listed on the search results page, this title will be displayed along with a short explanation about your page.
You can read more about the <title> element on the MDN website.
Paragraphs: <p>
HTML paragraphs are like paragraphs of a Word Document. They are displayed as a block of text separated by a blank line.
Since <p> has a visual output, it goes under the <body> tag.
An article contains hundreds of <p> elements depending on the length of the content.
Let's add some paragraphs to our page:
<html>
<head>
<title>The ultimate HTML guide for us dummies - Decoding Web Development</title>
</head>
<body>
<p>What if I told you you’ve already created plenty of HTML content before?</p>
<p>Even if I haven’t written a single line of HTML? you might ask.</p>
<p>And I would say yes!</p>
</body>
</html>
Page headings: <h1> to <h6>
Heading elements are one of the most important components of an HTML page.
They come in 6 types: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> and are place inside the <body> tag.
Based on the hierarchy of your heading, you use the appropriate tag. For instance, your page's main title goes in an <h1> tag. The subtitles could be enclosed with an <h2>, and so forth.
<html>
<head>
<title>The ultimate HTML guide for us dummies - Decoding Web Development</title>
</head>
<body>
<h1>The ultimate HTML guide for us dummies</h1>
<p>What if I told you you’ve already created plenty of HTML content before?</p>
<p>Even if I haven’t written a single line of HTML? you might ask.</p>
<p>And I would say yes!</p>
<h2>What is HTML anyway?</h2>
<p>HTML (Hypertext Markup Language) is the base technology behind any web page.</p>
</body>
</html>
Based on the web browser's default stylesheets, the <h1> has the biggest font size, and it gets smaller as you go towards <h6>.
You can also adjust the heading's font size with CSS.
Each page should only have one <h1> tag. While it's technically valid to have more than one <h1> tag on a page, it's not considered a good practice - in terms of SEO and accessibility.
You should think of your headings as the outline of your content. So if you only extract the titles from the page, your users would still be able to know what the page is all about.
<html>
<head>
<title>The ultimate HTML guide for us dummies - Decoding Web Development</title>
</head>
<body>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
</body>
</html>
You shouldn't use the headings tags just because of their default font size. They should only be used for titles in your document based on their hierarchy.
Lists: <ul> and <ol>
The <ul> tag wraps a set of <li> tags to represent represents an unordered list of items.
The web browser renders it as a bulleted list.
<html>
<head>
<title>The ultimate HTML guide for us dummies - Decoding Web Development</title>
</head>
<body>
<ul>
<li>Potato</li>
<li>Banana</li>
<li>Onion</li>
<li>Tomato</li>
<li>Strawberry</li>
</ul>
</body>
</html>
<ol> is the same as <ul>, but the web browser renders it as a numbered list
You use the <ol> when you want to show the order of the elements too.
<html>
<head>
<title>The ultimate HTML guide for us dummies - Decoding Web Development</title>
</head>
<body>
<ol>
<li>Potato</li>
<li>Banana</li>
<li>Onion</li>
<li>Tomato</li>
<li>Strawberry</li>
</ol>
</body>
</html>
The list item or <li> elements can also wrap other HTML elements, such as links. This is useful to create a table of contents for a page.
<html>
<head>
<title>The ultimate HTML guide for us dummies - Decoding Web Development</title>
</head>
<body>
<ul>
<li>
<a href="#introduction">Introduction</a>
</li>
<li>
<a href="#what-is-html">What is HTML?</a>
</li>
<li>
<a href="#what-can-i-do-with-html">What can I do with HTML</a>
</li>
<li>
<a href="#how-long-does-it-take">How long does it take to learn HTML?</a>
</li>
<li>
<a href="#wrapping-up">Wrapping up</a>
</li>
</ul>
</body>
</html>
You can also nest the lists. For instance place another list inside an <li> element.
<html>
<head>
<title>The ultimate HTML guide for us dummies - Decoding Web Development</title>
</head>
<body>
<ul>
<li>
Front-end
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>
Backend
<ul>
<li>PHP</li>
<li>Node.js</li>
<li>Ruby</li>
</ul>
</li>
</ul>
</body>
</html>
The anchor tag: <a>
You use an anchor tag to make a link on a web page, like this one.
The <a> element is probably the most important tag in HTML. It's the reason why HTML content is called hypertext.
The text enclosed by the anchor tag is called the link text. It's the text user clicks on:
<a href="#">Link text</a>
The above link won't take you anywhere, though. The reason is we haven't specified any destination URL.
The destination URL is defined by the href attribute. I'll explain the HTML attributes in detail in the next section, but here's a quick explanation:
HTML attributes are added to the opening part of each tag to customize the behavior of the respective element.
Some attributes are optional, and some are required. The href attribute is a required attribute, which specifies the destination URL of an anchor tag.
Its value can be relative URL or an absolute URL.
Absolute URLs are in the form of a full URL including the scheme (e.g., https://), domain name (e.g., www.decodingweb.dev), and the path (e.g., /the-ultimate-html-guide-for-dummies).
For instance, the absolute URL to this very page is:
https://www.decodingweb.dev/the-ultimate-html-guide-for-dummies
Absolute URLs are best when you want to link to another website.
Relative URLs, however, just include the path part, like /the-ultimate-html-guide-for-dummies. This path is relative to the current page's domain. So if the user clicks on a link with a relative URL, the domain of the current page is considered.
You usually use relative URLs to link to other pages of your website (internal links).
You can use the anchor tag to create:
- Internal links: to go to a different page on your website
- External links: to go to a page on a different website
- Jump Links: to jump to a section of the current page
👉 Internal link example:
<p>If you want to read about HTTP you can read our <a target="_top" href="/http">comprehensive HTTP guide</a></p>
👉 External link example:
<p>If you want to learn more about filesystems, this <a target="_blank" href="https://www.freecodecamp.org/news/file-systems-architecture-explained/">comprehensive guide on file system and boot loaders</a> will put you in the right path</p>
👉 Jump-link:
If you've already install your text editor, you can skip the next paragraph and jump straight to <a href="#the-good-part">the good part</a>
<h2>Installing code editor</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget nunc sed dolor ultrices maximus vitae viverra felis. Fusce eu pharetra turpis. Quisque molestie tincidunt rutrum.
</p>
<h2 id="the-good-part">The good part</h2>
<p>
Vestibulum sagittis tempus purus, vel condimentum purus consectetur et. Sed et arcu lacus. Curabitur blandit odio nisi, non aliquet magna rutrum quis.
</p>
You can also point to an email address with the mailto: URI scheme:
If you have any questions or comments, <a href="mailto:hi@decodingweb.dev">just drop us an email</a>
When a user clicks on the link, their default email client will open with your email address automatically set as the recipient.
They can also point to a phone number, which open up your keypad when you click on them from your mobile phone browser.
☎️ Any questions, <a href="tel:YOUR_PHONE_NUMBER">give us a call</a>
Link text can be anything, but it's a good practice to choose a text, which clearly describes the destination page.
<p>❌ To learn more about HTTP click <a href="https://www.decodingweb.dev/http">here</a></p>
<p>✅ If you want to learn more HTTP this <a href="https://www.decodingweb.dev/http">comprehensive guide on HTTP</a> will put you in the right path.</p>
The image tag: <img>
The <img> HTML element is pretty straightforward; It inserts an image into the document.
Just like the anchor element, the <img> element has a required attribute too; The src attribute.
The value of src is the path of the image you want to embed into the document.
<html>
<head>
<title>The ultimate HTML guide for us dummies - Decoding Web Development</title>
</head>
<body>
<img src="https://www.decodingweb.dev/wp-content/uploads/2020/11/15.jpg">
</body>
</html>
Another attribute that you should always have on your img elements, is the alt attribute. The alt attribute contains a description about the image. It isn't required like the src attribute, but including it is one of the best SEO and accessibility practices.
<html>
<head>
<title>The ultimate HTML guide for us dummies - Decoding Web Development</title>
</head>
<body>
<img src="https://www.decodingweb.dev/wp-content/uploads/2020/11/15.jpg" alt="A developer behind her laptop smiling">
</body>
</html>
A descriptive alt text helps visitors who are visually impaired understand what the image is about.
As a bonus, it also makes your images to be listed on the Google's image search page. This will bring bring you additional traffic.
Two other attributes which aren't required but strongly recommended are width and height attributes.
By using width and height attributes, you can define your image dimension even when it's not loaded. It can prevent layout shifts, which happen when an image loads and changes the position of other elements.
<html>
<head>
<title>The ultimate HTML guide for us dummies - Decoding Web Development</title>
</head>
<body>
<img src="https://www.decodingweb.dev/wp-content/uploads/2020/11/15.jpg" alt="A developer behind her laptop smiling" width="362" height="263">
</body>
</html>
Layout shifts distract users, and might even make frustrated users leave the page.
The img element has other useful attributes, which are well explained on MDN HTML guide.
Learn HTML attributes
You can customize an elements's appearance or behavior with HTML attributes.
Do you remember href, src, with, height of the image element in the previous examples?
Each attribute is in the form of a key-value pair separated by a = symbol. The attribute value is quoted with double quotes:
Som text here
<tag-name attribute-name="attribute-value">
Some text here
</tag-name>
Som text here
You include attributes in the opening part of each tag. If there are multiple attributes, you can separate them by a space, or put each into a new line.
Here's an example of an image element with src, alt, width, and height attributes:
<img src="https://www.decodingweb.dev/wp-content/uploads/2020/11/15.jpg"
alt="A developer behind her laptop smiling"
width="362"
height="263">
There are many HTML attributes, but you shouldn't memorize them. Over time, you'll learn all the HTML attribute you usually use on your pages. And you can always look them up.
An easy way to understand them is to categorize them into the following groups:
- Required attributes
- Optional attributes
- Common attributes
- Event attributes
Required attributes
Some elements require at least one attribute to function.
You already know some of them. Images need at least a src attribute. And anchor elements won't take the users anywhere without a href attribute,
And you know what? Knowing these two required attribute is enough for the time being.
Optional attributes
Most attributes are optional. They customize the default appearance or role of those elements.
For instance the anchor element has several optional attributes. One of these optional attributes is the target attribute. You can assign a set of values based on your needs.
For instance, to make a link open in a new tab, you can set the target attribute to _blank:
<p>If you want to read about HTTP you can read our <a target="_blank" href="/http">comprehensive HTTP guide</a></p>
A note on security:
Whenever you set the target to _blank, you need to set another rel="noreferrer" as a security measure.
<a href="https://www.google.com"
target="_blank"
rel="noreferrer">Google</a>
This prevents the destination page to have access to the context of the referring page, which is your page.
The other examples of optional attributes are width and height, and alt attribute, which you already used with the image element.
Global attributes (which I'm about to explain) are also considered optional attributes.
Global attributes
Some attributes can be used with every HTML elements. The most commonly-used ones are id, class, and style.
The id attribute is used to assign a document-wide unique identifier to an element. Some JavaScript frameworks rely on this id to work. You don't need to know more about it today.
With the class attribute, however, you assign CSS selectors to the element. Developer use CSS selectors to apply CSS styles to HTML elements.
This is not a CSS guide, but how about I show you a simple example?
Let's do it.
Imagine we have a simple anchor element:
<a href="#">Link text</a>
It looks basic, right? In the absence of CSS, the web browser uses its internal stylesheet.
But let's add a bit of style to our link.
CSS styles are in the form of a selector with a block of CSS properties.
Let's say we want to give our a link a nice color, a different font, and slightly bigger. Here's how it's in CSS.
.my-stylish-link {
font-family: Helvetica;
font-size: 1rem;
color: #44bd32;
}
In the above CSS code, my-stylish-link is a CSS selector. And everything within the curly brackets are CSS styles. The selector can be anything.
Now let's apply the above CSS to our anchor element via the my-stylish-link selector:
<a href="#" class="my-stylish-link">Link text</a>
Bingo! Our link is styled.
You can add more CSS selectors to the class attribute. You just need to separate them by a space.
The style is also used to assignCSS styles directly to the element without using CSS selectors. This styles are known as inline styles.
If we wanted to apply the above styles without using class selectors, we would do it like this:
<a href="#" style="font-family: Helvetica; font-size: 1rem; color: #44bd32">Link text</a>
Web developer prefer CSS selectors over inline styling; Using CSS selectors is much easier to maintain. The inline-styles are good as long as their are applied automatically by JavaScript code.
HTML have 100s of tags, but how many do I really need to learn?
The short answer is not all of them.
You learned some of the important tags (with their attributes) in the previous sections.
But there are more to learn today.
However, since this guide isn't an HTML reference, I'll try to include the most used ones.
Just like the HTML attributes section, we'll study group by group.
HTML tags can be grouped by their function:
- Document structure elements
- Document meta data
- Content sectioning
- Content organizers
- Inline text annotations
- Images & multimedia
- Embedded content
- Forms
Now that we have our list, let's get to know them.
Learn HTML document structure elements
Document meta data
As you probably remember from the previous sections, the metadata tags contain information about the structure and purpose of an HTML page.
Metadata tags must be placed within the <head> tag.
These meta data are crucial for web browsers to parse and render a page. They also help search engines understand the purpose of your page.
You already the <title> metadata tag, but let's see what's left to cover.
What does the <meta> element do?
The <meta> element provides web browsers and search engines with valuable information about the page.
A meta element describes a specific aspect of a page.
Page's description
One of the most important types of meta elements is meta description.
This element provides a brief summary of your page in a few lines - via the name and content HTML attributes:
<html>
<head>
<title>Your page title</title>
<meta name="description" content="A brief summary about your page">
</head>
<body>
</body>
</html>
As you can see, the tags within <head> don't have an output.
Search engines might choose to display this description under your page title on the search results page.
HTML pages usually have multiple meta elements with different name and content values.
Character set
Do you want to display any character on your page?
With meta charset element, you can define your page's character set to ensure every characters (from any alphabet) is displayed correctly.
The most common character set, which supports most languages is UTF-8.
<html>
<head>
<title>Your page title</title>
<meta name="description" content="A brief summary about your page">
<meta charset="utf-8">
</head>
<body>
</body>
</html>
Control layout on mobile browsers
The next step is preparing your page to be rendered with proper zooming and sharpness across all devices.
To do that, all you need is the viewport meta element, which controls the the page layout based on the user's device.
This element was first introduced by Apple on Safari, but then, other web browsers implemented it too.
This is the most common form of the viewport element you can find on many web pages:
<html>
<head>
<title>Your page title</title>
<meta name="description" content="A brief summary about your page">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
</body>
</html>
The above element instructs the browser to render the page based on the device's width, and set the zooming to the scale of 1 (based on the device type).
All responsive websites today must have this element included in their <head> section.
CSS styles on your page: <style>
As you probably remember from the previous sections, you apply styles via the CSS selectors (values of id or class attributes).
You have two places to define your CSS styles. In an external file, or within the <style> tag of your HTML page.
Here's how we would define a CSS style on a page:
<html>
<head>
<title>Learning HTML is fun</title>
<meta name="description" content="A brief summary about your page">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.my-stylish-link {
font-family: Helvetica;
font-size: 1rem;
color: #44bd32;
}
</style>
</head>
<body>
<a href="#" class="my-stylish-link">Link text</a>
</body>
</html>
Whenever you assign a CSS selector to an HTML element (via class or id properties), the web browser tries to locate the respective stylesheet. Is it within the <style> tag on the page? Or in an external file?
Most developers prefer to keep their stylesheets in an external file and embed it onto the page via the <link> element (more on this below).
Why should I write my CSS in a different file while I can simply write it within the <style> tag? you may ask.
CSS code tend to grow exponentially as you add more elements and style them. Having your HTML and CSS stored in the same file will make your file harder to maintain. While storing your CSS stylesheets in an external file keeps your HTML code light and clean.
However, placing critical CSS (the CSS required to load your page correctly) stylesheets within the <style> tag is a good performance practice. You can bookmark this Google article about critical CSS when you think it's time.
Loading resources: <link>
The <link> element is mostly used for linking external stylesheets rather than defining them within the <style> element.
Here's how we link to an external stylesheet with the <link> element.
<link> element has other functionalities too. For instance, you can define a favicon for your page. A favicon is the small icon displayed on the browser tab next to the page title.
Here's how it's done:
...
Learn HTML content sectioning
The elements in this category allow you to organize your page content into sections, like header, navigation, sidebar, footer, etc.
Having your content as logical sections help web browsers and search engines identify each section of the page more easily.
<header>
You use the <header> element to contain the introductory content of your page or other sections.
Placing your introductory content inside a header element isn't required.
But it's a semantic element, which helps web browsers understand the outline of your page. This also helps other user agents such screen readers (or other assistive technologies) to deliver a better for people with disabilities.
What type of content should I put inside a header element? you may ask
If the header element isn't the child of a section (I'll cover this later), it'll have the role of a banner; This means the browser will consider it as the global site header.
Technically, you can place anything inside the global site header, and it'll be valid. However, you usually place the company logo, the slogan, navigational links, search forms and similar elements.
Other page sections, like <article> can also have a header too. Such headers don't have the banner role, and will be considered as sub-section header. We'll get to this shortly.
<nav>
The <nav> element is another semantic element, which represents the navigational links on a web page. These links can be links to other pages, sections of the page, or other website.
Links like "About us", "Our services", "Contact us" can be placed inside a <nav> element.
A page can have multiple <nav> elements. For instance, one for your main navigation, and one of the table of contents of an article on your page.
The <nav> element of your main website links can be placed within the <header> element as it's a component of your global site header.
Let's add a navigational menu to our page with some links.
<aside>
The <aside> tag usually represent a section of the page, which is directly related to the main content. For instance, sidebars of a page, or ad units when you want to monetize your website traffic.
<main>
The <main> HTML element represents the main content of the page.
Unlike other sections such as <aside> and <nav>, which remain the same across pages, the main content is usually unique to each page.
Depending on the page's main topic, this section can contain an article, a functionality, image galleries, videos, or other types of content.
This is the content that a user has visited your page to see.
Let's add a hypothetical article to our page, with an <h1> and a <p> tag:
...
<article>
The <article> HTML element represents a piece of independent content on a page.
What does independent content mean? you may ask.
It can be any piece of content that you can reuse. A user review, an article, a comment can be placed in side an <article> element.
For instance, if you're on a blog page, which lists 10 articles per page. Each of those articles can be in their dedicated <article> element.
Or if there are user comments under each article, each comment can be placed inside a separate <article> element.
Every piece of content that's meaningful on its own, like a user comment (which contains name, email, and comment), or a full blog article (which contains title, author name, publish date, and article content).
<footer>
The <footer> HTML element represent the footer info of its parent section.
For instance, if it's used directly under <body> root element, it's considered as the footer of the page. Footer of the page usually contains copyright data, contact information, and links to other pages.
<footer> can also be the child of another section like <article>. In that, case it can contain information about the author or creator of the content within the <article> element.
<address>
You usually place the contact information of a person or a company within address tag.
Well, it's not a requirement, but it's a great practice from an accessibility perspective. It's more search-engine friendly as well.
The contact information can be any type of contact information, including the person's name, email address, phone number, website, social media handle, postal address, or even geographic coordinates.
You can use it in a contact us section (like in the global <footer> of the page) or in an article to include the author info (the <footer> section of the <article>).
Let's do it for our article this time:
...
Learn HTML content organizers and styling wrappers
<div>
The <div> HTML element isn't a semantic element like the sectioning elements above. It's a generic container that you can wrap any elements with. It doesn't change the layout of the page if it's not styled.
You usually wrap a group of element when you want to make a box around a set of elements. For instance, an alert box.
So whatever you want to display as a box with some contents in it, you can enclose them within a <div> element, and add some CSS styles to it.
<div> elements can be used instead of the semantic elements we discussed earlier. However, using semantic sectioning elements are more preferred over <div> elements in terms of accessibility.
<table>
The <table> HTML elements is one of the most important elements on a page. They are used to display tabular data - in the form of rows and columns.
The <table> element enclose a set of child tag, which can only be used with a pair of <table> tags.
For instance to add a row in the table, you need to use the <tr> tag. "tr" stands for table row.
Inside a <tr> element, you can have table cells, which are represented by <td> element. "td" stands for table data.
To add a heading for a row or column, you can use the <th> element, which stands for table heading.
Depending on the layout of the table, table headings can either be in the first row:
...
Or as the first element of each row:
...
A table doesn't have any border by default. To see the borders, you can use the "border" attribute and set to 1. However, you normally use CSS to style a table.
Tables are a perfect choice for displaying two-dimensional data.
Learn HTML inline text annotations
<strong>
The <strong> HTML element is another inline element, which indicates that its content is of high importance, crucial or urgent. Like "Be cautious, it's highly flammable"
You usually use <strong> to wrap the important words and make them stand out from their surrounding text.
Web browsers render <strong> elements as bold text.
You can also use as a label of a block of text like:
Note: ...
Even though, the browser displays <strong> content as bold type, you shouldn't use it just to make a word bold. If you just want to draw attention to a word, you can wrap in in a pair of <span> tags and use CSS (font-weigh property) to make it bold.
Alternatively you can wrap it in a pair ob <b> HTML tags, which does the same thing without writing any CSS.
The bottom line is always use <strong> if your text is important, not just to format it as a bold text.
Let's use it in our page:
...
<em>
There are times you want to emphasize a word or group of words, and influence how users read a specific word or a group of words a in a block of text.
Browsers display <em> content as italic type.
<time>
This HTML tag represents time at which an event happened. For instance you can place the publication date of article in this element.
It also has an HTML attribute called datetime, which takes a standard date format. It's a good SEO practice to add this attribute to your <time> elements.
Again, you could just use <span> to enclose a date. But <time> is semantically more correct because it's been design to contain date and time value.
<span>
We can name the <span> HTML element as the inline version of <div> elements. You can use it to enclose a set of related HTML elements, and apply CSS styles to them. For instance, change their colors, font-size, etc.
If there's a semantic equivalent for your use case, you should always use that instead of <span>. For instance, it's better to enclose contact information within a pair of <address> tags rather than a pair of <span>s.
Learn to embed HTML images, video, and audio
<video>
The <video> HTML element is similar the <img> element but it's for videos.
It embeds a media player on your page, which can playback a video.
It wraps a <source> tag, by which you can refer to a video file.
...
You can have multiple <source> tags to refer to different formats of the same video file. And the browser will choose the first one that it supports.
The <video> element, has several attributes that you can use to configure the behavior of your player.
For instance "autoplay" can be used to determine if you want the video to be played back automatically. Or "loop" to keep replaying the video.
Please note, autoplaying an audio might be annoying to some users.
...
You can also include a text within the <video> tag to be displayed in case the user's web browser doesn't support video playback.
...
The <video> tag can play audio files too. But the <audio> tag is a better option to do it.
If you're curious to know more about them, you can checkout this MDN guide on video and audio content.
<audio>
The <audio> HTML element is pretty much like the <video> element.
But it's only for playing back audio files.
You specify the track either by using the "src" attribute of the <audio> opening tag itself or via multiple <source> tags, in case you want to include multiple audio formats for the same track.
Just like the <video> tag, you can use the attributes like "autoplay", "loop", "muted", "controls", etc.
If you're curious to know more about them, you can checkout this MDN guide on video and audio content.
Learn HTML forms
<form>
The <form> element is a container for a set of interactive elements used to collect user input. For instance , a login form, which has two <input> elements to collect username and password.
You've probably filled out many web forms before.
The two important attributes of the <form> element are "action" and "method".
The action attribute usually points to an endpoint (a URL) on the server, which is responsible for processing the submitted data. For instance, to authenticate the user (based on their username & password), or to store an email address in a mailing list, etc.
You don't have to worry about the server-side programming for now. Just knowing how user data are sent to the server via the "action" attribute is enough for today.
The "method" attribute defines in what way the data should be transmitted to the server. Two common values for the "method" attribute is "GET" and "POST". If you don't define a method, "GET" is assumed by the web browser.
Most of the time, It doesn't matter which one you choose. If the method is "GET" (which is by default), the submitted data are sent to the server as URL parameters, like so
https://www.decoingweb.dev/subscribe?name=chris&email=chris@test.com
However, if POST is used, the data is sent as the HTTP request body. This is usually the format you use when you want to store data on the server or change the server state. Examples are posting comments, subscribing to mailing lists, registration forms, contact us forms, login forms, or adding new items to an inventory.
How would I know which one to choose? you may ask.
As rule of thumb is, if after submitting the form multiple times nothing will be changed on the server, go with GET. But if something will change on the server (user info is changed, a new item is added, etc) go with POST.
You might hear about other methods such as DELETE, PUT, HEAD, OPTIONS, PATCH, CONNECT, and TRACE. You don't need them for now, but if you're curious this MDN guide on HTTP request methods will put you on the right path.
A <form> element without children doesn't have any output
<input>
The <input> HTML tag is one of the main form tag in a form used to collect user data.
The type of data they collect is defined by their "type" attribute.
Some of the most used input types are as follows:
- text: This input collect single line text values. Usually used to capture names, addresses, etc
- password: It's the same text, but its value is masked as a security measure.
- email: Email is a variant of text, but it's used for email addresses. If the entered email isn't valid, it'll display an error, and prevent the form from submitting (this built-in validation should be disabled if you want to have a custom JavaScript-based validation).
- number: This field is used for collecting numerical values. If the entered number isn't valid, it'll display an error, and prevent the form from submitting (this built-in validation should be disabled if you want to have a custom JavaScript-based validation)
- checkbox: Unlike the other fields that are in the form of text fields, checkboxes, are in the form of small squares, where you can click. You use checkboxes to allow users select one or more options. For instance, to select their top 5 hobbies, or agree to receive promotional emails from a website.
- radio: A radio inputs (a.k.a radio buttons) come in groups, which have the same "name" property. They are used when the user should pick only option among a set of option. For instance to choose the color of a car.
Here's how they look on a web page:
...
You can check the other types on MDN input types table.
<label>
With a <label> element, you can add a caption to a form control.
To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id.
<select>
This element is one of the most used controls of a web-based form. When the user clicks on a <select> element, it displays a menu of options.
You create each option of a <select> element with <option> element.
The text between <option></option> is what the user sees when the <select> menu is displayed.
Each <option> element should have a "value" property containing the value of the selected item. The user doesn't see this value, though. It's the value sent to the server as the select value of the respective <select> element.
If an <option> element doesn't have a value, the enclosed text is assumed as the value.
You can add a "selected" attribute to an option, to make it selected by default.
A form can have multiple <select> elements. The <select> HTML element is a good alternative for checkbox and radio groups when there are many options. For instance, the list of countries, or professions if the user need to specify their job.
...
<textarea>
A <textarea> element creates a multi-line text box to allow users write longer text, like comments, or emails.
...
You also have control over the minimum and maximum length of the user input with "maxlength" and "minlength" attributes:
The "minlength" and "maxlength" attributes will only be enforced if the textarea has a value. If the user leaves the <textarea> empty, the form will still be submitted. To prevent it, you need add the "required" attribute to the <textarea> element
Just like input text boxes, you can add a placeholder to your textarea.
<button>
The <button> element adds a button to your page. The enclosed text will be the label of the button.
...
The most important attribute of the button is the "type" attribute, which takes the following values:
- submit: If you don't define this attribute, the button type will be "submit"; When pressed, it'll submit the form and sends the user input to the server side code defined in the "action" attribute of its parent form.
- button: button doesn't add any behavior to the button. This value is used when you want to attach a JavaScript functionality to the button.
- reset: You can use the reset type if you want to add a reset button to your form. When a reset button is pressed are the form fields are reset.
The appearance of a button slightly differs across browsers as each browser uses its default stylesheets to style the button. Web developers use CSS to style buttons in a consistent way.
Nesting HTML tags
Imagine you have already annotate a piece of text with a <strong> tag to make it of "high importance".
It's a very <strong>hot <em>drink</em></strong>
Now, if you want to stress on a specific word, you can nest an <em> inside the <strong>:
The only thing you need to worry about is that when you want to close a tag, you need to make sure all it's children has already been closed.
For instance, the following markup isn't valid:
It's very <strong>hot <em>drink</strong></em>
In the above markup, the strong was closed before its child.
Parents always make sure their children are onboard before closing the door!
Is HTML case-sensitive?
HTML tags are case-insensitive. It means <body>, <BODY>, and <bOdY> will be considered the same. No matter how you write them, the web browser will eventually parse them <body>.
However, it's a good readability practice to write everything in lower case.
There's one exception here.
File names!
For instance, to create an element, we need to assign a path to an image to the src attribute of our HTML element.
Depending on the operating system of your hosting server, the file name might be case-sensitive. For instance, on a Linux server, image.jpg is different than Image.jpg. In that case, your image would be broken.
File names aren't case-sensitive on Windows machines, though.
To avoid any confusion, always name your files by lower-case letters. This applies to images, videos, audio files, JavaScript, CSS or any type of external file that you're embedding onto your web page.
What are HTML entities?
HTML entities are strings used to display special characters such HTML reserved characters or characters that you don't find on a standard keyboard.
HTML entities start with an & and end with a ;.
Imagine you're writing an HTML tutorial, and you want to display an anchor tag. You don't want to display the output of the tag, but the tag syntax itself.
If you just write the tag normally as you write HTML, your web browser would render it as a normal tag.
Imagine this is your tutorial:
<p>To create an image, you need to use the <img> tag.</p>
<img src="https://www.decodingweb.dev/wp-content/uploads/2020/11/15.jpg">
As you can see, the browser is displaying an output that you don't expect. You're trying to teach your readers how to embed an image, but the browser is rendering the output.
The reason is the greater than (>) and lesser than (<) signs are reserved in HTML and used for tags.
That's two HTML entities > (for greater than), and < (for lesser than) come to the rescue.
Let's see what we get this time:
<p>To create an image, you need to use the <img> tag.</p>
<img src="https://www.decodingweb.dev/wp-content/uploads/2020/11/15.jpg">
Now the user can see the source code, rather than the output - thanks to HTML entities.
Another example would be the copyright symbol, which you don't find on a standard keyboard. To display it, you write it as ©.
© 2022. All rights reserverd.
Every time you find it difficult to display a special character, HTML entities might be the way to go.
You can check out the official list of HTML character entities every time you need to use one.
Block-level v.s. inline HTML element
I know! I should have explained this concept at the beginning of this guide.
But I didn't want to distract you with more details, as it wouldn't help your HTML learning process.
But now it's time!
From a presentational aspect, HTML elements are categorized as either inline-level or block-level elements.
Inline HTML elements are like words in a line; They take as much width as necessary and don't break the line.
Many elements such as <img>, <label>, <span>, <a>, <input>, <strong>, <em> etc are inline-level.
If you have several inline elements on your page, the browser displays them on the same line by default (unless you change this default behavior with CSS display property).
Let's put this inline-level elements on a page to see how the browser renders them:
<img src="https://www.decodingweb.dev/wp-content/uploads/2020/11/15.jpg" style="width: 15%">
<label>I'm a label</label>
<span>I'm the span</span>
<input type="text">
<input type="checkbox">
<button type="button">Button</button>
<a href="#">I'm the link</a>
<strong>I'm strong</strong>
<em>I'm important</em>
As you can see all of them are displayed on the same line. We say inline elements don't break the content flow.
Block-level elements, however, break the content flow, and are displayed on a dedicated line.
If we replace <span> with a <div> element, here's what happens:
<img src="https://www.decodingweb.dev/wp-content/uploads/2020/11/15.jpg" style="width: 15%">
<label>I'm a label</label>
<div>I used to be a span element, but now I'm a div element and need my own line in the content flow.</div>
<input type="text">
<input type="checkbox">
<button type="button">Button</button>
<a href="#">I'm the link</a>
<strong>I'm strong</strong>
<em>I'm important</em>
With CSS you can redefine this behavior. For instance, a block-level element can be changed to an inline element and vice versa.
Inline elements are supposed to contain data and other inline elements, but they can't contain a block-level element. For instance a <strong> element can contain an <em> element, but it can't contain a <div> element. Even though, the browser wouldn't complain if you do so, it'll violate the HTML5 specifications.
<p>
✅ <strong>You can <em>do this!</em></strong>
</p>
<p>
❌ <strong>You shouldn't <div>do this!</div></strong>
</p>
How a web developer starts creating an HTML page?
Anytime you want to create an HTML page, here are the steps you'll usually take:
- Come up with a wireframe
- Paste in your boilerplate code to start with
- Choose and place your layout tags
- Start writing your content with HTML
What is a wireframe?
A wireframe is a visual guide, which represents the HTML page layout and the arrangement of your content and functionalities on the page.
Simply put, it's just a drawing of how you want your page to look like, according to your idea or your business goals.
A wireframe is just an outline of your page, and you doesn't have to include the details such as the actual text or colors. You can either draw it with pencil on a piece of paper, on a whiteborad, or you can use a wireframing software.
The goal is to know what exactly you're going to build in advance.
What is an HTML boilerplate code?
Boilerplate code in computer programming act as a template when starting to write code. They are basically sections of the code that are repeated in all programs.
In case of HTML, the boilerplate code is the skeleton of the page. No matter what your final HTML looks like, the skeleton is the same across different pages.
To avoid writing the same thing over and over, you can save an HTML skeleton that you see yourself repeating for every page; Then, reuse it every time you create a new HTML page.
The purpose, is just to save you some keystrokes and obviously time.
Placing the sectioning tags
Next step, is to create the layout based on your your wireframe. This step usually requires CSS, but we're not focusing on CSS today. HTML5 has defined several tags for different sections of your layout, for instance <header> (please note it is different than <head> tag), <side> (for sidebar), <footer> (for footer), and <container>.
And finally you get to writing your actual HTML content, with the help of HTML tags.
Reza Lavarian Hey 👋 I'm a software engineer, an author, and an open-source contributor. I enjoy helping people (including myself) decode the complex side of technology. I share my findings on Twitter: @rezalavarian
Never miss a guide like this!
Disclaimer: This post may contain affiliate links. I might receive a commission if a purchase is made. However, it doesn’t change the cost you’ll pay.