HTML Master Tutorial - By Hanan Malik

Want as PDF? Full Downloadable PDF

Chapter 1: Getting Started 01

Chapter 2: What is HTML? 3

Chapter 3: HTML tags 4

Chapter 4: HTML Structure 5

Chapter 5: Videos in HTML 6

Chapter 6: Page layout 7

Chapter 7: Tables and Forms 8

Chapter 8: Anchor Tags 9

Chapter 9: Semantic Tags 10

Chapter 1: Getting Started

In this chapter, we will learn about the basic structure of HTML...

        <!DOCTYPE html>

        <html>...</html>

        From <!DOCTYPE html> to </html>

Installing A Code Editor

You can install any code editor you like, here i like to install VS Code, because it is Lightweight and have too many features.

you can install VS Code from here VS Code Download

Chapter: 2- What is HTML

HTML (Hypertext Markup Language) is the standard language used to create webpages. It tells the web browser what content to show (text, images, buttons, videos, etc.) and how the content is structured. HTML is like the skeleton of a Website. Without it the website can't be stand. If our HTML is not written then for what we write CSS and JavaScript.

Chapter: 3- HTML Tags

Think of HTML tags as the DNA of a webpage. They are the hidden instructions that tell a web browser how to display content—whether something should be a bold heading, a clickable link, or a simple paragraph.

Some HTML Tags = Heading Tag - <h1> to <h6>. in headings <h1> is biggest and <h6> is smallest of all headings.

Other Tags

<p> </p> paraghraph tag is used to write a para. <br tag is used to give a line break

The Horizontal Ruler Tag

The horizontal ruler tag, <hr> is an HTML element used to insert a therametic break or horizontal line on a web page. It serves to visually seperate content or sections, providing a clear distinction. And <hr> also <br> is a empty tag. Now what is a Empty Tag?

Empty Tags

They are elements or tags that did'nt have a closing tag or that cannot have any child nodes.

Some Common Empty Tags ⇓

<br> tag gives a line break 'It is empty but not that!'

If we write this

The Output =

<img>Tag

The <img> Tag is a also a Empty tag, used to embedd any image.

Example

Output

<input> Tag

Creates an input field for forms

Then Output

<meta> Tag

Contains or Provides metadata about document

<link>

Helps to link externel document. Like stylesheets etc.

Bold Italic underline tags are used to Highlight a text

HTML TAGS

We read Empty Tags, Now we have to learn HTML tags that have a closing tags(Normal Tags)

Big and Small Tag: Using <big> and <small> tag we can make text bit larger and bit smaller

Subscript & Superscript Using <sub> we can write subscript and using <sup> we can write superscript

It look like this

Pre tag: We learnt that HTML ignores whitespaces and new lines what if we have to write with those spaces

We use Pre Tag Pre tag is used to write text as it is in code

like this

Chapter: 4- HTML Structure

Structure for every HTML Document

For writing any HTML document we mostly use HTML5 Boilerplate

Creating a Webpage

output

Rules for writing a HTML document

Do you know there are some rules for writing a HTML document. Don't know?! I will tell you

For writing a HTML document there are some rules:

Tag Structure: HTML follows a tag based structure with opening and cloasing tags.

Nesting Rules:Tags Must be properly nested, with each opening tag paired with a corresponding closing tag.

Document Structure:An HTML document should have a proper structure, including a DOCTYPE declaration, <html>, <head> and <body> elements.

Attribute usage: Attributes within tags should follow a key-value structure, providing additional information and settings.

Whitspace ignored: Extra whitespace is generally ignored in HTML, but consistancy in indentation enhances readability.

Chapter: 5- Videos In HTML

We can embed videos in HTML website that make websites beautiful

For emebedding a video we can use video tag

There are some Atrributes for Video Tag

src: source of URL of the video
width: We can adjust the width of video. Height automaticaly adjusts.
controls: This Atrribute dispalys control of the video. Like play, mute, stop etc.
autoplay: Sets autoplay to the video. When we open the site the video auto plays.
loop: Loops the video.

Lists....Unordered, ordered

In HTML there are lists that help to write items in sequence.

Types of lists:

Ordered lists
Unordered Lists

What are Ordered list?

In HTML ordered Lists are lists that are in a ordered Way and have sequense wize numbers in starting. Ordered list is written in <ol> Tag

In browser it will be shown as:

This is ordered List in HTML

What are Unordered Lists

Unordered lists are lists that dont have any order of writing. Unordered list is written in <ul> Tag

It will be shown as:

Chapter 6: Page layout

Link Attribute

Div Tag

Div tag takes the full width. Mostly used for containing other elements.

The div Tag. As you see the div tag is taking full width of the page

Span Tag

Span tag is opposite of div tag because it takes only its size width

See it is taking only itself width

chapter 7: Tables & Forms

The >table> tag is used to create table in HTML

<tr> tag: used to create table row

<td> tag: used to create table data

<th> tag: used to in place of table data to to dispaly heading

chapter 8: Anchor Tags

The Anchor Tag <a> in HTML is a fundamental inline element used to create hyperlinks, which allow users to navigate from one resource to another. These resources can include web pages, sections within the same page, files, email addresses, phone numbers, or any other location identified by a URL.

At its core, the anchor tag works by using the href (Hypertext Reference) attribute, which specifies the destination of the link. When a user clicks on the content enclosed within the anchor tag, the browser interprets the href value and performs the corresponding navigation action.

The anchor tag is highly flexible and supports both absolute URLs (linking to external websites) and relative URLs (linking to pages within the same project). It can also create fragment identifiers, enabling navigation to specific sections of a webpage using IDs. Beyond simple navigation, the anchor tag can trigger actions such as opening links in new tabs, downloading files, or initiating email and phone interactions through specialized URL schemes like

mailto:

and

tel:

And the chapter Anchor tags is incomplete.

To be Continued.......Wait for next Chapters

Chapter 9: Semantic Tags

Semantic Tags ( or Semantic HTML elements) are HTML tags that clearly describe the meaning and purpose of the content inside them — both for developers and browsers.

Simple Definition

Semantic Tags = tags that give meaning to content

Examples Of Semantic Tags

Here are some common ones:-

1. <header> element represents introductory content for a page or a section.

It usually Contains things that introduce the content
Can include :
Logo
Website name
Navigation (<nav>)
Search Bar
You can have multiple <header> tags (not just one!)

2. <nav> tag

<nav> element is used to define a set of navigation links.