Scribd
Upload
6 views

HTML_Om

The document provides a comprehensive overview of HTML tags and structure, detailing the basic components of an HTML document, including the doctype, html, head, and body sections. It explains the purpose and usage of various HTML elements such as block elements, text elements, and code-related elements, along with coding conventions and best practices. Additionally, it highlights the benefits of using Visual Studio Code shortcuts for creating HTML boilerplates and emphasizes the importance of semantic meaning in web development.

Uploaded by

nywptwyyxn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

HTML_Om

The document provides a comprehensive overview of HTML tags and structure, detailing the basic components of an HTML document, including the doctype, html, head, and body sections. It explains the purpose and usage of various HTML elements such as block elements, text elements, and code-related elements, along with coding conventions and best practices. Additionally, it highlights the benefits of using Visual Studio Code shortcuts for creating HTML boilerplates and emphasizes the importance of semantic meaning in web development.

Uploaded by

nywptwyyxn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

HTML Tags and Structure

HTML (HyperText Markup Language) is the foundation of web development. It consists of tags
that define the structure, content, and presentation of web pages. Tags are enclosed in angle
brackets (<>) and usually come in pairs: an opening tag (<tag>) and a closing tag (</tag>).

Basic HTML Structure

The basic structure of an HTML document includes the following sections:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Document</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a basic HTML structure.</p>
</body>
</html>

1. <!DOCTYPE html>:
o Declares the document type and version of HTML being used (HTML5).
o Helps the browser render the page correctly.
2. <html lang="en">:
o The <html> tag is the root element of an HTML document.
o The lang="en" attribute specifies the language of the document's content as
English. This is important for accessibility and SEO.
3. <head>:
o Contains meta-information about the document, such as character encoding,
viewport settings, title, and links to external resources like CSS or JavaScript
files.

a. <meta charset="UTF-8">:

o Specifies the character encoding as UTF-8, which supports most characters in


different languages.

b. <meta name="viewport" content="width=device-width, initial-


scale=1.0">:

o Ensures the page is responsive by setting the width to the device's screen size and
the initial zoom level to 1.0.

c. <title>HTML Document</title>:
o Defines the title of the webpage. This title appears on the browser tab and in
search engine results.
4. <body>:
o Contains the content of the HTML document that is visible to users in the
browser.

a. <h1>:

o Represents a top-level heading. Here, it displays "Welcome to HTML."

b. <p>:

