HTML TAGS
1.<!DOCTYPE html>
HTML DOCTYPE (Document Type Declaration) is an instruction that appears at the
beginning of an HTML document, before the <html> tag.
● Its primary role is to tell the web browser which version of HTML the page is
written in, ensuring that the browser renders the content correctly.
● It is not an HTML tag, but rather a special instruction that specifies how the
browser should interpret the HTML.
● It is recommended to always use <!DOCTYPE html> at the top of your HTML file
for HTML5.
Sample Code:
<!DOCTYPE html>
<html>
<body>
<p>welcome to my website</p>
</body>
</html>
Reference:https://www.geeksforgeeks.org/html/html-doctypes/
2.<anchor>
The <a> tag defines a hyperlink, which is used to link from one page to another.
● The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
● This attribute determines where the user is directed upon clicking the link.
Syntax:<a href = "link"> Link Name </a>
Sample Code:
<a href="tel:+910000000">+910000000</a>
Reference:https://www.geeksforgeeks.org/html/html-a-tag/
3.<body>
The <body> tag in HTML defines the main content of a web page and is always placed
within the <html> tag as its last child.
● It contains everything that is visible on the page, including
headings,paragraphs,images,links, tables, and lists.
● The <body> tag is required in every HTML document.
● If omitted, most browsers will still render the content as if the tag were present,
but it’s not considered good practice.
Syntax:<body> Body Contents... </body>
Sample Code:
<!DOCTYPE html>
<html lang="en">
<body>
<h3>This is the Body Content</h3>
</body>
</html>
Reference:https://www.geeksforgeeks.org/html/html-body-tag/
4.Comment Tag
HTML comments are used to add notes or explanations in the HTML code that are not
displayed by the browser.
● They are useful for documenting the code, making it easier to understand and
maintain.
● To add a comment, use the syntax <!-- your comment here ->
Syntax:<!-- This is a comment and will not be displayed on the webpage -->
<p>This is visible text.</p>
Reference:
https://www.geeksforgeeks.org/html/html-comments/?ref=lbp
5.<p>
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> Some Content... </p>
Sample Code:
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!-- <title>The p tag</title>-->
<!--</head>-->
<!--<body>-->
<!--need to comprase this-->
<p>This is the Content of Paragraph Tag.</p>
<!--</body>-->
<!--</html>-->
Reference:https://www.geeksforgeeks.org/html/html-paragraph/
6.<head>
The <head> tag in HTML is an essential element used to define the head section of an
HTML document.
● It is placed inside the <html> tag, and used to store information that doesn't
appear directly on the webpage itself.
● It contains metadata that helps the browser and search engines to understand
the content of the page.
● In HTML 4, the <head> element was mandatory but in HTML5, the <head>
element can be omitted.
Syntax:
<head>
<title>Title of the document</title>
</head>
Sample Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Reference:https://www.geeksforgeeks.org/html/html-head-tag/
7.<style>
The HTML <style> tag in HTML defines CSS for document styling. The <style> element
is placed in the <head> section of the document.
Syntax:
<style>
/* CSS properties applied inside this style tag */
.divtag{
color: blue
}
</style>
Reference:https://www.geeksforgeeks.org/html/html-style-tag/
8.<button>
The <button> tag in HTML is used to create clickable buttons on a webpage. These
buttons can trigger various actions, such as submitting a form, running JavaScript
functions, or simply interacting with users.
● Versatile Content: The <button> tag can contain text, images, or other HTML
elements.
● Form Integration: Can be used inside forms to submit or reset data.
● Event Handling: Supports event attributes like onclick, onmouseover, and
onfocus for interactive actions.
● Customizable Styles: Easily styled with CSS, including properties like
border-radius, box-shadow, and animations.
Syntax:<button>Click Me!</button>
Sample Code:
<html>
<head>
<title>Centered Button Example</title>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
button {
padding: 15px 30px;
font-size: 16px;
background-color: blue;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<button>Click Me!</button>
</body>
</html>
Reference:https://www.geeksforgeeks.org/html/html-button-tag/
9.<div>
The <div> tag, used in over 90% of web pages, divides content into sections and serves
as a flexible container for text, images, and links.
Easily styled with CSS and customized using classes or IDs, it often uses
percentage-based widths like 50% or 33.33% for responsive layouts, making it key to
web page structure.
● Block-Level Element: The <div> tag is a block-level element, meaning it takes
up the full width and starts on a new line.
● Styling with CSS: It can be styled using CSS, allowing customization like width,
background color, padding, and margins.
● Inline-Block Option: By using display: inline-block, a <div> can behave like an
inline element while retaining block-level features.
● Used for Layouts: <div> is often used in layouts with Flexbox or Grid to
organize content and arrange sections of a webpage.
Syntax:
<div>
<!-- Content goes here -->
</div>
Sample Code:
<html>
<head>
<style>
/* Basic styling for better readability */
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
/* Styling for the div blocks */
div {
color: white;
background-color: #009900;
/* Fixed the color */
margin: 10px 0;
padding: 10px;
font-size: 20px;
border-radius: 5px;
/* Optional: Adds rounded corners */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* Optional: Adds subtle shadow */
}
/* Headings for clarity */
h1 {
font-size: 28px;
color: #333;
}
/* Styling for the section and article */
section {
margin-top: 30px;
}
/* Responsive styling */
@media (max-width: 600px) {
div {
font-size: 18px;
padding: 8px;
}
h1 {
font-size: 24px;
}
}
</style>
</head>
<body>
<article>
<h1>Understanding the <code>div</code> Tag in HTML</h1>
<section>
<p>The <code>div</code> tag is a container element used to group content
together.
It's a commonly used tag for styling sections of a page.</p>
<div>First div tag with some content</div>
<div>Second div tag, providing another example</div>
<div>Third div tag demonstrating further usage</div>
<div>Fourth div tag showing how to style multiple blocks</div>
</section>
</article>
</body>
</html>
Reference:https://www.geeksforgeeks.org/html/div-tag-html/
10.<form>
The <form> tag is used to create an HTML form for user input.
● It serves as a container for various input elements like text fields, checkboxes,
and buttons, enabling the collection of data for submission to a server or
processing via client-side scripts.
Syntax:
<form action="URL" method="get|post">
<!-- Form elements go here -->
</form>
Source Code:
<html>
<body>
<form action="/submit" method="POST">
<h2>User Information</h2>
<label for="fname">
First Name
</label>
<input id="fname" name="fname" placeholder="Enter your first name" required=""
type="text"/>
<br/>
<br/>
<label for="lname">
Last Name
</label>
<input id="lname" name="lname" placeholder="Enter your last name" required=""
type="text"/>
<br/>
<br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Reference:https://www.geeksforgeeks.org/html/html-form-tag/
