HTML Introduction
⏱️ Estimated time: 15 minutes | Difficulty: Beginner
Table of Contents
What is HTML?
HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. HTML uses "markup" to annotate text, images, and other content for display in a Web browser.
HTML is not a Programming Language
A very important distinction: HTML is a Markup language, not a programming language. It cannot perform logic (like math, if/else statements, or loops). That's what JavaScript is for!
Why Should We Learn HTML?
Every single website on the Internet—from Google to Amazon to this very site—is built using HTML. It is the absolute foundation of Web Development.
- Create A Web presence: If you want to put anything on the web, you need HTML.
- Understand the Web: Even if you are a backend developer or designer, understanding HTML semantics is required to understand how clients digest your server data.
- Easy to Learn: HTML is arguably the easiest technical language to learn, making it the perfect stepping stone into web development.
First HTML Document (Hello Web)
HTML documents consist of a series of elements, which you use to enclose (or wrap) different parts of the content to make it appear a certain way.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my very first paragraph.</p>
</body>
</html>
Try It Yourself
Hello World!
This is my very first paragraph.
Explanation of the HTML Code
Let's dissect the simple HTML skeleton.
<!DOCTYPE html>
The doctype declaration. It defines that this document is an HTML5 document.
<html> ... </html>
The root element of an HTML page. All other elements must be descendants of this element.
<head> ... </head>
Contains meta information about the HTML page (like the title, character set, styles, scripts, and other meta information).
<body> ... </body>
The document's body. It contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<h1> and <p>
<h1> defines a large heading. <p> defines a paragraph. Notice both start with an opening tag <> and end with a closing tag </>.
Applications of HTML
- Web Page Development: Every web page ever built.
- Internet Navigation: Hypertext (the H in HTML) allows users to seamlessly navigate via hyperlinks.
- Offline Web Applications: Using HTML5 applications cache and offline storage capabilities.