HTML is the essential language you must learn if you aspire to become a web developer.
Why?
Because HTML serves as the foundational language for building websites.
You’ve likely encountered HTML before, but revisiting it is always beneficial.
In this guide, we’ll delve into HTML from the ground up, ensuring you can create your own HTML pages.
Let’s begin!
What is HTML?
Let’s explore the definition of HTML as described on Wikipedia:
HTML, or HyperText Markup Language, is a markup language used for creating web pages. 1
Does that make sense?
If not, let me elaborate…
Essentially, HTML is a language that employs markup, or annotations, to construct web pages.
These annotations, or markup, are what we refer to as Tags.
HTML’s role is to define the structure and content of a website.
Think of it this way…
HTML is like the bricks used to build a house. These bricks are arranged to form the basic foundation.
The relationship between HTML, CSS, and JavaScript in web development.
When creating web pages, HTML doesn’t work in isolation. It’s complemented by other languages, namely CSS and JavaScript.
CSS is a specialized language dedicated to enhancing the visual presentation of websites.
JavaScript, on the other hand, is responsible for bringing websites to life. With JavaScript, we can implement interactive features and dynamic effects on a website.
For this guide, we’ll focus primarily on HTML. If you’re interested in learning CSS and JavaScript, you can explore those later.
I assume you now have a solid grasp of what HTML is and its significance in web development.
Next, to deepen your understanding, we’ll explore the history and origins of HTML.
History and Origins of HTML
For a comprehensive history of HTML, you can refer to:
In this guide, we’ll cover a concise history.
The story of HTML begins in 1980…
When a scientist named Tim Berners-Lee was working at CERN.
Tim Berners-Lee in 2009, the inventor of the World Wide Web and key figure in HTML’s development.
CERN isn’t a technology or internet company. CERN stands for Conseil Européen pour la Recherche Nucléaire, which translates to the European Organization for Nuclear Research.
The CERN website in 2020, showcasing the organization where HTML was conceived to facilitate information sharing.
Researchers at CERN needed a system to share research documents among themselves.
Tim attempted to create ENQUIRE, a hypertext software for document sharing.
In 1989, Tim proposed the idea of internet-based hypertext, which would become the precursor to HTML.
Tim then initiated a new project with his colleague Robert Cailliau, a system engineer at CERN. However, this project wasn’t officially adopted by CERN.
Tim Berners-Lee (left) and Robert Cailliau (right), collaborators in the early development of the World Wide Web and HTML.
In late 1991, Tim Berners-Lee published a document titled: “HTML Tags”.
This document outlined the initial 18 tags that formed the foundation of HTML.
HTML’s design was based on the concept of a markup language known as SGML (Standard Generalized Markup Language).
SGML is an international standard for creating documents with markup for elements like paragraphs, lists, headings, and more.
In essence, HTML is an implementation of SGML.
Looking at HTML, tags like <p>, <ul>, <li>, and <h1> through <h6> originate from SGML. However, not everything in HTML comes from SGML.
For example, Hyperlinks, are purely Tim Berners-Lee’s innovation.
The HTML concept was then disseminated through a mailing list and quickly gained attention from computer scientists worldwide.
HTML Evolution and Versions
HTML has gone through several versions, from its earliest iterations to the latest. Here’s a timeline of HTML versions:
[Draft]HTML 1.0 (June 1993): The first version of HTML, never officially released.- HTML 2.0 (November 24, 1995): The second version and the first officially released version, published by the IETF.
[Draft]HTML 3.0 (March 28, 1995): This version failed to gain traction due to extensive changes that sparked debate.- HTML 3.2 (January 14, 1997): The first official version released by the W3C.
- HTML 4.0 (April 24, 1998): An evolution of the previous version.
- HTML 4.01 (December 24, 1999): A refinement of HTML 4.0.
- XHTML 1.0 (January 26, 2000): A reformulation of HTML 4.01 using XML principles.
- XHTML 2.0 (August 2002—July 2006): The second version of XHTML, ultimately discontinued.
- HTML 5 (October 28, 2014): The current standard version of HTML.
Versions marked as [draft] were never officially released to the public and remained specification drafts.
Therefore, [draft] versions are not used for web development.
So, which version should we use?
Naturally, the latest version: HTML 5.
Tools for Learning HTML Coding
Now, it’s time for hands-on practice!
But first, you need to prepare the necessary tools for practice.
Here are the tools you’ll need:
1. Text Editor for Writing HTML
A text editor is where you’ll write HTML code. You can use any text editor you prefer.
Notepad is acceptable, Notepad++ is also fine…
Notepad++, a popular free text editor that can be used to write HTML code.
Regardless of the text editor, the essential requirement is its ability to create and edit HTML documents.
However, for this guide, we’ll be using Visual Studio Code as our text editor. It’s a powerful and widely used code editor that simplifies the coding process.
2. Web Browser for Opening HTML
A web browser is used to view your HTML files. You can use any web browser you like.
A web browser displaying an HTML file, essential for viewing and testing web pages.
My recommendation is to use the latest version of a web browser, especially since we’ll be working with the latest HTML version.
Firefox or Google Chrome are excellent choices and should suffice.
Creating Your First HTML Document
Now, it’s your turn to create your own HTML document. The process is remarkably simple.
Let’s start by opening your text editor and typing in the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning HTML #01</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>After typing the code, save the file as hello-world.html.
Saving an HTML file as “hello-world.html” in a text editor.
Tip: If you’re using Notepad on Windows, save the file name with quotation marks "hello-world.html" to ensure the extension is .html and not .txt.
Alternatively, you can enable the show extension feature in Windows Explorer to see file extensions.
To do this, go to the View menu and check File name extensions.
Enabling file name extensions in Windows Explorer to ensure correct HTML file saving.
Okay, moving on!
Now, try opening the hello-world.html file with your web browser. You should see:
The “Hello World!” HTML page displayed in a web browser, demonstrating a successful first HTML document.
Congratulations! 🎉
You’ve successfully created your first web page with HTML.
Now, it’s my turn to explain the code above. But before that, let’s discuss HTML file naming conventions.
HTML File Naming Conventions
There are several important considerations when naming HTML files:
1. HTML File Extension
Every HTML file must have the extension .html, .xhtml (for XHTML), or even just .htm. Without these extensions, web browsers won’t recognize them as HTML files.
For example, consider a file named hello-world.txt.
A .txt file opened in a web browser, showing plain text content instead of rendered HTML.
It’s clear that this isn’t an HTML file; it’s just a plain text file. Consequently, the browser displays the file’s content as is, without interpreting it as HTML.
2. Special Name for Homepage
If you’re creating a homepage for your website, it’s best practice to name it index.html. This is because web servers are typically configured to automatically load index.html when a website is accessed without specifying a particular page.
For instance, when you visit www.carcodescanner.store, the web server will look for and serve the index.html file located on the server.
3. Things to Avoid…
Using Spaces
HTML file names often appear in URLs. To create cleaner and more user-friendly URLs, it’s advisable to avoid spaces in HTML file names.
Spaces in URLs are typically automatically encoded as %20.
Spaces in a URL are automatically encoded as ‘%20’, which is less readable.
Instead of spaces, you can use hyphens (-) or underscores (_) to separate words in file names.
Avoid Being “Alay” (Excessively Informal)
Use standard and conventional file names for your HTML files. Avoid using uppercase letters, mixed case, or symbols.
Examples to avoid:
HeLLoWORLD.htmlda*#$.html
While these names might technically be valid, they are less readable for both humans and machines.
Alright, next, we’ll dive into understanding the HTML code itself.
Basic HTML Structure
Here’s the HTML code we just created:
The basic structure of an HTML document, highlighting the DOCTYPE, html, head, and body tags.
HTML code always begins with a DOCTYPE declaration, followed by the <html> tag, which contains the <head> and <body> tags.
Looking closely, the basic structure of HTML code comprises three essential parts:
- DOCTYPE Declaration
- HEAD Section
- BODY Section
Let’s explore each part in detail:
1. DOCTYPE Declaration
Take a look at the code on the first line: <!DOCTYPE html>.
This is the DOCTYPE declaration, which specifies the document type and version. In this example, we’re declaring that this document is of type HTML and uses HTML version 5.
Now, for HTML version 4, the declaration method is different.
Here’s an example for HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">Quite lengthy, isn’t it?
Is it permissible to omit the <!DOCTYPE html> code?
Yes, it’s technically allowed. The HTML document will still open in web browsers. However, doing so would violate the standard rules set by the W3C (World Wide Web Consortium).
By the way, you can check if your HTML code is valid at https://validator.w3.org/.
Validating HTML code using the W3C validator to ensure standards compliance.
Moving on…
Following the DOCTYPE declaration, we have the opening tag for HTML:
<html lang="en">The <html> tag is mandatory in every HTML document.
In this tag, we use the attribute lang="en" to specify that the content of this HTML document is in English.
Within the <html> tag, there are two more essential tags: <head> and <body>.
Finally, the HTML tag is closed with </html>.
2. HEAD Section
The HEAD section is the header of the HTML document. It starts with the <head> tag and ends with </head>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning HTML #01</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>The HEAD section typically contains tags that are read by machines rather than displayed directly on the web page.
These include:
- Meta tags for SEO (Search Engine Optimization)
- The
<title>tag for the page title - Links to CSS and JavaScript files
- And other metadata.
3. BODY Section
The BODY section is the part of the HTML document that is displayed in the web browser. It begins with the <body> tag and ends with </body>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning HTML #01</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>This is where you’ll write most of your content using various HTML tags. Currently, we’ve only added the <p> tag. The <p> tag is used to create paragraphs of text.
What’s Next?
That concludes this first guide on learning HTML coding…
If anything is unclear, feel free to ask in the comments.
Next, please proceed to learn about the definitions of tags, elements, and attributes:
For more HTML tutorials, please check the HTML Tutorial List
