What is HTML?
HTML stands for HyperText Markup Language.
HTML is the standard markup language for creating webpages.
HTML uses predefined commands called tags (e.g: <h1>, <p>, <img>) to define webpage elements.
HTML elements tell the browser how to display the content on the webpage.
(You will learn more about Tags and Elements in the HTML Tags & Elements chapter).
HTML also serves as the foundation for other web technologies like CSS and JavaScript, which enhance webpage design and functionality.
The best part is that learning HTML is easy! The syntax of HTML tags is
simple, and you’re probably already familiar with many common tags like <html>, <head>, <title>, <body>, etc. So, don’t worry! Just practice with effort, and you’ll get the hang of it.
Notes:
HyperText: This is text that can link to other pages or resources. When you click on a link, you interact with hypertext.
Markup Language: This refers to a method of adding special instructions to a document, guiding a web browser on how to display the content. HTML uses tags to organize elements such as headings, paragraphs, links, and images on a web page.
HTML Element: An HTML element is a fundamental building block of an HTML document used to build webpages.
Basic HTML Document Structure
HTML document is a file that ends with a .html. or .htm extension. The content inside is structured
with tags and elements.
A basic HTML document structure looks like this:
Example explanation:
<!DOCTYPE html>
is the declaration for an HTML
document that tells the browser the document is written in HTML5 (latest version of HTML). It ensures
that the document follows HTML5 rules and is rendered correctly in standards mode.
<html>...</html> element is
the root container that holds
everything on your web page.
<head>...</head> element
contains meta information like page
title,
description, keywords
about HTML page. (not shown on the page)
<title>...</title> element
sets the webpage title that
appears in the browser's tab
(browser's title bar).
<body>...</body> element
defines the body of HTML document and contains all the visible content
(text, links, images) on HTML page.
<h1>...</h1> element defines
the largest and most
important heading.
<p>...</p> element defines
a
paragraph.
So, the code in the example, creates a simple web page with a page title (My Webpage), a heading that says "Welcome to My Webpage" and a paragraph saying "This is a simple HTML document."
Tips:
Edit HTML: You can edit the HTML code with our instant live editor".
Show Output: Click the "Show Output" button to show the coding result.
Why Learn HTML?
Learning HTML is essential if you want to get into web development. Here’s why:
Foundation of Web Development: HTML is the backbone of every website you visit. Without it, webpages wouldn’t exist.
Build the Structure: HTML provides the fundamental structure of a webpage.
Easy to Learn: HTML is easy to learn and beginner-friendly. You can start creating web pages with just a few lines of code.
Universal Language: HTML is understood by all web browsers, so anything you build with it will work across the web.
Career Opportunities: Knowing HTML is a valuable skill for web developers, digital marketers, and tech professionals. The demand for web developers is high in the online world.
HTML is your gateway to the world of web development, and mastering it is the first step to building great websites!
HTML Key Features
Easy to Learn and Use: HTML has a straightforward syntax, making it accessible for beginners.
Markup Language: HTML is a markup language (not a programming language) designed for structuring content on the web.
Content Organization: HTML allows for the organization of content using various tags, enabling developers to separate and categorize different types of information, such as text, images, audios, videos and more.
Hypertext Functionality: HTML allows the incorporation of hyperlinks within text for easy navigation.
Cross-Platform Compatibility: HTML is universally supported by all web browsers, ensuring that web pages display consistently across different devices and platforms, from desktops to mobile phones.
Prerequisites to Start Learning HTML
How to create directories and files on your computer's drive: Knowing how to create files, save them, and organize them in folders on your computer is essential for managing your HTML files.
Understanding file types and extensions: In web development, you'll often work with various file types (.html, .css, .jpg, .mp3 etc). Understanding file types helps you effectively manage web content.
How to open files in text editor and web browsers: Often you have to open html files in a text editor (like Notepad on Windows or TextEdit on Mac) or other code editors to edit HTML code and in a web browser for viewing the results.
How to edit text in text editor: HTML code is written in plain text, so knowing how to use a text editor like Notepad (Windows) or TextEdit (Mac) is helpful for absolute beginner. Editors like Visual Studio Code and Sublime Text are also popular for writing HTML.
How to use web browsers: Web browsers, such as Chrome, Firefox, Safari, and Edge, are essential tools for accessing the internet and testing web content.
How to navigate file path: Understanding file paths. (e.g., C:\Users\YourName\Documents\Project\index.html) is important for linking to other files, such as images, stylesheets, and scripts."
These basic skills will set you up to start your journey in web development with HTML!
History of HTML
HTML 1.0 (1991)
The first version of HTML created by Tim Berners-Lee in 1991 to facilitate the sharing of information on the internet. Initially, it included just 18 tags, allowing for basic text formatting and linking.
HTML 2.0 (1995)
Standardized HTML with more features like forms and tables. Designed to improve web content presentation and user interaction.
HTML 3.2 (1997)
Introduced more advanced features like tables, applets, and support for scripting (JavaScript). Brought more control over page layout with styles and fonts.
HTML 4.01 (1999)
A significant update that focused on separating content from presentation by introducing CSS (Cascading Style Sheets). Supported multimedia elements and improved forms and accessibility features.
XHTML 1.0 (2000)
A stricter version of HTML 4.01, adhering to XML syntax rules for better web compatibility and future expansion.
HTML5 (2014)
The latest and most powerful version, designed to support modern web development. Introduced new semantic elements (<header>, <footer>, <art>), multimedia elements (<audio>, <video>), and APIs for offline web apps, geolocation, and drag-and-drop. Focused on making the web more mobile-friendly and interactive.
From its humble beginnings, HTML has become the foundation of the web, enabling billions of users to access and share information globally.
