EX.
NO:01
STUDY OF HTML TAGS
DATE: 29/06/26
AIM:
To study various HTML tags and understand their syntax, purpose, and implementation for
creating web pages.
OBJECTIVES:
• To understand the basics of HTML.
• To learn different types of HTML tags.
• To create a simple web page using HTML tags.
• To understand the structure of an HTML document.
THEORY:
HTML (HyperText Markup Language) is the standard markup language used to create web
pages. It describes the structure of a web page using tags. HTML tags tell the web browser
how to display text, images, links, tables, forms, and other elements on a webpage. An
HTML document consists of a series of elements enclosed within angle brackets (< >). Most
HTML elements have an opening tag and a closing tag, while some are empty tags that do
not require a closing tag.
General Syntax
<tagname>Content</tagname>
Example:
<p>This is a paragraph.</p>
Basic Structure of an HTML Document:
<title>My First Web Page</title>
<h1>Welcome to HTML</h1>
<p>This is my first webpage.</p>
STUDY OF COMMON HTML TAGS:
71812401050 – HARSHAVANTH S
1. Structure Tags
- Root element of an HTML document.
- Contains metadata and page information.
<title> - Defines the title displayed in the browser tab.
<body> - Contains all visible content of the webpage.
2. Heading Tags
<h1> - Largest heading.
<h2> - Heading level 2.
<h3> - Heading level 3.
<h4> - Heading level 4.
<h5> - Heading level 5.
<h6> - Smallest heading.
Example:
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
3. Text Formatting Tags
<p> - Paragraph.
<b> - Bold text.
<strong> - Important bold text.
<i> - Italic text.
<em> - Emphasized text.
<u> - Underlined text.
<mark> - Highlighted text.
<small> - Small text.
<sup> - Superscript text.
<sub> - Subscript text.
<br> - Line break.
<hr> - Horizontal line.
4. Hyperlink Tag
<a href="[Link] Google</a>
Purpose:
• Creates hyperlinks between web pages.
• Uses the href attribute to specify the destination.
71812401050 – HARSHAVANTH S
5. Image Tag
<img src="[Link]" alt="Sample Image" width="200">
Attributes:
src - Specifies the image location.
alt - Displays alternate text if the image cannot be loaded.
width - Specifies image width.
height - Specifies image height.
6. List Tags
Unordered List:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Ordered List:
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
Description List:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
7. Table Tags
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>20</td>
</tr>
71812401050 – HARSHAVANTH S
</table>
Table Tags:
<table> - Creates a table.
<tr> - Table row.
<th> - Table heading.
<td> - Table data.
8. Form Tags
<form>
Name:
<input type="text">
Email:
<input type="email">
<input type="submit" value="Submit">
</form>
Common Form Tags:
<form> - Creates a form.
<input> - Input field.
<label> - Label.
<textarea> - Multi-line text input.
<button> - Button.
<select> - Drop-down list.
<option> - Drop-down option.
9. Semantic HTML Tags
<header> - Header section.
<nav> - Navigation section.
<section> - Section of a webpage.
<article> - Independent content.
<aside> - Sidebar content.
<footer> - Footer section.
10. Empty Tags
The following tags do not require closing tags:
<br>
<hr>
71812401050 – HARSHAVANTH S
<img>
<meta>
<link>
<input>
Complete HTML Program:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tags Experiment</title>
<h1>Study of HTML Tags</h1>
<p>This experiment demonstrates commonly used HTML tags.</p>
<b>Bold Text</b><br>
<i>Italic Text</i><br>
<u>Underlined Text</u>
<hr>
<h2>List Example</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Table Example</h2>
<table border="1">
<tbody><tr>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td>Rahul</td>
<td>Web Technology</td>
</tr>
71812401050 – HARSHAVANTH S
</tbody></table>
<h2>Image Example</h2>
<img src="[Link]" alt="Sample Image" width="200">
<h2>Hyperlink Example</h2>
<a href="[Link] Google</a>
<h2>Form Example</h2>
<form>
Name:
<input type="text"><br><br>
Email:
<input type="email"><br><br>
<input type="submit" value="Submit">
</form>
APPLICATIONS:
• Website development.
• Online registration forms.
• Educational websites.
• E-commerce websites.
• Blogs and news portals.
• Portfolio websites.
• Web applications.
71812401050 – HARSHAVANTH S
RESULT:
The experiment was performed successfully. Various HTML tags were studied and
implemented to create a basic web page. The output displayed headings, paragraphs, text
formatting, lists, tables, images, hyperlinks, and forms correctly.
71812401050 – HARSHAVANTH S