PREFACE

Welcome to the "Ultimate HTML Handbook," your comprehensive guide to mastering

HTML programming. This handbook is designed for beginners and anyone looking to
strengthen their foundational knowledge of HTML, the fundamental language for creating
web pages.

PURPOSE AND AUDIENCE

This handbook aims to make web development accessible and enjoyable for everyone.
Whether you're a student new to coding, a professional seeking to enhance your skills, or
an enthusiast exploring HTML, this handbook will definitely be helpful.

HTML’s simplicity and universal use make it an essential starting point for anyone interested in
web
development.

STRUCTURE AND CONTENT

The handbook is divided into clear, concise sections, each focused on a specific aspect of HTML:

 Fundamentals of HTML: Learn the basic structure and elements of HTML.

 Styling with CSS: Understand how to enhance your HTML pages with CSS.
 Interactive Elements: Explore how to create dynamic and interactive content using HTML.
 Advanced Topics: Dive deeper into more complex HTML techniques and best practices.

WHY HTML?

HTML is the backbone of the World Wide Web, providing the structure and semantics for
web pages. It is essential for anyone looking to build a career in web development or
simply understand how websites work.

HTML’s versatility and ease of use make it an ideal starting point for aspiring web developers.

ACKNOWLEDGEMENTS

I extend my gratitude to all the educators, developers, and contributors whose insights
and expertise have shaped the content of this handbook. Special thanks to the web
development community for their continuous support and inspiration.

CONCLUSION

Learning web development through HTML can be both rewarding and empowering. The
“Ultimate HTML Handbook” aims to make your journey into web development smooth
and enjoyable. Use this guide as your companion to master HTML and creating
impactful web experiences.

1
CONTENTS OF HANDBOOK

Chapter 0 – Introduction..................................................................................................... 4
Then Why CSS C JavaScript............................................................................................. 4
A Beautiful Analogy.......................................................................................................... 4
Installing VS Code........................................................................................................... 4
Chapter 1 – Creating Our First Website...............................................................................5
A Basic HTML Page.......................................................................................................... 5
Important Notes............................................................................................................... 5
Comments In HTML......................................................................................................... 6
Case sensitivity............................................................................................................... 6
Chapter 1 – Practice set...................................................................................................... 7
Chapter 2 – Basic HTML Tags.............................................................................................8
HTML Element................................................................................................................. 8
HTML Attributes.............................................................................................................. 8
The Heading Tag............................................................................................................. 8
The Paragraph Tag........................................................................................................... 8
The Anchor Tag............................................................................................................... 8
The Img Tag.................................................................................................................... 9
Bold, Italic and Underline Tags......................................................................................... 9
br Tag.............................................................................................................................. 9
Big And Small Tags.......................................................................................................... 9
hr Tag.............................................................................................................................. 9
Subscript C Superscript................................................................................................... 9
Pre Tag............................................................................................................................ 9
Chapter 2 – Practice Set................................................................................................... 10
Chapter 3 – Creating A Page Layout.................................................................................11
Link Attributes............................................................................................................... 11
The div Tag..................................................................................................................... 12
The Span Tag................................................................................................................ 12
Chapter 3 – Practice Set................................................................................................... 13
Chapter 4 – Lists, Tables C forms......................................................................................14
Lists.............................................................................................................................. 14
Unordered list................................................................................................................ 14
Ordered list.................................................................................................................... 14
Tables........................................................................................................................... 14
Colspan attribute.......................................................................................................... 15

2
 HTML Forms.................................................................................................................. 15
Embedding videos......................................................................................................... 16
Attributes for video.......................................................................................................... 16
Chapter 4 – Practice Set................................................................................................... 17
Chapter 5 – SEO............................................................................................................... 18
Types of SEO................................................................................................................. 18
HTML SEO..................................................................................................................... 18

3
 CHAPTER 0 – INTRODUCTION
HTML, which stands for "HyperText Markup Language," is the foundational
language of the web. It's used to create and structure websites. By
utilizing HTML tags, we can define the appearance and layout of a
website. With a good grasp of these tags and their proper usage, creating
beautiful websites becomes straightforward and efficient!

THEN WHY CSS C JAVASCRIPT

HTML is used to define the layout of a page, providing a barebone

structure for the content.

CSS is used to add styling to that barebone page created using HTML.

JavaScript is used to program logic for the page layout e.g. What happens
when a user hovers on a text, when to hide or show elements etc.

