Introduction to HTML
Welcome to the world of HTML! HTML, which stands for HyperText Markup Language, is the standard language used to create web pages and web applications. It’s a markup language that structures web content, making it meaningful and easily interpretable by web browsers. Let’s dive in and learn more about it.
What is HTML?
HTML is not a programming language but a markup language. Think of it as the skeleton that gives every webpage structure. It’s the backbone of any website and a crucial skill for web professionals. HTML stands for HyperText Markup Language and is the standard markup language for creating web pages. HTML describes the structure of a web page and consists of a series of elements. These HTML elements instruct the browser on how to display the content. They label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc. It’s like the stage director for your website, guiding the browser on what to display and where.
A Simple HTML Document
An HTML document is a plain text file that contains HTML elements. These elements are represented by tags, which label pieces of content such as “heading”, “paragraph”, “table”, and so on. Browsers do not display the HTML tags but use them to render the content of the page. Let’s visualize how an HTML document is structured: 
HTML Elements
An HTML element is defined by a start tag, some content, and an end tag. The HTML element is everything from the start tag to the end tag. Commonly used HTML elements include headings, paragraphs, images, links, and divs.
- Headings are defined with the
<h1>to<h6>tags. - Paragraphs are defined with the
<p>tag. - Images are defined with the
<img>tag. - Links are defined with the
<a>tag. - Divs, which are block-level elements and can be used as a container for other HTML elements, are defined with the
<div>tag.
HTML elements can also have attributes that provide additional information about the element. For example, the src attribute in the <img> tag specifies the source URL of an image.
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly. A browser does not display the HTML tags but uses them to determine how to display the document.
HTML Page Structure
Let’s take a closer look at a simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
This HTML document is composed of several elements. Let’s break it down:
<!DOCTYPE html>: This declaration defines the document to be HTML5. It is placed at the very beginning of the HTML document. It is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.<html>: This is the root element of an HTML page. It’s like the container that holds all the other HTML elements.<head>: The head element contains meta-information about the HTML document, including the title that appears on the title bar of the browser or the page’s tab. It does not contain any content that is rendered on the web page.<title>: The title element specifies the title of the HTML document. The title must be text-only, and it is shown in the browser’s title bar or as the name of the tab in the browser.<body>: The body element contains the content of the document, such as text, images, hyperlinks, tables, lists, etc. This is the part of the HTML document that is rendered in the web browser.<h1>: The h1 element defines a heading. HTML supports six levels of headings:<h1>to<h6>. The<h1>is the largest and most important, while<h6>is the smallest. In this example, “This is a heading” is a first-level heading.<p>: The p element defines a paragraph. In this example, “This is a paragraph.” and “This is another paragraph.” are two separate paragraphs.
In our HTML document, the content inside the <body> section is what gets displayed in a browser. This is where we put all the content that we want users to see when they visit our web page. This can include text, images, videos, games, playable audio tracks, or other resources.
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
See image below 
In the example above, the text within the <h1> and <p> tags — “This is a heading”, “This is a paragraph.”, and “This is another paragraph.” — is what users will see on the web page. On the other hand, the content inside the <title> element is not displayed on the page’s main canvas. Instead, it’s shown in the browser’s title bar or on the page’s tab. This is typically used to give users a high-level overview of what’s on the page.
<head>
<title>Page title</title>
</head>
In the example above, “Page title” is what users will see in their browser’s title bar or on the page’s tab. This helps users identify what page they’re on when they have multiple tabs open. Understanding the distinction between these two elements is crucial for creating effective HTML documents. The <body> is where you’ll put all the content that you want users to interact with, while the <title> is where you’ll put a concise summary of what users can expect from the page.
HTML History
HTML, or HyperText Markup Language, was first developed by Tim Berners-Lee in 1989 at CERN, the European physics research center in Switzerland. Berners-Lee invented HTML because he needed a way to share documents with his colleagues around the world. This marked the beginning of the World Wide Web. The first publicly available description of HTML was a document called “HTML Tags”, first mentioned on the Internet by Berners-Lee in late 1991. This version included just 18 HTML tags, including ones for headings, paragraphs, and links. HTML 2.0 was published as a standard in November 1995 by the IETF (Internet Engineering Task Force). This version formalized elements that had been introduced in the years since the first version of HTML, including forms. HTML 3.2, published in January 1997, was the first version developed and standardized exclusively by the W3C (World Wide Web Consortium). It dropped some features from the earlier HTML 3.0 and was less ambitious than previous versions in order to improve the level of agreement between software vendors. HTML 4.0, published in December 1997, introduced more elements and attributes, as well as the concept of ‘deprecation’ of older elements in favor of style sheets. HTML 4.01, a minor update to HTML 4.0, was published in December 1999. XHTML 1.0, published in January 2000, was a reformulation of HTML 4.01 in XML, and was the first version of HTML that was defined as an XML application. HTML5, the current version at the time of writing, was finalized in October 2014 by the W3C. HTML5 introduced new elements for better structure and multimedia support, APIs for complex web applications, and has provisions for error handling. The development of HTML has been a collaborative effort between various bodies over the years, with the aim of creating a standard that can be implemented consistently across different platforms. Today, HTML continues to evolve, with ongoing work to extend its capabilities in order to serve the needs of the modern web. In the next lessons, we will delve deeper into these elements, their attributes, and how they are used to structure and style web content. Stay tuned!
Do you know you can learn with more engaging videos and acquire certification? Enrol for HTML, CSS and JavaScript Course for Web Developer