o Defines a paragraph. The content within the tags ("This is a basic HTML
structure.") is the paragraph text.

Shortcut to Create the HTML Boilerplate in VS Code

Visual Studio Code (VS Code) provides a built-in shortcut to generate the basic HTML structure
instantly:

1. Steps:
o Open a new file in VS Code.
o Save the file with a .html extension (e.g., index.html).
o Type ! (exclamation mark) and press Tab or Enter.
2. Result: This will auto-generate the following HTML boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

3. Customization:
o Replace "Document" in the <title> tag with your desired page title.
o Add your content inside the <body> tag.

Benefits of Using the VS Code Shortcut


1. Saves time and ensures consistent structure.
2. Reduces chances of errors in writing basic tags.
3. Allows immediate focus on writing the content instead of setting up the boilerplate.

HTML Coding Conventions

1. Indentation: Use consistent indentation (2 or 4 spaces) to make the code readable.

<div>
<p>Nested content</p>
</div>

2. Lowercase Tags: Always use lowercase for tags and attributes.

<p>Correct</p>

3. Self-closing Tags: Include a forward slash for self-closing tags.

<img src="image.jpg" alt="Image" />

4. Meaningful Attribute Names: Use meaningful and descriptive attributes.

<img src="logo.png" alt="Company Logo" />

5. Avoid Deprecated Tags: Do not use outdated tags like <font>; instead, use CSS for
styling.

Block Elements Explained

Block elements are fundamental in HTML because they structure the layout of a webpage. These
elements are designed to start on a new line and typically extend across the full width of their
container. They are ideal for creating larger sections of content like paragraphs, headings, and
containers.

Here’s a detailed breakdown of some important block elements:

1. <div>: A Generic Container

• Purpose: The <div> element is a generic container used to group content or elements
together. It has no semantic meaning by itself, but it is widely used for layout and styling
purposes.
• Common Use Cases:
o Grouping related elements for styling with CSS.
o Creating sections within a webpage.

Example:

<div>
<h1>Block Element</h1>
<p>This is a paragraph inside a div.</p>
</div>

• Explanation:
o The <div> groups the <h1> and <p> tags together.
o Useful for applying shared styles or JavaScript functionality to these elements.

2. <header>: Represents Introductory Content

• Purpose: The <header> element is used to define the introductory section of a webpage
or a section. It typically contains headings, navigation menus, or logos.
• Common Use Cases:
o Placing a website’s title or branding.
o Adding a navigation bar.

Example:

<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>

• Explanation:
o The <header> groups the title and navigation links.
o Helps search engines understand the introductory content of a page or section.

3. <section>: Thematic Grouping of Content

• Purpose: The <section> element groups related content within a webpage. It is often
used for dividing content into sections, each with its own theme.
• Common Use Cases:
o Grouping "About Us" or "Services" content on a webpage.
o Creating visually distinct sections in a webpage.

Example:

<section>
<h2>About Us</h2>
<p>We are a global company dedicated to innovation.</p>
</section>

• Explanation:
o The <section> groups the heading and paragraph into a single thematic block.
o Makes the page more structured and improves readability.

4. <article>: Represents Self-Contained Content

• Purpose: The <article> element is used for self-contained, reusable content such as
blog posts, news articles, or user-generated comments.
• Common Use Cases:
o Blog posts.
o News or magazine articles.
o Forum posts.

Example:

<article>
<h2>Blog Post</h2>
<p>This is an article about web development trends in 2025.</p>
</article>

• Explanation:
o The <article> groups the heading and paragraph, indicating they belong
together as a single, self-contained item.
o Can be syndicated or shared independently of the rest of the webpage.

5. <footer>: Defines Footer Content

• Purpose: The <footer> element is used to define the footer section of a webpage or a
section. It typically contains copyright information, links, or contact details.
• Common Use Cases:
o Adding legal information like copyrights.
o Placing contact details or navigation links.
Example:

<footer>
<p>&copy; 2025 My Website</p>
<p>Contact us: <a
href="mailto:[email protected]">[email protected]</a></p>
</footer>

• Explanation:
o The <footer> defines the end of a webpage or section.
o Commonly used for supplemental information relevant to the entire page or a
specific section.

Why Use Block Elements?

1. Structure: They divide the content into logical sections, making it easier to read and
navigate.
2. Semantic Meaning: Elements like <header>, <footer>, <article>, and <section>
provide semantic context, which improves SEO and accessibility.
3. Styling: Block elements provide a foundation for applying styles via CSS.

How These Elements Work Together

Here’s an example combining all these elements:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Structure</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<section id="about">
<h2>About Us</h2>
<p>We are a global leader in technology solutions.</p>
</section>
<article>
<h2>Latest Blog Post</h2>
<p>Explore the top web development trends in 2025!</p>
</article>

<footer>
<p>&copy; 2025 My Website | All Rights Reserved</p>
</footer>
</body>
</html>

• Result: The webpage is cleanly divided into distinct sections, making it easy to navigate
and understand. Each block element contributes to the structure and organization of the
page.

Text Elements Explained

Text elements in HTML are inline elements used to define, format, or emphasize text. These
elements enhance the readability of the content and provide semantic meaning to different parts
of the text.

1. <p>: Paragraph

• Purpose: Defines a block of text as a paragraph.


• Characteristics:
o Automatically adds a margin before and after the paragraph.
o Suitable for creating text-heavy sections.

Example:

<p>This is a paragraph.</p>

• Explanation: The <p> element groups text into logical units, making the content easier to
read and visually appealing.

2. <strong>: Strong Importance

• Purpose: Marks text with strong importance, typically displayed as bold text.
• Semantic Meaning:
o It implies importance or urgency, rather than just visual styling.

Example:
<p>This is <strong>important</strong> text.</p>

• Explanation: The <strong> element not only bolds the text but also provides semantic
emphasis for screen readers or search engines.

3. <em>: Emphasized Text

• Purpose: Adds emphasis to text, typically displayed in italic.


• Semantic Meaning:
o Suggests importance or stress in pronunciation.

Example:

<p>This is <em>emphasized</em> text.</p>

• Explanation: The <em> element can help highlight specific parts of a sentence where
emphasis is required.

4. <span>: Inline Container

• Purpose: A generic inline container used for styling or grouping text.


• Characteristics:
o No predefined styles or semantics.
o Ideal for applying CSS styles or JavaScript functionality to specific parts of text.

Example:

<p>This is a <span style="color: red;">red</span> word.</p>

• Explanation: The <span> element is used here to change the color of the word "red"
without affecting other parts of the text.

5. <mark>: Highlighted Text

• Purpose: Highlights text, usually displayed with a yellow background.


• Semantic Meaning:
o Used to denote important or relevant text in a document.

Example:
<p>This is <mark>highlighted</mark> text.</p>

• Explanation: The <mark> element is visually distinct, making important text stand out to
readers.

Code-Related Elements(Not required much ….useful just in case want to make


more interactive )

These elements are designed for displaying programming-related content in a readable and
semantically meaningful way.

1. <code>: Inline Code

• Purpose: Represents a snippet of code or programming instructions.


• Characteristics:
o Displayed in a monospace (fixed-width) font.

Example:

<p>Use the <code>printf()</code> function in C.</p>

• Explanation: The <code> element highlights "printf()" as a programming instruction,


separating it from normal text.

2. <pre>: Preformatted Text

• Purpose: Preserves whitespace, line breaks, and indentation exactly as written in the
code.
• Characteristics:
o Often used for displaying blocks of code.

Example:

<pre>
Line 1
Line 2 (indented)
</pre>

• Explanation: The <pre> element displays text as-is, making it suitable for code blocks or
ASCII art.
3. <kbd>: Keyboard Input

• Purpose: Represents user input via the keyboard.


• Characteristics:
o Typically displayed in a monospace font.
o Useful for documenting shortcuts or commands.

Example:

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

• Explanation: The <kbd> element emphasizes keyboard interactions, making


documentation or tutorials more intuitive.

4. <samp>: Sample Output

• Purpose: Displays sample or expected output from a program.


• Characteristics:
o Often used alongside <code> or <pre>.

Example:

<p>Output: <samp>Hello, World!</samp></p>

• Explanation: The <samp> element helps distinguish program outputs from regular text.

5. <var>: Variables in Programming

• Purpose: Represents a variable or parameter in programming or mathematics.


• Characteristics:
o Typically italicized by default.

Example:

<p>Let <var>x</var> = 10.</p>

• Explanation: The <var> element highlights "x" as a variable, providing semantic


meaning to mathematical or programming expressions.
How These Elements Work Together

Here’s an example combining all these elements:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text and Code Elements</title>
</head>
<body>
<p>This is a basic paragraph with <strong>important</strong> and
<em>emphasized</em> text.</p>

<p>You can style text like <span style="color: blue;">this</span> or


highlight it like <mark>this</mark>.</p>

<p>Use the <code>print()</code> function in Python to display output. For


example:</p>
<pre>
print("Hello, World!")
</pre>

<p>To copy text, press <kbd>Ctrl</kbd> + <kbd>C</kbd>. The output will


be:</p>
<p>Output: <samp>Hello, World!</samp></p>

<p>In mathematics, <var>x</var> is often used to represent a


variable.</p>
</body>
</html>

• Result:
o Paragraphs show different types of emphasized text.
o Inline and block code elements are displayed with proper formatting.
o Highlights and user inputs are visually distinct.

This structured approach improves readability, semantics, and user experience.

Sample Code Combining All Elements


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tags and Elements</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<header>
<h1>HTML Elements Explained</h1>
</header>

<section>
<article>
<h2>Block Elements</h2>
<div>
<p>This is a block element example.</p>
</div>
</article>
<article>
<h2>Text Elements</h2>
<p>This text is <strong>bold</strong> and <em>italic</em>.</p>
<p class="highlight">Highlighted text using CSS.</p>
</article>
<article>
<h2>Code Elements</h2>
<p>Inline code: <code>let x = 10;</code></p>
<pre>
function hello() {
console.log("Hello, World!");
}
</pre>
<p>Keyboard shortcut: <kbd>Ctrl</kbd> + <kbd>Alt</kbd> +
<kbd>Del</kbd></p>
</article>
</section>

<footer>
<p>&copy; 2025 Your Website</p>
</footer>
</body>
</html>

Setting Font Style


<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>setting font style</title>
</head>
<body>
<b>welcome to VIT college</b><br>
<i>welcome to VIT college</i><br>
<strong>welcome to VIT college</strong><br>
<strike>welcome to VIT college</strike><br>
<center>welcome to VIT college</center><br></body>
</html>
Setting Font and Colors
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>setting font and colors</title>
</head>
<body bgcolor=”pink”>
<h1>India</h1>
<font face="arial" color="red" size="5">
India is a country that occupies the greater part of South Asia<br>
<font face="timesnewroman" color="green" size="6">
India is a country that occupies the greater part of South Asia
</body>
</html>

HTML Empty Tags


<hr> horizontal rule
The <hr> tag defines a thematic break in an HTML page
Thematic breaks are breaks between two themes, usually placed between two paragraphs
It is most often displayed as a horizontal rule

<br> -line break


To display in next line in web page
No ending tag

<!DOCTYPE html>
<html>
<body>
<h1>HTML Entity Example</h1>
<h2>The characters are: &lt; &gt; &le; &frac12; &frac14; &amp;</h2>
</body>
</html>

List
HTML lists allow web developers to group a set of related items in lists.
Types:
ordered list
1. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
2. The list items will be marked with numbers by default
unordered list
● A list that does not order its items by letter or number
● An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
● The list items will be marked with bullets (disc) by default

Unordered List
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Unordered list</title>
</head>
<body>
<h1> My favorite drinking items </h1>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

Ordered list
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Ordered list</title>
</head>
<body>
<h1> My favorite drinking items </h1>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

Nested list
● Lists may be nested to represent hierarchical relationships, as in a multilevel outline
● A nested list is simply a list that occurs as an element of another list

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>nested list</title>
</head>
<body>
<h1> My favorite items </h1>
<ol>
<li>Food items
<ul><li>biriyani</li>
<li>dosai</li>
<li>chicken rice</li>
</ul>
</li>
<li>Drinking items
<ul><li>coffee</li>
<li>tea</li>
<li>milk</li>
</ul>
</li>
</ol>
</body>
</html>

Linking(hyperlink)

● One of the most important HTML5 features is the hyperlink, which references (or links to) other resources,
such as HTML5 documents and images.
● Web browsers typically underline text hyperlinks and color their text blue by default
● Links are created using the a (anchor) element.
● It defines a hyperlink to the URL assigned to attribute href (hypertext reference), which specifies a
resource’s location, such as
○ a web page or location within a web page
○ a file
○ an e-mail address

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Image</title>
</head>
<body>
<h1>Here are my favorite sites:</h1>
<strong>Click a name to visit that site.</strong><br>
<a href = "http://www.facebook.com">Facebook</a><br>
<a href = "http://www.twitter.com">twitter</a><br>
<a href = "http://www.google.com">google</a><br>
Hyperlinking to an E-Mail Address
<a href = "mailto:[email protected]">mail</a>
Link to webpage
<a href = "image.html">click</a>
Using Images as Hyperlinks
<img src = "tajmahal.jpg" width = "300" height = "300" alt = "tajmahal"/>
</body>
</html>

HTML <nav> tag


● HTML <nav> tag is used to represent a section which contains navigation links, either within current document
or to another document.
● Examples of some navigation links are menu, table of contents, indexes, etc.

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>nav</title>
</head>
<body>
<h1>The nav element</h1>
<h2>The nav element defines a set of navigation links:</h2>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
</body>
</html>
Internal Linking

● Internal linking—a mechanism that enables the user to jump between locations in the
same document.

● Internal linking is useful for long documents that contain many sections.

● Clicking an internal link enables the user to find a section without scrolling through the
entire document.

<!DOCTYPE html>
<html>
<head><meta charset = "utf-8">
<title>Internal linking</title>
</head>
<body>
<img src="internet.jpg" height="200" width="200">
<h1 id = "features">The Best Features of the Internet</h1>
<a href = "#drawbacks">Go to Drawbacks of Internet</a>
<ul>
<li>You can meet people from countries around the world.</li>
<li>You have access to new media as it becomes public:
<ul>
<li>New games</li>
<li>New applications
<ul>
<li>For Business</li>
<li>For Pleasure</li>
</ul>
</li>
<li>Around the clock news</li>
<li>Search Engines</li>
<li>Shopping</li>
<li>Programming
<ul>
<li>HTML5</li>
<li>Java</li>
<li>Dynamic HTML</li>
<li>Scripts</li>
<li>New languages</li>
</ul>
</li>
</ul>
</li>
<li>Links</li>
<li>Keeping in touch with old friends</li>
<li>It is the technology of the future!</li>
<li>Extension of Existing IT Technology.</li>
<li>Flexibility of Communication</li>
<li>Security</li>
<li>Low Cost</li>
</ul>
<h1 id = "drawbacks">Drawbacks of Internet</h1>
<a href = "#features">Go to Favorite Features </a>
<ol>
<li>Addiction, time-waster, and causes distractions</li>
<li>Health issues and obesity.</li>
<li>Cyberbullying</li>
</ol>
</body>
</html>

Frames and Frame set in HTML

● HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document.

● A collection of frames in the browser window is known as a frameset.

● Instead of using body tag, use frameset tag in HTML to use frames in web browser. But
this Tag is deprecated in HTML 5.

● The frameset tag is used to define how to divide the browser.

● Each frame is indicated by frame tag and it basically defines which HTML document
shall open into the frame
● To define the horizontal frames use row attribute of frame tag in HTML document and to
define the vertical frames use col attribute of frame tag in HTML document.

<!DOCTYPE html>
<html>
<frameset cols="50%,50%">
<frame src="form.html" name="left">
<frameset rows="50%,50%">
<frame src="ol.html" name="right1">
<frame src="ul.html" name="right2">
</frameset>
</frameset>
</html>

IFrame
• An iFrame is an inline frame used inside a webpage to load another HTML document
inside it.
• It allows you to open new document inside the main browser's window. Inline frame
is also called floating frame.

!DOCTYPE html>

<html>
<head>

<meta charset = "utf-8">

<title>welcome</title>

</head>

<body>

<iframe src="ul.html" height="500" width="500"></iframe>

<iframe src="ol.html" height="500" width="500"></iframe>

</body>

</html>

● blockquote element(<blockquote>)
○ HTML <blockquote> tag is used to define a block of text which is quoted from
another source. The Browser usually displays the content within <blockquote> tag as
indented text.
○ cite-It is used to specify the URL of the source from where the quote is taken.
FORM

1. <form>

• Purpose: Defines the form and acts as a container for input elements.
• Attributes:
o action: The URL where the form data is sent after submission.
o method: HTTP method (POST or GET) used to send data.

2. <input>

Used for various types of user inputs. The type attribute defines the specific input behavior.

Text Input (type="text")

• Purpose: Collect plain text (e.g., first name, last name).


• Attributes:
o placeholder: A short hint displayed inside the field.
o required: Ensures the field must be filled before submission.
Example:

<input type="text" id="firstName" name="firstName" placeholder="Enter your


name" required>

Email Input (type="email")

• Purpose: Collects email addresses.


• Validation: Ensures input follows email format (e.g., [email protected]).

Password Input (type="password")

• Purpose: Accepts a password, hiding the entered text.


• Attributes:
o placeholder: Suggests what the user should input.

Tel Input (type="tel")

• Purpose: Collects phone numbers.

Date Input (type="date")

• Purpose: Allows users to select a date using a date picker.

Color Picker (type="color")

• Purpose: Lets users select a color from a palette.

Range Input (type="range")

• Purpose: Provides a slider for selecting a numeric value within a range.


• Attributes:
o min and max: Define the range.
Time Input (type="time")

• Purpose: Allows users to select a time (hours and minutes).

File Input (type="file")

• Purpose: Allows users to upload a file.


• Attributes:
o accept: Specifies allowed file types (e.g., .pdf, .docx).

Radio Button (type="radio")

• Purpose: Allows users to select one option from a group.


• Grouping: Radio buttons with the same name are grouped.

Example:

<input type="radio" id="yes" name="relocate" value="Yes"> Yes


<input type="radio" id="no" name="relocate" value="No"> No

Checkbox (type="checkbox")

• Purpose: Lets users select multiple options independently.

Example:

<input type="checkbox" id="onsite" name="WorkMode" value="Onsite"> Onsite


<input type="checkbox" id="remote" name="WorkMode" value="Remote"> Remote

Hidden Input (type="hidden")

• Purpose: Sends data that isn’t visible or editable by users.

Example:

<input type="hidden" id="hidden" name="hiddenValue" value="12345">

Number Input (type="number")

• Purpose: Accepts numeric input.


• Attributes:
o min and max: Restrict the range of values.

Example:

<input type="number" id="number" name="experienceYears" min="0" max="50">

3. <select> (Dropdown)

• Purpose: Provides a dropdown menu.


• Attributes:
o multiple: Allows users to select more than one option.

Example:

<select id="dropdown" name="duration">


<option value="1_month">1 Month</option>
<option value="3_months">3 Months</option>
<option value="6_months">6 Months</option>
</select>

4. <textarea>

• Purpose: Collects multi-line text input.


• Attributes:
o rows: Specifies the height of the text box.

Example:

<textarea id="textarea" name="additionalInfo" rows="4" placeholder="Provide


details"></textarea>

5. <button>

• Purpose: Used to submit the form or trigger actions.


• Types:
o submit: Sends form data to the server.
o reset: Clears the form.

Example:

<button type="submit">Submit Application</button>


6. <label>

• Purpose: Provides a label for form elements, improving accessibility.


• Attributes:
o for: Links the label to an input element via its id.

Example:

<label for="firstName">First Name</label>


<input type="text" id="firstName" name="firstName">

7. <fieldset> (Optional)

• Purpose: Groups related elements visually.

Example:

<fieldset>
<legend>Personal Details</legend>
<input type="text" name="firstName">
</fieldset>

8. <datalist> (Optional)

• Purpose: Provides a list of predefined options for an input field.

Example:

<input list="browsers" name="browser">


<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
</datalist>

You might also like