HTML UNIT 2
HTML UNIT 2
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Let’s see each part of this structure to understand its function and
importance.
1. <!DOCTYPE HTML>: The <!DOCTYPE html> declaration is
placed at the beginning of the document. It tells the browser
that the document follows HTML5 standards, ensuring
consistent rendering across browsers.
2. <html> Tag: The <html> tag wraps the entire document,
serving as the root element of an HTML page. It typically
includes the lang attribute to specify the language of the
content.
3. <head> Section: The <head> section contains metadata,
scripts, styles, and other information not displayed directly on
the page but essential for functionality and SEO.
4. <body> Section: The <body> section contains all the visible
content of the web page, including text, images, videos, links,
and more. This is where you’ll add the main elements to display
on the page.
Tags and Elements for Structuring an HTML
Document
HTML tags are structural components enclosed in angle brackets. They
are typically opened and closed with a forward slash (e.g., <h1></h1>).
Some tags are self-closing, while others support attributes like width,
height, and controls for defining properties or storing metadata.
There are generally two types of tags in HTML
1. Paired Tags: These tags come in pairs i.e. they have both
opening(< >) and closing(</ >) tags.
Example: <p> </p> - paragraph tag
<body></body> - body tag
2. Empty Tags: These tags are self-closing and do not require a
closing tag.
Example: <br> - break tag
<img> - image tag
The HTML element is everything from the start tag to the end tag:
HISTORY OF HTML:
What is HTML?
Currently, we are using HTML5, which is the latest and most advanced
version of HTML.
Advantages of HTML
• HTML is used to build websites.
• It is supported by all browsers.
• It can be integrated with other languages like CSS, JavaScript,
etc.
Disadvantages of HTML
• HTML can only create static web pages. For dynamic web
pages and logic, we need JavaScript.
• A large amount of code has to be written to create a simple
web page.
<html>
<body>
<h2>This is a Subheading</h2>
<h4>This is a Sub-Subheading</h4>
</body>
</html>
HTML Paragraphs
A paragraph in HTML is simply a block of text enclosed within the <p>
tag. The <p> tag helps divide content into manageable, readable
sections. It’s the go-to element for wrapping text in a web page that is
meant to be displayed as a distinct paragraph.
Syntax:
<p> Content</p>
<html lang="en">
<head>
<title>The p tag</title>
</head>
<body>
</body>
</html>
Output:
The HTML <b> element defines bold text, without any extra importance.
Example
<b>This text is bold</b>
OUTPUT:
The HTML <strong> element defines text with strong importance. The
content inside is typically displayed in bold.
Example
<strong>This text is important!</strong>
OUTPUT:
Tip: The <i> tag is often used to indicate a technical term, a phrase from
another language, a thought, a ship name, etc.
Example
OUTPUT:
The <font> tag was used in HTML 4 to specify the font face, font size,
and color of text.
The HTML <font> Tag plays an important role in the web page to
create an attractive and readable web page. The font tag is used to
change the color, size, and style of a text and it was used in HTML4.
The base font tag is used to set all the text to the same size, color, and
face.
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
</font>
</body>
</html>
Syntax
<font size="number" face="font_family"
color="color_name|hex_number|rgb_number">
OUTPUT:
This is a paragraph.
<html>
<head>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
<small> Tag
</h2>
<small>
Welcome to GeeksforGeeks!
</small>
</body>
</html>
Output:
STRONG TAG
The <strong> tag is used to define text with strong importance. The
content inside is typically displayed in bold. The HTML <strong> Tag is
the parsed tag and is used to show the importance of the text. The
content inside it is generally in bold format. The primary purpose
of <strong> tag is to provide semantic meaning to the content,
indicating its importance to both browsers and developers.
Syntax
<strong> Contents... </strong>
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
<strong> Tag
</h2>
<strong>
Welcome to geeksforGeeks!
</strong>
</body>
</html>
OUTPUT:
HTML <strike> Tag
The <strike> tag defines a strike or line through Text. This tag creates
a cut line in the text. This tag is depreciated from HTML 5. Now,
the <del> tag is used instead of this tag.
Syntax:
<strike> Contents </strike>
Example:
<!DOCTYPE html>
<html>
<body>
<h2>
Welcome To GeeksforGeeks
</h2>
<strike>
Hi Geeks!
</strike>
</body>
</html>
OUTPUT:
HTML del Tag(alternative)
The HTML <del> tag is used to indicate text that has been deleted from
a document.
• It visually represents this deletion by striking through the text,
which helps in tracking changes or revisions in documents.
• It provides semantic meaning for content that has been
intentionally removed, such as in editing or version control
scenarios.
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<p>
Sanskrit is a
<del>mathematic</del>
language
</p>
</body>
</html>
OUTPUT:
Example:
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Output:
<body>
</div>
</body>
</html>
OUTPUT: