What are markup languages?
A markup language is a way of adding tags to text so that
computers know how the content should be organized,
displayed, or processed.
Example:
In HTML: - <h1> My Website </h1>
<p> This is a paragraph. </p>
<h1> tag tells the browser that “My Website” is a
heading.
<p> tag tells the browser that the text is a paragraph.
Tags: - In HTML, tags are special keywords enclosed in angle
brackets (< >) that tell a web browser how to display content
on a webpage.
Example
<p>This is a paragraph. </p>
<p> = opening tag (starts a paragraph)
This is a paragraph. = content
</p> = closing tag (ends the paragraph)
Types of Tags
1. Paired Tags: - These have both opening and closing tags.
Eg: <p>Paragraph text</p>
2. Empty (Self-Closing) Tags: - These do not need a closing tag.
Eg: <hr> and.<br>
Attributes: - An attribute is extra information added to an
HTML tag that modifies its behavior or provides additional
details.
Think of it this way:
Tag = the element (what something is)
Attribute = additional properties of that element
Syntax
Attributes are written inside the opening tag:
<tagname attribute="value">Content</tagname>
Example 1: Link
<a href="[Link] Website</a>
Here:
<a> = tag (creates a link)
href = attribute
"[Link] = attribute value
The href attribute tells the browser where the link should go.
Common Attributes
Attribut Used For
e
href Link destination
src Image source
alt Alternative text for images
id Unique identifier
class Grouping elements for
CSS/JavaScript
style Inline styling
title Tooltip text
Case Insensitivity: - Html is not picky about capitalization.
You can write tags and attributes in upper or lower case or mix.
HTML Entities: - HTML entities are special codes used in
HTML to display reserved characters, symbols, or characters
that are difficult to type directly.
They begin with an ampersand (&) and end with a semicolon
(;).
Why HTML entities are needed
Some characters have special meaning in HTML. For example:
< starts an HTML tag.
> ends an HTML tag.
& begins an entity reference.
Quotes (" and ') can interfere with attribute values.
If you want these characters to appear as text on a webpage,
you use entities.
Charact Entity Numeric Outp
er Name Entity ut
< < < <
> > > >
& & & &
" " " "
' ' ' '
HTML Comments: - Comments in HTML are notes that you
can add to your code to explain what's going on, make
reminders, or temporarily disable parts of your code.
To create a comment in HTML, you enclose your text within
<! -- and -->. Anything between these tags will be ignored by
the browser.
Whitespaces: - Whitespaces in HTML refer to the spaces,
tabs, and line breaks that are used to format the code.
Browsers typically collapse multiple consecutive whitespaces
into a single space when rendering the content.
Basic Tags
!DOCTYPE: - The <!DOCTYPE> declaration is an instruction
placed at the very beginning of an HTML document. It tells the
web browser which version of HTML the page uses so that the
browser can render the page correctly.
In short, <!DOCTYPE html> tells the browser, "This document is
written in HTML5. Render it according to modern web
standards."
Syntax
<! DOCTYPE html>
In modern web development, the above declaration is used for
HTML5.
Why is it Important?
Without a proper DOCTYPE declaration, browsers may enter
Quirks Mode, where they try to imitate the behavior of very old
browsers. This can lead to:
Incorrect page layout
Inconsistent CSS rendering
Different behavior across browsers
With the correct DOCTYPE, browsers use Standards Mode,
which follows modern web standards.
Feature Description
Purpose Tells the browser the HTML
version
Position First line of the HTML document
HTML5 Syntax <!DOCTYPE html>
Is it a tag? No
Visible on No
webpage?
Helps browser use Standards Mode
What is UTF-8?
UTF-8 (Unicode Transformation Format – 8-bit) is a character
encoding standard that tells computers how to store and
display text.
It allows a webpage or program to correctly display characters
from almost every language in the world, along with symbols
and emojis.
Why Do We Need Character Encoding?
Computers only understand binary data (0s and 1s). Therefore,
every character must be converted into numbers.
For example:
Charact Unicode Code
er Point
A U+0041
B U+0042
₹ U+20B9
😊 U+1F60A
UTF-8 defines how these Unicode characters are stored as
bytes.
Example in HTML
<meta charset="UTF-8">
This tells the browser:
"Interpret all the text in this document using UTF-8 encoding."
Document Structure
<! DOCTYPE html>
│
▼
<html>
├── <head>
│ └── Information about the page
│
└── <body>
└── Visible content of the page
Complete Basic HTML structure/code
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello World! </h1>
<p>Welcome to HTML. </p>
</body> </html>
Basic Tags
Tags Attributes Meaning Syntax Descriptio
n
<htm <html lang=”en”> The html lang <html>… It is a root
l> attribute is used </html> element.
to specify the Every
language of the other
document. element is
placed
inside it.
<hea - The <head> <head>… The
d> section </head> <head>
commonly tag
contains: contains
<title> informatio
<meta> n about
<link> the HTML
<style> document
<script> that is not
<base> displayed
directly on
the
webpage.
This
informatio
n is called
metadata.
It is placed
inside the
<html>
tag and
before the
<body>
tag.
<met 1.<meta 1. This tells the <meta The
a> charset="UTF-8"> browser to use attribute="value <meta>
the UTF-8- "> tag
character provides
encoding. (<meta> is an metadata
It allows the pageempty tag, (informatio
to display: meaning it does n about
English not have a the
characters closing tag.) document).
Hindi It is placed
characters inside the
Symbols <head>
Emoji’s section
2. <meta and does
name="viewport" 2. This makes the not
content="width=devi webpage adapt produce
ce-width, initial- properly to any visible
scale=1.0"> mobile devices content.
and different
screen sizes.
width=devic
e-width →
uses the
device's
screen
width.
initial-scale=1.0
3. <meta → sets the initial
name="description" zoom level.
content="Learn
HTML from beginner 3. Search engines
to advanced."> may use this
description in
search results.
<bod - Some common <body>....</ The
y> elements inside body> <body>
the <body> tag tag
are: Important contains all
Points: the
<h1> to There content
<h6> should be that is
<p> only one displayed
<a> <body> on the web
<img> tag in an page.
<ul>, <ol> HTML
<table> document.
<form> It comes
<div> after the
<button> <head>
tag.
Everything
visible on
the
webpage is
generally
placed
inside it.
Browsers
display the
contents of
the
<body>
tag.
Textual Tags
Tags Attributes Meaning Synta Description
x
<h1> - - <h1> Headings are used to
to …</ define the titles and
<h6> h1> subtitles within a
document. HTML
provides six levels of
headings,
from <h1> (the most
important and largest)
to <h6> (the least
important and
smallest).
<title> - - <title> The <title> tag in
…</ HTML defines the title of
title> the HTML document.
This title is displayed in
the browser's title bar
or tab, and it's also used
for bookmarking pages
and in search engine
results. It's placed
within
the <head> section of
the HTML document
<p> - - <p>… The <p> tag in HTML
</p> defines a paragraph.
Browsers automatically
add a single blank line
before and after each
paragraph, creating a
clear separation
between blocks of text.
It's a block-level
element, meaning it
occupies the full width
available to it and starts
on a new line.
<hr> - - <hr> The <hr> tag in HTML
creates a thematic
break in an HTML page
and is most often
displayed as a
horizontal rule. It's used
to separate content
visually, like dividing
sections of text or
indicating a change in
topic. The <hr> tag is
an empty element,
meaning it doesn't have
a closing tag.
<br> - - <br> The <br> tag in HTML
creates a line break
within a text block. It's
used to start a new line
without creating a new
paragraph, effectively
forcing the text that
follows to appear on the
next line. It is an empty
element, meaning it has
no closing tag.
b/ - - <b>… The <b> and <strong
strong </b> > tags in HTML are used
<stron to make text appear
g>… bold. While both
</ achieve a similar visual
strong effect, the <b> tag is
> primarily for stylistic
purposes, indicating
text that should be
visually distinguished
without necessarily
conveying importance.
On the other hand,
the <strong> tag
signifies that the
enclosed text has
strong importance,
seriousness, or urgency.
<pre> - - <pre> The <pre> tag in HTML
…</ represents preformatted
pre> text. Text inside
a <pre> element is
displayed in a fixed-
width font, and it
preserves both spaces
and line breaks. This is
useful for displaying
code snippets, ASCII art,
or any other text where
formatting is important.
i/ em - - <i>… The <i> and <em> tag
</i> s in HTML are used to
<em> emphasize text.
…</ The <i> tag represents
em> text that is set off from
the normal prose, such
as technical terms,
foreign words, or
thoughts.
The <em> tag
represents stress
emphasis of its
contents. While both
may render similarly in
browsers (often as
italicized
text), <em> has
semantic meaning,
indicating importance,
whereas <i> is purely
presentational.
<mark - - <mark The <mark> tag in
> >… HTML is used to
<mark highlight specific parts
> of text within a larger
block of content. It's
primarily intended to
draw the reader's
attention to these
sections, often because
they are relevant to the
user's current activity or
search query. The
default styling usually
renders the marked text
with a yellow
background, but this
can be customized
using CSS.
<sub> - - <sub> The <sub> tag in HTML
…</ is used to display text
sub> as subscript. Subscript
text appears slightly
below the normal line of
text and is typically
rendered in a smaller
font size. It's commonly
used for mathematical
formulas, chemical
formulas, or footnotes.
<sup> - - <sup> The <sup> tag in HTML
…</ is used to display text
sup> as superscript.
Superscript text
appears slightly above
the normal line of text
and is typically
rendered in a smaller
font size. It's commonly
used for things like
exponents, ordinal
numbers (e.g., 1st,
2nd), and footnotes.
<a> href= The href attribute <a Links, also known as
https: tells the browser attribut hyperlinks, are
//example. where the link e=”val elements that connect
com should go. ue”>… one web resource to
</a> another. They allow
Defines where to users to navigate
<a open the link. between different pages
href="[Link] Common values on the same website or
[Link]" include _self to external websites.
target="_blank (default), _blank Links are created using
">Open site in (new tab), the <a> (anchor) tag,
a new tab</a> _parent, and _top. and they can point to
various types of
Forces the resources, including
<a browser to HTML pages, images,
href="/files/do download the documents, and more.
c_382.pdf" linked resource
download="re instead of
[Link]">Dow navigating to it.
nload annual Can include a
report</a> string to predefine
the file name.
<a Dictates the
href="[Link] relationship
xternal- between the
[Link]" current page and
rel="noopener the linked
noreferrer">Vi resource.
sit safe Essential values
link</a> include noopener,
noreferrer, and
nofollow