Lesson 1 of 55 · HTML
Introduction to HTML
Duration: 15 min
Introduction to HTML
What is HTML?
HTML (HyperText Markup Language) is the standard language used to create web pages. Every website you visit is built using HTML in some form.
HTML is responsible for the structure of a page. It tells the browser what each piece of content represents, such as a heading, paragraph, image, button, or link.
Think about a newspaper:
- The title of the newspaper is a heading.
- The articles are paragraphs.
- The photos are images.
- The sections separate different topics.
HTML works in a similar way by organizing content into meaningful parts.
HTML, CSS, and JavaScript
When building websites, three technologies usually work together.
| Technology | Purpose |
|---|---|
| HTML | Creates the structure and content |
| CSS | Controls the appearance and layout |
| JavaScript | Adds interactivity and behavior |
For example, on a login page:
- HTML creates the form fields and button.
- CSS styles the page.
- JavaScript validates the user's input.
Understanding HTML Tags
HTML is made up of tags.
Example:
<p>Hello World</p>
This contains:
- Opening tag:
<p> - Content:
Hello World - Closing tag:
</p>
Together they form an HTML element.
Another example:
<h1>Welcome</h1>
Here, the browser understands that the text is a main heading.
Elements and Nesting
HTML elements can be placed inside other elements.
<section>
<h2>About Me</h2>
<p>I am learning HTML.</p>
</section>
In this example:
- The
<section>element contains two child elements. - The heading and paragraph belong to the same section.
This is called nesting.
Proper nesting keeps code organized and easier to read.
Elements Without Closing Tags
Some HTML elements do not contain content and therefore do not require a closing tag.
Examples:
<br>
<hr>
<img src="photo.jpg" alt="Photo">
Common examples include:
<br>for a line break<hr>for a horizontal line<img>for displaying images<meta>for page information
HTML5
HTML has evolved over the years. The latest major version is HTML5.
HTML5 introduced many useful features, including:
- Semantic elements such as
<header>,<main>, and<footer> - Native support for audio and video
- Better forms and validation
- The Canvas API for graphics
Modern websites are built using HTML5.
Why Learning HTML Matters
HTML is the foundation of web development.
A good understanding of HTML helps you:
- Build websites correctly
- Create accessible content
- Improve search engine visibility
- Write cleaner code
- Learn CSS and JavaScript more easily
Even experienced developers spend a significant amount of time working with HTML.
Basic Structure of an HTML Document
Every HTML page follows a standard structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, HTML!</h1>
<p>Welcome to the web.</p>
</body>
</html>
Understanding this structure is important because it forms the foundation of every webpage.
Understanding Each Part
The Doctype
<!DOCTYPE html>
The doctype tells the browser that the document uses HTML5.
Without it, browsers may display pages differently.
The HTML Element
<html lang="en">
This is the root element of the document.
The lang attribute specifies the language used on the page.
Benefits include:
- Better accessibility
- Improved search engine understanding
- Better support for translation tools
The Head Section
<head>
</head>
The head contains information about the page.
Common items placed inside the head include:
- Page title
- Metadata
- CSS files
- Font links
- SEO information
Character Encoding
<meta charset="UTF-8">
This allows the browser to display text correctly, including special characters and multiple languages.
Page Title
<title>My First Page</title>
The title appears:
- In the browser tab
- In bookmarks
- In search engine results
The Body Section
<body>
</body>
Everything visible on the page goes inside the body.
Examples include:
- Headings
- Paragraphs
- Images
- Links
- Lists
- Forms
Headings
HTML provides six levels of headings.
<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
Good practices:
- Use one
<h1>for the main page title. - Use
<h2>for major sections. - Use
<h3>for topics inside a section.
Headings should describe the structure of the content, not just change text size.
Paragraphs
Paragraphs are created using the <p> element.
<p>This is a paragraph.</p>
A paragraph is used for blocks of text.
Browsers automatically add spacing between paragraphs.
HTML Comments
Comments are notes written for developers.
<!-- This is a comment -->
Comments are useful for:
- Explaining code
- Leaving reminders
- Organizing large projects
Comments are not displayed on the webpage.
Attributes
Attributes provide additional information about an element.
Example:
<a href="https://example.com">Visit Website</a>
In this example:
hrefis an attribute.- It tells the browser where the link should go.
Another example:
<img src="cat.jpg" alt="A cat">
Here:
srcspecifies the image location.altprovides alternative text.
Attributes are written inside the opening tag.
Semantic HTML
Semantic elements describe the purpose of content.
Example:
<header>
<h1>My Blog</h1>
</header>
Common semantic elements:
<header><nav><main><section><article><footer>
Benefits:
- Better accessibility
- Improved SEO
- Easier maintenance
- More readable code
A Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student Portfolio</title>
</head>
<body>
<h1>Mohit's Portfolio</h1>
<h2>About Me</h2>
<p>I am learning HTML and web development.</p>
<h2>Projects</h2>
<p>This is my first website.</p>
</body>
</html>
This page includes:
- A proper HTML structure
- A page title
- Headings
- Paragraphs
Common Beginner Mistakes
Forgetting Closing Tags
Incorrect:
<p>Hello World
Correct:
<p>Hello World</p>
Forgetting the Doctype
Incorrect:
<html>
Correct:
<!DOCTYPE html>
<html>
Using Headings Only for Appearance
Headings should be used to organize content, not simply to make text larger.
Summary
After completing this lesson, you should understand:
- What HTML is
- Why HTML is important
- How tags and elements work
- The difference between HTML, CSS, and JavaScript
- The basic structure of an HTML document
- The purpose of headings and paragraphs
- How attributes provide additional information
- Why semantic HTML is important
Practice Exercise
Create a webpage that contains:
- A proper HTML5 document structure.
- A page title.
- One
<h1>heading. - Two
<h2>headings. - Three paragraphs.
- One HTML comment.
Open the page in your browser and verify that everything appears correctly.
What's Next?
In the next lesson, you will learn how to work with:
- Text formatting elements
- Lists
- Links
- Images
- Common content elements used in everyday web development