HTML_pdf
HTML – HyperText Markup Language
Introduction
What is HTML?
HTML (HyperText Markup Language) is the standard language used to create web pages. It provides the
basic structure and building blocks of a website.
Terms
HyperText
• Text that can take us to another page or resource through links.
Markup Language
• A set of symbols or tags inserted into a document to define its structure and formatting.
Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Doc</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Explanation
• <!DOCTYPE html> → Declares the document as HTML5.
• <html> → Root element of the webpage.
• <head> → Contains metadata and page information.
• <title> → Title displayed on the browser tab.
• <body> → Contains all visible webpage content.
• <h1> → Main heading.
1
Element
An HTML element consists of:
<tag> Content </tag>
Example:
<h1>Hello</h1>
Here:
• Opening Tag → <h1>
• Content → Hello
• Closing Tag → </h1>
Together they form an HTML element.
Attribute
Attributes provide additional information about HTML elements.
Features
• Specified inside the opening tag.
• Modify the behavior of an element.
• Written as Name–Value pairs.
Example:
<a href="[Link]
Here:
• Attribute Name → href
• Attribute Value → "[Link]
2
Important HTML Tags and Attributes
1. Anchor Tag ( <a> )
Used to create hyperlinks.
<a href="[Link]
href Attribute
Specifies the URL to which the user should be redirected.
2. Image Tag ( <img> )
Used to display images.
<img src="[Link]">
src Attribute
Specifies the path or location of the image.
Note: <img> is an empty/self-closing tag.
3. Heading Tags
HTML provides only six heading tags.
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Size decreases from <h1> to <h6> .
3
4. alt Attribute
Provides alternate text when an image cannot be displayed.
<img src="[Link]" alt="Nature Image">
5. Audio Tag ( <audio> )
Used to include audio in a webpage.
<audio controls>
<source src="song.mp3">
</audio>
Audio Attributes
controls
Displays audio controls.
<audio controls>
autoplay
Audio starts automatically when the page loads.
<audio controls autoplay>
muted
Audio starts automatically but remains muted.
<audio controls autoplay muted>
loop
Audio keeps playing repeatedly.
4
<audio controls loop>
6. target Attribute
Opens the linked page in a new tab.
<a href="[Link] target="_blank">
Google
</a>
7. title Attribute
Displays tooltip text when the mouse hovers over an element.
<h1 title="Hi">Hello</h1>
8. Line Break Tag ( <br> )
Moves content to the next line.
Hello<br>World
Self-closing tag
9. Horizontal Rule Tag ( <hr> )
Creates a horizontal line to separate content.
<hr>
Empty/Self-closing tag
5
Text Formatting Tags
Emphasis Tag
Makes text italic and emphasizes it.
<em>Text</em>
Output: Text
Strong Tag
Marks text as important and displays it in bold.
<strong>Text</strong>
Output: Text
Mark Tag
Highlights text.
<mark style="background-color:red">
Highlighted Text
</mark>
Subscript Tag
H<sub>2</sub>O
Output: H₂O
6
Monospaced Tag
<tt>Monospaced Text</tt>
Paragraph Tag
<p>Normal Text</p>
Bold Tag
<b>Bold Text</b>
Italic Tag
<i>Italic Text</i>
Underline Tag
<u>Underline Text</u>
Small Tag
<small>Small Text</small>
Iframe
An iframe is used to embed another webpage inside the current webpage.
7
<iframe src="[Link]
Video Tag
Used to display videos.
<video src="video.mp4" height="300" controls">
</video>
Attributes
• src → Video path
• height → Video height
• controls → Displays video controls
Making an Image or Video Clickable
You can turn an image or video into a hyperlink by wrapping it inside an anchor tag.
Example:
<a href="[Link]
<img src="[Link]">
</a>
or
<a href="[Link]
<video src="video.mp4" controls></video>
</a>
Quick Revision
• HTML = HyperText Markup Language
• Elements = Opening Tag + Content + Closing Tag
• Attributes = Extra information for elements
8
• href → Hyperlink destination
• src → Path of image/audio/video
• alt → Alternate image text
• target="_blank" → Opens link in new tab
• title → Tooltip text
• <br> → New line
• <hr> → Horizontal line
• <em> → Italic emphasis
• <strong> → Bold important text
• <mark> → Highlight text
• <iframe> → Embed webpage
• <audio> → Add audio
• <video> → Add video