A BEAUTIFUL ANALOGY
 HTML = Car body (only metal)
 CSS = Car paint, decoration etc.
 JavaScript = Car engine + Interior logic

We will start learning how to build beautiful websites in this course.

INSTALLING VS CODE

We can use any text editor of our choice. Here I am using VS Code
because it is lightweight, opensource C from Microsoft.

Note: You can write HTML even in Notepad. Text editors like VS Code just
makes these things easier.

4
 CHAPTER 1 – CREATING OUR FIRST WEBSITE
We start building a website by creating a file named index.html.
index.html is a special filename which is presented when the website root
address is typed.

A BASIC HTML PAGE

<!Doctype html> <!-- Specifies this is an html 5 document -->

<html> <!-- Root of an HTML page-->

<head> <!-- Contains page metadata. -->

<title>KARAN WEB</title> <!-- Contains title -->

</head>

<body> <!-- main body (rendered by the browser) -->

<h1>HEADING<h1> <!-- This is a heading <h1> - heading tag -->

<p> My paragraph </p> <!-- Paragraph tag -->

</body> <!-- Closing body tag. -->

</html>

A tag is like a container for either content or other HTML tags.

IMPORTANT NOTES
 <head> C <body> tags are children of HTML tag.
 HTML is the parent of <head> C <body> tags.
 Most of the HTML elements have opening C closing tag with content
in between opening C closing tags.
 Some HTML tags have no content. These are called Empty elements e.g.
<br>
 We can either use .htm or .html extension.
 you can use “inspect element” or “view page source” option from Chrome
5
to
look into a website’s HTML Code.

6
COMMENTS IN HTML
Comments in HTML are used to mark text which should not be parsed. They can
help document the source code.

<!-- HTML COMMENT -->

CASE SENSITIVITY
HTML is a case insensitive language. <H1> and <h1> tags are the same.

7
 CHAPTER 1 – PRACTICE SET
1. Inspect your favourite website and change something on the
page which is displayed.
2. Go to your favourite website and try to view the page source and
write the exact lines of code. Does it clone the website? Why?
3. Write any HTML code inside a text file. Does it work if you write it using
notepad?

8
 CHAPTER 2 – BASIC HTML TAGS
We can add elements inside the body tag to define the page layout.

HTML ELEMENT
An HTML element consists of everything from the starting tag to the ending tag.

<body> <!-- Opening tag -->

Content
</body> <!-- Closing tag -->

HTML attributes are used to add more information corresponding to an HTML tag.

Example:

HTML
<a ATTRIBUTES
<a href=
href= "https://codewithKARAN.com"/> KARANHarry
"https://codewithharry.com"/> </a> </a>

We can either use single or double quotes in attributes.

THE HEADING TAG

Heading tag is used to mark headings in HTML. From h1 to h6, we have tags
for the most important to the least important heading.

<h1> Most important heading </h1>

<h2> Another heading H2 </h2>
<h3> Another heading H3 </h3>
<h4> Another heading H4 </h4>
<h5> Another heading H5 </h5>
<h6> Another heading H6 </h6>

Note: We should not use HTML headings to make text thick or bold.

THE PARAGRAPH TAG

Paragraph tags are used to add paragraph to an HTML page.
<p> This
<p> Thisisis
a paragraph </p> </p>
a paragraph

THE ANCHOR TAG

The Anchor Tag is used to add links to an existing content inside an HTML page.

<a href
<a href= "https://google.com"> click meclick
= "https://google.com"> </a> me </a>
9
THE IMG TAG
<img> tag is used to add images in an HTML page.
<img src=
<img src="image.jpg">
"image.jpg">

BOLD, ITALIC AND UNDERLINE TAGS

We can use bold, italic and underline tags to highlight the text as follows:

<b> Thisisis
<b> This boldbold
</b> </b>
<i>This
<i>This isis italic
italic </i> </i>
<u> Thisisis
<u> This underline
underline </u> </u>

BR TAG
The <br> tag is used to create line breaks in an HTML document.
<br>
<br>

BIG AND SMALL TAGS

We can make text a bit larger and a bit smaller using <big> and <small>
tags respectively.
<big>Hello world</big>
<big>Hello world</big>
<small>Hello world</small>
<small>Hello world</small>

HR TAG
<hr> tag in HTML is used to create a horizontal ruler often used to separate the
content.
<hr>
<hr>

