HTML stands for HyperText Markup Language. It is not a programming language. It is a markup language used to create the structure and content of web pages.
- HyperText: Refers to the “links” that connect different web pages and let you navigate the Internet.
- Markup Language: Refers to the use of “tags” (such as <h1> or <p>) to define the layout and the different elements of your content.
HTML is the skeleton of a webpage. It gives each web page its form.
- Why Is Learning HTML Important?
Learning HTML is the first and most important skill for anyone who wants a career in Web Development or Design.
- Build Websites: HTML is the fundamental building block of every website. You can’t build a house without a foundation, and you can’t build a website without HTML.
- Launch a Web Development or Design Career: A deep understanding of HTML is essential for roles such as Front-End Developer, Web Designer, Full-Stack Developer, and Email Developer.
- To Understand Other Languages: Knowing HTML makes it easier to learn the technologies that work alongside it, such as CSS (for styling) and JavaScript (for functionality).
- Create Your First HTML Page
Before you can create your first HTML page, you need two basic tools:
- A Text Editor: Any text editor will work (e.g., Notepad on Windows, TextEdit on Mac, or a more advanced editor such as VS Code).
- A Web Browser: Google Chrome, Firefox, or any modern browser to view your page.
Example of a basic HTML file:
- Open your text editor.
- Type the code into the editor.
- Save the file with the .html extension, for example: my.html.
- To view the result, find the saved file on your computer and double-click it. It will open in your default web browser.
- HTML Page Structure
The HTML page structure (or HTML basic structure) is made up of the main basic elements needed to create an HTML document that can be displayed in a web browser.
The image below shows the page structure of an HTML document:
The HTML page structure contains <!DOCTYPE html>, <html>, <head>, <title>, <body>, and other tags that will be displayed on the homepage.
- Components of the Basic HTML Structure
Let’s look at what each tag does in the example below:
| Tag | Description |
|---|---|
<!DOCTYPE html> | This declaration defines the document as an HTML5 document. It must always be the very first line, at the top of your code. |
<html>…</html> | This is the root element of the page. All other elements are placed inside it. |
<head>…</head> | The <head> section contains meta information that is not displayed directly on the page, such as the page title or links to CSS stylesheets. |
<title>…</title> | The <title> tag sets the title of the web page. This is what you see on the browser tab, and it is also what search engines use as the main title in search results. |
<body>…</body> | The <body> tag contains all the content that is visible on your web page, including headings, paragraphs, images, links, and much more. |
- The Role of the Web Browser
The role of a web browser is to read an HTML file from a given location (either a server or a local device) and display it as a web page. All browsers, such as Google Chrome, Safari, and Firefox, can read HTML files. You can use any browser to display your HTML file on the web.
- The <!DOCTYPE> Declaration
The web browser uses the <!DOCTYPE> tag to know which version of HTML the document uses. The current version of HTML is HTML5, and it uses the following declaration:
There are many other types of declarations that can be used in an HTML document, depending on which version of HTML is being used. We will look at this in more detail when we discuss the <!DOCTYPE...> tag along with other HTML tags.
- HTML Tags vs. Elements vs. Attributes
- HTML tags are keywords used for specific purposes to display and arrange content on a web page.
- HTML elements are the basic building units, made up of tags and content. An HTML element consists of a start tag, content, and an end tag.
- HTML attributes provide additional information about HTML elements, to define or change their behavior. Attributes are placed in the opening tag.
- HTML Tags Case Sensitivity
HTML tags are not case-sensitive. You can write them in uppercase or lowercase. However, the World Wide Web Consortium (W3C) has recommended writing tags in lowercase since HTML 4.
- The Importance of HTML
HTML is the basic building block of the World Wide Web. Every page you visit on the web contains HTML tags. HTML is important in many ways:
- HTML defines the structure of a webpage and helps in designing websites.
- With the help of CSS and JavaScript, HTML helps create beautiful and interactive websites.
- HTML helps with search engine optimization (SEO) by letting you optimize tags around the keywords you are targeting.
- HTML lets you browse pages and websites from anywhere on the Internet.
- HTML supports user input and forms, so you can easily collect information from anywhere in the world.
- HTML follows the open standards of the W3C, so it works in every browser on every type of device. You don’t need to change your HTML for different browsers or devices.
- The Idea of Hypertext Before HTML
To understand where HTML came from, we first need to look at the idea of hypertext. In the early 20th century, pioneers such as Vannevar Bush came up with the idea of linking information together through hypertext. Bush imagined a machine called the “memex” that could organize huge amounts of information using linked microfilm. However, it was Ted Nelson, an American philosopher and sociologist, who first used the word “hypertext” in the 1960s. Nelson’s idea of hypertext was to build a network of linked text and media that would let people explore information in a non-linear order.
- The Evolution Timeline of HTML
Here you will see how HTML has evolved over the last few decades. The biggest update came with HTML5 in 2012.
| Year | Progress |
|---|---|
| 1991 | Tim Berners-Lee created HyperText Markup Language (HTML), but it was not officially released. |
| 1993 | Tim Berners-Lee created the first version of HTML that was published and made available for public use. |
| 1995 | HTML 2.0 was released, adding some new features to the existing ones. |
| 1997 | There was an attempt to extend HTML with HTML 3.0, but it was replaced by HTML 3.2, which was more practical to implement. |
| 1998 | The W3C (World Wide Web Consortium) decided to shift its focus to an XML-based HTML, called XHTML. |
| 1999 | HTML 4.01, which became an official standard in December 1999, was the most widely used version in the early 2000s. |
| 2000 | XHTML 1.0, completed in 2000, was a reformulation of HTML 4 in XML. |
| 2003 | The introduction of XForms renewed interest in developing HTML itself, as a better option than replacing it with new technologies. This new thinking recognized that XML was better suited to newer technologies such as RSS and Atom, while HTML remained the core foundation of the web. |
| 2004 | A W3C workshop was held to explore reopening HTML development. Mozilla and Opera presented a joint set of principles that later influenced HTML5. |
| 2006 | The W3C showed interest in developing HTML5 and formed a working group to collaborate with the WHATWG. The W3C aimed to publish a finished version of HTML5, while the WHATWG focused on a Living Standard that continues to develop HTML on an ongoing basis. |
| 2012 | HTML5 can be seen as an extended version of HTML 4.01, and it was officially published in 2012. |
- The Evolution from HTML 1.2 to HTML5
HTML’s features have evolved over time. With each new version of HTML, support for more features was added and the user experience improved. The table below shows the features introduced in each later version of HTML:
| Type of Content | HTML 1.2 | HTML 4.01 | HTML5 | Description |
|---|---|---|---|---|
| Image | Yes | Yes | Yes | The img tag lets you add images to an HTML document. |
| Paragraph | Yes | Yes | Yes | The paragraph element in HTML is used to represent a block of text on a web page. |
| Heading | Yes | Yes | Yes | Headings are used in HTML to define titles of different sizes (h1 to h6). |
| Address | Yes | Yes | Yes | The address element in HTML is used to hold the user’s contact information. |
| Anchor | Yes | Yes | Yes | The anchor tag is used to define a hyperlink on a web page. |
| List | Yes | Yes | Yes | Lists are used in HTML to display a list of related items. |
| Table | No | Yes | Yes | Tables are used to organize data into rows and cells. |
| Style | No | Yes | Yes | Style is used to add CSS styling to a web page. |
| Script | No | Yes | Yes | Script is used to add JavaScript to HTML. |
| Audio | No | No | Yes | Lets you add audio to a web page. |
| Video | No | No | Yes | Lets you add video to a web page. |
| Canvas | No | No | Yes | Lets you add graphics elements to a web page. |
Ebook: https://softkhpc.blogspot.com/2026/11/html-tutorial-beginners.html
