HTML Tutorial · Lesson 01

Introduction to HTML

Understand what HTML is, why it forms the foundation of the web, how HTML tags work, and how HTML works alongside CSS and JavaScript.

FREE

What is HTML?

HTML (HyperText Markup Language) was created by Tim Berners-Lee in 1991 as a standard for creating web pages. It is a markup language used to structure content on the web, defining elements like headings, paragraphs, links, and images. HTML forms the backbone of web content.

In layman's terms, HTML is like the skeleton of a website. It's a set of instructions that tells a web browser how to display text, images, videos, and other elements on a webpage.

Think of it as the building blocks that create the structure of a website, similar to how bricks and mortar are used to build a house.

In a Nutshell

HTML is the language of the web, used to create websites. HTML defines the barebone structure or layout of web pages that we see on the Internet.

HTML consists of a set of tags contained within an HTML document, and the associated files typically have either a .html or .htm extension.

There are several versions of HTML, with HTML5 being the most recent major version and the foundation of modern web development.


Features of HTML

  • Platform-independent: HTML pages can be displayed across different operating systems such as Windows, Linux, and macOS.
  • Multimedia support: Images, videos, and audio can be added to a web page. For example, websites such as YouTube can display videos using web technologies.
  • Markup language: HTML is a markup language, not a programming language.
  • Works with other technologies: HTML can be integrated with technologies such as CSS and JavaScript to create visually appealing, interactive, and dynamic web pages.

Why the Term "HyperText Markup Language"?

The term "HyperText Markup Language" is composed of two main words: HyperText and Markup Language.

What is HyperText?

HyperText refers to text that contains links to other documents or resources. These links allow users to navigate from one webpage or resource to another.

What is a Markup Language?

A markup language is a language that uses a specific set of tags to describe and structure content.

Therefore, HTML is a way of structuring and displaying text, graphics, audio, video, and other content using special tags.

HTML Tags

Tags are meaningful text enclosed within angle brackets, such as <p>.

Each HTML tag has a specific meaning and purpose in building an HTML page. Tags tell the browser how different pieces of content should be structured.

Note: HTML tags are written inside angle brackets < >.

Quick Exercise

Open a webpage of your choice, right-click on the browser, and select "View Page Source".

You will see the HTML code for that page. This is the code that the browser receives and uses as part of the process of displaying the webpage.

In this tutorial, we'll learn how to write this type of code using HTML.


A Beautiful Analogy to Understand HTML, CSS, and JavaScript

HTML CSS and JavaScript car analogy

To understand the roles of HTML, CSS, and JavaScript, imagine that you're building a car.

HTML, CSS, and JavaScript Analogy

  • HTML — The Skeleton: HTML forms the basic structure and frame of the webpage, just like the skeleton of a car.
  • CSS — The Design: CSS adds colors, styling, spacing, layouts, and visual finishing touches, similar to the paint and design of a car.
  • JavaScript — The Engine: JavaScript provides functionality, interaction, movement, and dynamic behavior, similar to the engine and mechanical components of a car.

Similarly, when developing a website, HTML lays out the structure, CSS enhances its visual appearance, and JavaScript provides interactivity and dynamic behavior.


History of HTML

The history of HTML is closely connected with the creation of the World Wide Web.

  1. 1989: Tim Berners-Lee proposed the World Wide Web.
  2. 1991: Tim Berners-Lee created the first version of HTML.
  3. 1995–1997: Further work was carried out to develop and refine different versions of HTML.
  4. 1999: HTML 4.01 became an important standardized version of HTML.
  5. HTML5: HTML5 introduced many modern capabilities and became the foundation for contemporary web development.

There is much more to explore about the history and evolution of HTML, but for now, we'll focus on the concepts that are most important for learning web development.

What's Next?

In the next tutorial, we'll continue our journey into web development and understand how websites actually work.