SUBSCRIPT C SUPERSCRIPT
We can add subscript and superscripts in HTML as follows:
this _is subscript.
this _is
this <sub> is </sup> superscript.
subscript. this <sub> is
</sup> superscript.
PRE TAG

HTML always ignores extra spaces and newlines. In order to display a piece of
text as is, we use pre tag.

<pre>
<pre>
This
This is written.
is written.
using
using pre
pr tag
</pre>tag
</pre> 10
 CHAPTER 2 – PRACTICE SET
1. Create an HTML page with a heading (title heading), a primary
heading and a subheading. Which tags did you use?
2. Create a page with 5 wallpaper images taken from the internet.
3. Use <br> and <hr> tags to display a piece of text with line breaks.
4. Try to write the following Chemical equation
using HTML. C + O2 = CO2
5. Try to write a Wikipedia article using HTML.

11
 CHAPTER 3 – CREATING A PAGE LAYOUT
When we use the right tag in right place, it results in a better page layout, better
indexing by search engines and better user experience.

We use the following tags to get the job done.

Inside the main tag we insert the following tags:

<!-- Themain
<!-- The main opening
opening tag -->
tag -->
<main>
<main>
<!-- <!--
A pageA section
page section
--> -->
<section>
<section>
<!--<!--
A self-contained contentcontent
A self-contained --> -->
<article>
<article>
<!-- Content
<!-- Content goesgoes
herehere
-->-->
</article>
</article>
</section>
</section>
<!-- Content
<!-- Content aside
aside from
from the
themain
main content
content(e.g.
(e.g.Ads, sidebars)
Ads, --> --
sidebars)
<aside>
>
<!-- Aside content goes here -->
<aside>
</aside>
<!-- Aside content goes here -->
</main>
</aside>
<!-- The main closing tag -->
</main>
<!-- The main closing tag -->
Creating a page like this is not necessary but it creates a readable C
structured layout. Also, they are useful for SEO.

LINK ATTRIBUTES
<!-- Contact
<!-- Contact page
page opens
opens in thein thetab
same same
--> tab -->
<a href="/contact">Contact</a>
<a href="/contact">Contact</a>
<!-- Contact page opens in a new tab -->
<!--href="/contact"
<a Contact page openstarget="_blank">Contact
in a new tab --> us</a>
<a href="/contact" target="_blank">Contact us</a>

We can put any content inside an anchor tag (images, headings etc are all allowed).
12
If the page is inside a directory, we need to make sure that we link to the
correct page (Same applies to img tag as well.)

We can add links to images like this.

<ahref
<a href =
= "/about">
"/about"> <img src="a.jpg" width
<img src="a.jpg" width =="120">
"120"> </a>
</a>

THE DIV TAG

The <div> tag is often used as a container for other elements. It is a block-level
element, meaning it always takes up the full width available.

<div>
<div>
<h1>This
<h1>This is a inside
is a heading heading inside a div.</h1>
a div.</h1>
<p>This is a paragraph inside a div.</p>
<p>This is a paragraph inside a div.</p>
</div>
</div>

THE SPAN TAG

The <span> tag is an inline container, meaning it only takes up as much

width as necessary.
<p> This is a <span>highlighted </span> word in a sentence. </p>
<p>This is a <span>highlighted</span> word in a sentence.</p>

13
 CHAPTER 3 – PRACTICE SET
1. Create an SEO friendly website using HTML.
2. Create an HTML page which opens google when clicked on an image.
3. Create a website which has your 5 top used websites
bookmarked. The links should open in a new tab.

14
 CHAPTER 4 – LISTS, TABLES C FORMS

LISTS
Lists are used to display content which represents a list.

UNORDERED LIST
An unordered list is used to list items that do not have a specific order.

<ul>
<ul>
<li>Home</li>
<li>Home</li>
<li>About</li>
<li>About</li>
</ul>
</ul>

ORDERED LIST
An ordered list is used to list items in a specific order, typically numbered.

<ol>
<ol>
<li>Phone</li>
<li>Phone</li>
<li>PC</li>
<li>PC</li>
<li>Laptop</li>
<li>Laptop</li>
</ol>
</ol>

TABLES

The <table> tag in HTML is used to define tables, which are used to format
and display tabular data.

 <tr> tag: Used to display table row.

 <td> tag: Used to display table data.
 <th> tag: Used in place of table data for displaying table headers.

