Notes
What is HTML?
HTML Features
HTML skeleton
Elements and Attributes
HTML indentation
HTML comments
HTML Heading
HTML Paragraph
HTML formatting
Quotation and citation
HTML Links
HTML Images
HTML Lists
HTML Table
HTML Div and Span
HTML audio
HTML video
HTML Embed
HTML Media
HTML Entities
HTML Image maps
Notes 1
Tags and their attributes and uses
HTML form and input types
HTML select
HTML Datalist
HTML label, fieldset, legends
HTML SEO Tags
HTML Favicon
What is HTML?
stands for Hyper Text Markup Language
Hyper Text: Link between web pages
Markup Language: Text between tags which defines structure.
HTML defines how the web page looks and how to display
content with the help of elements.
if forms or defines the structure of your web page.
need to save the file with .html extension.
HTML Features
the learning curve is very easy (easy to modify).
Create effective presentation
Add links wherein we can add references
can display documents on platforms like MAC, Window, Linux
etc.
add video, graphics, and audios making it more attractive.
Case insensitive language.
HTML skeleton
<!DOCTYPE html>
<html>
Notes 2
<head>
<title> </title>
</head>
<body>
</body>
</html>
Elements and Attributes
element is a content along with opening and closing tag in
the html.
attributes are the additional info about the element or tag.
HTML indentation
HTML comments
comments are written to make the code understandable.
<!— here you will write comment —>
HTML Heading
there are 6 heading tags.
<!DOCTYPE html>
<html>
<head>
<title> Heading in HTML </title>
</head>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
Notes 3
<h6> Heading 6 </h6>
</body>
</html>
HTML Paragraph
We need paragraph to write our content.
we use p tag for making paragraph in HTML.
paragraph element takes whole width of the line or block i.e.
something written after paragraph element will start at next
line.
<!DOCTYPE html>
<html>
<head>
<title> Paragraph in HTML </title>
</head>
<body>
<p> This is a paragraph 1.</p>
<p> This is a paragraph 2.</p>
This is a normal text in HTML having no tag,no element.
</body>
</html>
HTML formatting
bold
italic
underline
strong
emphasize
small
Notes 4
delete
inserted text
subscript
superscript
mark
marquee
<!DOCTYPE html>
<html>
<head>
<title> Formatting in HTML </title>
</head>
<body>
<pre> pre tag is used to show content as it is written in text editors.
as here it will start from next line it will give space as much
we have given.
</pre>
<p> if you are writing poem you need to start a new line to match rhyme,
here we use br tag to break line and start from new line.</p>
<p> roses are red <br>
violets are blue <br>
whenever I close my eyes <br>
I see you
</p>
<p> <b> This is a text which is bold. </b> </p>
<p> <i> This is a text with Italic style.</i> </p>
<p> <u> This is a text which has underline.</u> </p>
<p> This is text which has <strong> strong tag </strong> which gives tex
t more significant and it makes text same as bold does, but it gives more impo
rtance than bold.</p>
<p> <em> This text has used Emphasis tag which gives text more signifi
cant and it works same as Italic does, but it gives more importance than Italic.
</em> </p>
Notes 5
<p> The tag used here is inserted text which shows which text is added i
n content <ins> this text is added</ins> and makes text underline.</p>
<p> this is <del> deleted text </del> where del tag is used to delete text.
</p>
<p> Here we are using Subscript tag to write base 2. H<sub> 2</sub>O
</p>
<p> Here we are using superscript tag to write power 2. (x + y)<sup>2</
sup> </p>
<p><marquee> this is a marquee tag. mostly used in news channels. </m
arquee> </p>
</body>
</html>
Quotation and citation
blockquote
cite
quote
address
abbreviation
<!DOCTYPE html>
<html>
<head>
<title> Quotation and Citation in HTML. </title>
</head>
<body>
<p> Quotation tag is used to write quotes.</p>
<p> <q> This is wholesome quote.</q></p>
<blockquote cite="[Link]"> this is blockquote which takes whole bl
och and see it took some space from all sides. Lorem ipsum dolor sit amet co
nsectetur adipisicing elit. Consequuntur, voluptatem commodi porro harum pe
rspiciatis quaerat dignissimos minima architecto aliquid saepe numquam nequ
e. Aperiam quas aliquam eius maiores fuga vel hic id! Tempora veritatis magn
Notes 6
am aperiam consectetur saepe exercitationem modi labore. </blockquote>
<p> cite tag is used to write some author,book or any other special name
like <cite>Willian Shakespeare </cite> </p>
<p> <address> address tag helps you to write your address. </address>
</p>
<p> abbr tag is for abbreviation for eg: <abbr title="World Health Organiz
ation">WHO</abbr></p>
</body>
</html>
HTML Links
anchor
email link
<!DOCTYPE html>
<html>
<head>
<title> Links in HTML </title>
</head>
<body>
<p> Anchor tag is used to link pages. In anchor tag we give the path of th
e page that we are going to link.</p>
<a href="[Link]">click here to go to google home page.</a> <br>
<a href="[Link]" target="_blank">click this to google home in new
page.</a>
<p> we can also make email link with anchor tag.</p>
click on <a href="[Link] are
you?">yennamvishal1883@[Link]</a> to mail.
</body>
</html>
HTML Images
Notes 7
<!DOCTYPE html>
<html>
<head>
<title> Image in HTML. </title>
</head>
<body>
<img src="[Link]" width="500" height="300" alt="Red car image" title
="Red car image"/> <br>
<img src="[Link]" width="500" height="300" alt="Red car image" title
="Red car image"/>
</body>
</html>
HTML Lists
ordered lists
<!DOCTYPE html>
<html>
<head>
<title> Ordered List in HTML </title>
</head>
<body>
<p> We are going to make ordered list. </p>
<ol>
<li> A to Z </li>
<li> 1 to 10 </li>
</ol>
<p> Above list is normal list. we can also change the type.</p>
<ol type="A">
<li> A to Z </li>
<li> 1 to 10 </li>
Notes 8
</ol>
<ol type="a">
<li> A to Z </li>
<li> 1 to 10 </li>
</ol>
<ol type="I">
<li> A to Z </li>
<li> 1 to 10 </li>
</ol>
<ol type="i">
<li> A to Z </li>
<li> 1 to 10 </li>
</ol>
<p> we can also mention from where it should be start. </p>
<ol start="4">
<li> A to Z </li>
<li> 1 to 10 </li>
</ol>
<p> we can also make nested ordered list.</p>
<ol>
<li> A to Z </li>
<ol type="A">
<li> Apple </li>
<li> Ball </li>
<li> Cat </li> <br>
. <br>
. <br>
. <br>
. <br>
Notes 9
<li> Zebra </li>
</ol>
<li> 1 to 10 </li>
<ol type="i">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
. <br>
. <br>
. <br>
. <br>
<li> 10 </li>
</ol>
</ol>
</body>
</html>
unordered lists
<!DOCTYPE html>
<html>
<head>
<title> Unordered list in HTML.</title>
</head>
<body>
<p> We are going to make unordered list </p>
<ul>
<li> drinks </li>
<li> meals </li>
<li> Special </li>
<li> Chinese </li>
</ul>
<p> Above list is normal unordered list. We can also make nested unorde
red list. Nested list means list in a list.</p>
Notes 10
<ul>
<li> Drinks </li>
<ul>
<li> Coffee </li>
<li> Green tea </li>
<li> chocolate </li>
<ul>
<li> Hot chocolate drink </li>
<li> Chocolate milk shake</li>
</ul>
</ul>
<li> Meals </li>
<ul>
<li> Chicken legs </li>
<li> Chicken Biryani </li>
<li> Butten chicken </li>
</ul>
<li> Special </li>
<ul>
<li> Family special meal non veg </li>
<li> special veg meal </li>
<li> Handi </li>
</ul>
<li> Chinese </li>
<ul>
<li> Soup </li>
<li> Fried rice </li>
<ul>
<li> Non veg </li>
<li> Veg </li>
<li> Triple fried rice</li>
</ul>
<li> Noodles </li>
<ul>
<li> Hakka noodles </li>
Notes 11
<li> Normal noodles </li>
</ul>
<li> Manchurian</li>
</ul>
</ul>
</body>
</html>
nested lists
<!DOCTYPE html>
<html>
<head>
<title> Nested List in HTML </title>
</head>
<body>
<ol>
<li> IT </li>
<ul>
<li> Web development </li>
<ul>
<li> Front end developer </li>
<li> Back end developer </li>
<li> Full stack developer </li>
</ul>
<li> Software related </li>
<ol>
<li> Software Engineer </li>
<li> Software developer </li>
<li> Software designer </li>
<li> Software tester </li>
</ol>
<li> Database related </li>
<ul>
<li> Database administrator </li>
Notes 12
<li> Data Scientist </li>
<li> Data analyst </li>
<li> Database manager </li>
</ul>
<li> Techonolies </li>
<ol>
<li> Database </li>
<li> AI/ML </li>
<li> BlockChain </li>
<li> IoT </li>
<li> Programming Languages </li>
<li> Development </li>
<li> GIT and GitHub </li>
<li> Edge computing </li>
<li> Quantum computing </li>
<li> Robotics and Automation </li>
<li> Web 3.0 </li>
<li> CyberSecurity </li>
<li> Extended Reality </li>
<li> 5G / WIFI 6 </li>
<li> AI and AI as a service </li>
<li> Biotechnology </li>
</ol>
</ul>
</ol>
</body>
</html>
description
<!DOCTYPE html>
<html>
<head>
<title> Description in HTML </title>
</head>
Notes 13
<body>
<h2> Description Topic </h2>
<dl>
<dd>
<dd> This is a description 1. </dd>
<dd> This is a description 2.</dd>
<dd> This is a description 3.</dd>
<dd> This is a description 4.</dd>
</dd>
</dl>
</body>
</html>
HTML Table
row
column
heading
title
<!DOCTYPE html>
<html>
<head>
<title> Table in HTML </title>
</head>
<body>
<caption> A Table</caption>
<table border="3">
<tr>
<th> column 1 </th>
<th> column 2 </th>
<th> column 3 </th>
</tr>
<tr>
Notes 14
<td> one </td>
<td> four </td>
<td> seven </td>
</tr>
<tr>
<td> two </td>
<td> five </td>
<td> eight </td>
</tr>
<tr>
<td> three </td>
<td> six </td>
<td> nine</td>
</tr>
</table>
</body>
</html>
nested table
<!DOCTYPE html>
<html>
<head>
<title> Nested Table in HTML </title>
</head>
<body>
<caption> Nested Table </caption>
<table border="3">
<tr>
<th> Row 1 </th>
<td> one </td>
Notes 15
</tr>
<tr>
<th> Row 2 </th>
<td>
<table border="3">
<tr>
<td> two </td>
<td> three </td>
<td> four </td>
</tr>
<tr>
<td> six </td>
<td> seven </td>
<td> eight </td>
</tr>
</table>
</td>
</tr>
<tr>
<th> Row 3 </th>
<td> five </td>
</tr>
</table>
</body>
</html>
HTML Div and Span
div: block element that takes the whole width by default and
starts in new line.
span: inline element that takes the width that is needed and
starts from where the previous element is ended.
<!DOCTYPE html>
<html>
Notes 16
<head>
<title> Div and Span in HTML </title>
</head>
<body>
<p> Div takes whole width of the block i.e. the content written after div st
arts from next line.</p>
<div>
this is div element.
</div>
this is a normal text with no element.
<p> Span element takes width required to it. The next element written aft
er span starts from where the previous span element is ended.</p>
<span> This is a span element. </span>
this is a normal text with no element.
</body>
</html>
HTML audio
HTML video
HTML Embed
HTML Media
<!DOCTYPE html>
<html>
<head>
<title> Media in HTML</title>
</head>
<body>
<p> Audio in HTML.</p>
<audio controls src="Audio.mp3" type="mp3"></audio>
<hr />
Notes 17
<p> Video in HTML. </p>
<video controls src="video.mp4" type="mpeg"></video>
<hr>
<p> We embed some websites or media for various reasons.</p>
<p> we can use embed tag or iframe tag.</p>
<iframe width="560" height="315" src="[Link]
d/wS974JC_CoE?si=GxkNXMqifm2hureD" title="YouTube video player" frame
border="0" allow="accelerometer; autoplay; clipboard-write; encrypted-medi
a; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <br>
<embed src="[Link]" type="application/pdf" width="500" height
="400">
</body>
</html>
HTML Entities
HTML Image maps
<!DOCTYPE html>
<html>
<head>
<title> Image maps in HTML </title>
</head>
<body>
<!-- Image Map Generated by [Link] -->
<img src="[Link]" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Oval Goggles" title="Oval Goggles" href="h
ttps://[Link]/s?k=oval+goggles&crid=2OX96LGC5JUR0&s
prefix=oval+goggle%2Caps%2C191&ref=nb_sb_noss_2" coords="27,22
5,258,323" shape="rect">
<area target="_blank" alt="Tea set" title="Tea set" href="[Link]
[Link]/Cello-Opalware-Queen-Saucer-Fiesta/dp/B099ZX566X/ref=sr_1_
Notes 18
8?crid=3IKDYRCB2MQJ4&keywords=tea+and+cup+set&qid=17062
49371&sprefix=tea+and+cup+set%2Caps%2C187&sr=8-8" coords
="141,435,98" shape="circle">
<area target="_blank" alt="Mobile phones" title="Mobile phones" href
="[Link]
&sprefix=mobile+phone%2Caps%2C187&ref=nb_sb_noss_1" coords
="880,276,836,453,917,474,963,299,921,287" shape="poly">
<area target="_blank" alt="Laptop" title="Laptop" href="[Link]
[Link]/s?k=laptop&crid=2BQW2BGOYZ5KN&sprefix=laptop+%2
Caps%2C189&ref=nb_sb_noss_2" coords="221,91,277,198,805,201,861,9
1" shape="poly">
<area target="_blank" alt="Laptop" title="Laptop" href="[Link]
[Link]/s?k=laptop&crid=2BQW2BGOYZ5KN&sprefix=laptop+%2
Caps%2C189&ref=nb_sb_noss_2" coords="279,200,280,536,802,535,80
2,202" shape="poly">
</map>
</body>
</html>
Tags and their attributes and uses
HTML form and input types
<!DOCTYPE html>
<html>
<head>
<title> Form and Input types in HTML. </title>
</head>
<body>
<form action="" method="">
Enter Name: <input type="text" placeholder="Full name">
<hr>
Enter Age: <input type="number"> <br>
<hr>
Notes 19
Enter Date Of Birth: <input type="date"> <br>
<hr>
Enter Time: <input type="time" placeholder="Current time"> <br>
<hr>
Enter Color: <input type="color" placeholder="Favorite color"> <br>
<hr>
Enter Email: <input type="Email"> <br>
<hr>
Enter Range: <input type="range" > <br>
<hr>
Enter URL: <input type="url"> <br>
<hr>
Enter File: <input type="file"> <br>
<hr>
Enter Password: <input type="password">
<hr>
<input type="submit" value="Submit">
<input type="reset" name="" id="" value="Reset">
</form>
</body>
</html>
HTML select
<!DOCTYPE html>
<html>
<head>
<title> Select in HTML. </title>
</head>
<body>
<select name="cars and sports" id="">
<optgroup label="cars">
<option value="BMW">BMW</option>
<option value="Ferrari">Ferrari</option>
Notes 20
<option value="Porsche">Porsche</option>
<option value="Nissan">Nissan</option>
<option value="Toyota">Toyota</option>
<option value="Tata" selected>Tata</option>
</optgroup>
<optgroup label="Sports">
<option value="BMW">Cricket</option>
<option value="Ferrari">Football</option>
<option value="Porsche">Tennis</option>
<option value="Nissan">Hockey</option>
<option value="Toyota">Running</option>
<option value="Tata" selected>Baseball</option>
</optgroup>
</select>
</body>
</html>
HTML Datalist
<!DOCTYPE html>
<html>
<head>
<title> Datalist in HTML. </title>
</head>
<body>
Search <input type="text" name="" id="" list="List">
<datalist id="List">
<option value="Apple"> </option>
<option value="Mango"> </option>
<option value="Car"> </option>
<option value="Orange"> </option>
</datalist>
<input type="button" value="search">
Notes 21
</body>
</html>
HTML label, fieldset, legends
HTML SEO Tags
title
meta description
HTML Favicon
Tags Attributes Use
tells browser which
type of document it
<!DOCTYPE html> is, it also tells
version of HTML, it
is written for user.
tells browser that it
<html> </html> dir=””, lang=””
is HTML document.
it tells metadata, it
<head> </head> is written for the
browser to read.
it displays the title
<title> </title>
of the web page.
it is used to style
<style> </style> the html document or
write CSS.
it is the body of web
page or html where
<body> </body>
the content is
visible to the user.
<h1> </h1> first heading
Notes 22
Tags Attributes Use
<h2> </h2> second heading
<h3> </h3> third heading
<h4> </h4> fourth heading
<h5> </h5> fifth heading
<h6> </h16 sixth heading
displays horizontal
<hr>
line
<p> paragraph tag
<br> breaks line
preformatting tag, it
displays the content
<pre>
as it is written
inside the tag
<b> </b> bold tag
makes bold and gives
<strong> </strong> more importance to
the text.
<i> </i> italic tag
makes italic and
<em> </em> gives more importance
to the text.
<small> </small> makes text small
<mark> </mark> highlights the text
add line breakthrough
<del> </del>
the text
add line under the
<ins> </ins>
text.
<u> </u> underline tag
<superscript> it displays power to
</superscript> the text or number
<subscript> it displays base to
</subscript> the text or number
Notes 23
Tags Attributes Use
<q> </q> quotation tag
it is a block of
<blockquote>
cite=”” quote and takes space
</blockquote>
from four sides.
<abbr> </abbr> title=”” abbreviation tag
<address> </address> address tag
used to write name of
<cite> </cite> book or name of
author.
href=”path”,
<a> </a> target=”_blank”, anchor tag
title=””, href=”[Link]
src=”path”, alt=””,
<img> </img>
width=””, height=””
moves text in
<marquee> </marquee> direction=””
horizontal direction
<ol> </ol> start=””, type=”” ordered list
<li> </li> list item
style=”list-style-type:
<ul> </ul> unordered list
”
<dl> </dl> description list
<dt> </dt> description
<dd> </dd> description data
<table> </table> border=””, table tag
<tr> </tr> create row
<td> </td> colspan=””, rowspan=”” table column
<th> </th> table heading
<caption> </caption> title of the table
<thead> </thead>
<tbody> </tbody>
<tfoot> </tfoot>
Notes 24
Tags Attributes Use
<div> </div> block element
<span> </span inline element
displays the source
<iframe> </iframe> src=””
that we need to show.
<audio> </audio>, controls, src=””,
audio tag
<source> type=””
autplay, controls,
<video> </video>,
width, height, src=””, video tag
<source>
type=””
src=””, type=””,
<embed> embedded tag
width=””, height=””
data=””, type=””,
<object> used to embed
width=””, height=””
<map> </map> name=””,
shape=””, coords=””,
<area>
href=””
<form> </form> method=””, action=”” form tag
type=”” (text, number,
password, submit, color,
date, time, email,
range, hidden, reset,
url, file, image, radio,
takes input from the
<input> checkbox) value=””,
user
readonly, disable,
size=””, placeholder=””,
required, step=””,
autofocus, autocomplete,
name
rows=””, cols=””,
<textarea> </textarea> description box
placeholder=””
<select> </select> size=”” multiple
<option> </option> value=””, selected=””
<optgroup> </optgroup> label=”” op<
Notes 25
Tags Attributes Use
<datalist>
id=””, value=””, list=””
</datalist>, <option>
<label> </label> for=”” connect element
<fieldset> </fieldset>
<legend> </legend>
<meta /> name=””, content=””,
<link /> rel=””, href=””
<style> </style>
<script> </script> src=””
Notes 26