We can define as many table rows as we want. To add a caption to the table, we
use
<caption> tag inside table.

 <thead> tag: Used to wrap table head (caption C <tr> with <th>)
 <tbody> tag: Used to wrap the table body.

15
 Example:

<table>
<table>
<caption>Students Report</caption>
<caption>Students Report</caption>
<thead>
<thead>
<tr>
<tr>
<th>Name</th>
<th>Name</th>
<th>Grade</th>
<th>Grade</th>
</tr>
</tr>
</thead>
</thead>
<tbody>
<tbody>
<tr>
<tr>
<td>Rohan</td>
<td>Rohan</td>
<td>A+</td>
</tr> <td>A+</td>
<tr>
</tr>
<td>Harry</td>
<tr>
<td>D</td>
<td>Harry</td>
</tr>
<td>D</td>
</tbody>
</table></tr>
</tbody>
</table>

COLSPAN ATTRIBUTE
This attribute is used to create cells spanning multiple columns.
<!-- Spans
<!-- Spans3 Columns --> -->
3 Columns
<th colspan = "3" > Harry </th>
<th colspan = "3" > Harry </th>

HTML FORMS
An HTML <form> tag is used to create a form that collects input from users.

<form>
<form>
<!-- Elements
<!-- of form
Elements of-->form -->
</form>
</form>
There are different form elements for different kinds of user input.

 <input> element: Can be of type text, checkbox, radio, button and

submit.
We also have a ‘file’ type.
 <textarea> element: Defines a multiline text input ‘cols’ and ‘rows’
attributes can be used to size the text area.
 <select> element: Defines a drop-down list.

Note: you don’t have to remember all the tags, you will automatically
memorize them with practice.

16
EMBEDDING VIDEOS
To embed videos in HTML, you can use the <video> tag along with various
attributes to control its behavior.
<video src
<video src= 'karan.mp4'> Error </video>
= 'harry.mp4'> Error </video>

ATTRIBUTES FOR VIDEO

We can use the following attributes:

 src: Specifies the URL of the video file (harry.mp4 in this case).
 width: Adjusts the width of the video player. Height adjusts
automatically to maintain aspect ratio.
 controls: Displays video controls such as play, pause, volume, etc.
 autoplay: Automatically starts playing the video when the page loads.
 loop: Causes the video to automatically start over from the
beginning when it reaches the end.
 preload: Specifies whether the video should be loaded when the
page loads (auto, metadata, none).

<video width="640" autoplay loop>

<video width="640" autoplay loop>
<source src="harry.mp4"
<source src="karan.mp4" type="video/mp4">
type="video/mp4"> Your
Your browser does not browser
support does
the video tag. not
support the video tag.
</video>

17
 CHAPTER 4 – PRACTICE SET
1. Create an HTML page with video embedded inside it.
2. Replace the video in question no 1 with a YouTube video.
3. Create an HTML form for a travel website to book a vacation.
4. Create a table displaying score of cricket Players in a match using HTML.

18
 CHAPTER 5 – SEO
We will focus only on HTML standpoint of SEO. We will not be looking into
keyword building and content optimization aspect of SEO.

TYPES OF SEO
 On page SEO (This can be done by HTML developers).
 Off page SEO.

HTML SEO
HTML developers can implement SEO using the following techniques:

1. Title Tag: Set a clear and descriptive <title> tag that accurately
reflects the content of the page.
2. Meta Description: Provide a concise summary of the page content using
the
<meta> tag.
3. URL Slug: Use a clean and readable URL structure that
includes relevant keywords.
4. Meta Author Tag: Optionally include the author information in a <meta>
tag
5. Favicon: Use a favicon to enhance brand recognition and usability.
6. Image Optimization: Compress images to improve page load
times and include descriptive alt attributes.
7. Optimize Resources: Remove unused HTML, CSS, and
JavaScript files, and minify/compress them to reduce page load
times.
8. Semantic HTML: Use appropriate HTML tags (<header>, <nav>,
<article>,
<footer>, etc.) to structure the content logically, which can improve
SEO indirectly by making the content more accessible and
understandable to search engines.

<head>
<head>
<title>Example
<title>Example PagePage
- SEO-Best
SEOPractices</title>
Best Practices</title>
<metaname="description"
<meta name="description" content="This
content="This is anpage
is an example example
page demonstrating SEO best practices in HTML."> HTML.">
demonstrating SEO best practices in
<meta
<metaname="author"
name="author"content="Harry">
content="Harry">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
</head>

19