HTML
HTML stands for HyperText Markup Language.
It is a standard markup language used to design the documents displayed in the
browsers as a web page.
It tells the web browser how to display text, links, images, and other forms of
multimedia on a webpage.
Example:
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first paragraph of text!</p>
</body>
</html>
Features of HTML
It is easy to learn and easy to use.
It is platform-independent. Images, videos, and audio can be added to a web
page.
Hypertext can be added to the text.
It is a markup language.
HTML Element
An HTML Element consists of a start tag, content, and an end tag, which
together define the element’s structure and functionality.
Elements are the basic building blocks of a webpage and can represent
different types of content, such as text, links, images, or headings.
An HTML element is a combination of a opening tag, content, and an ending
tag.
For example, the <p> element for paragraphs includes opening and closing
tags with text content in between.
Syntax:
<tagname>Your Contents... </tagname>
HTML Empty Element
HTML Elements without any content i.e., that do not print anything are
called Empty elements.
Empty HTML elements do not have an ending tag.
<br>, <hr>, <link>, <input> etc are HTML empty elements.
HTML Tags
HTML Tags are fundamental elements used to structure and format content
on web pages.
They provide instructions to web browsers on how to render text, images,
links, and other media.
HTML tags are enclosed in angle brackets < >.
Tags are of two types:
o Opening Tag: Begins an element (e.g., <p>).
o Closing Tag: Ends an element (e.g., </p>).
o Some tags are self-closing, like <img />, <br />
Container Tags:
These tags enclose content and must have both opening and closing tags.
Example: <div>, <p>, <table>, <form>.
Empty Tags:
These tags do not enclose content and do not require a closing tag.
Example: <br>, <img>, <hr>, <meta>.
Common HTML Tags
1) Heading tag
An HTML heading tag is used to define the headings of a page.
These 6 heading elements are h1, h2, h3, h4, h5, and h6; with h1 being
the highest level and h6 being the least.
Syntax: <h1>Hello World!</h1>
<h5>Hello World! </h5>
2) Paragraph tag
The <p> tag in HTML defines a paragraph.
These have both opening and closing tags.
Syntax: <p> Content </p>
3) Hyperlink (anchor) tag
The anchor tag in HTML is used to create a hyperlink on the webpage.
Syntax: <a herf=” “> …</a>
4) Image tag
The <img> tag is used to embed images in an HTML document.
<img src=”url” alt=”some_text” width=”” height=””>
5) Form tag
HTML Forms use the <form> tag to collect user input through various
interactive controls.
These controls range from text fields, numeric inputs, and email fields
to password fields, checkboxes, radio buttons, and submit buttons.
6) Input tag
It is used to get input data from the form in various types such as text,
password, email, etc by changing its type.
Syntax: <input type= “text” placeholder= “Enter Name”>
<input type= “password” placeholder= “Password”>
Commonly Used Input Types in HTML Forms
<input type=”text”>: Defines a one-line text input field
<input type=”password”>: Defines a password field
<input type=”submit”>: Defines a submit button
<input type=”reset”>: Defines a reset button
<input type=”radio”>: Defines a radio button
<input type=”email”> Validates that the input is a valid email address.
<input type=”number”>: Allows the user to enter a number.
<input type=”checkbox”>: Used for checkboxes where the user can
select multiple options.
<input type=”date”>: Allows the user to select a date from a calendar.
<input type=”time”>: Allows the user to select a time.
<input type=”file”>: Allows the user to select a file to upload.
7) Lists tag
The list tag in HTML is used to define the list item in an HTML
document.
It is used within an Ordered List <ol> or Unordered List <ul>.
Unordered List: Creates a bullet-point list.
Ordered List: Creates a numbered list.
Example: <ul>
<li>item I</li>
<li>item II</li>
<li>item III</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
8) Table tag
HTML Table is an arrangement of data in rows and columns, or
possibly in a more complex structure.
Syntax: <table>…… </table>
tr tag: The table row tag is used to define a row in an HTML table.
The <tr> element contains multiple <th> or <td> elements.
th tag: The table header tag in HTML is used to set the header
cell of a table.
td tag: The table data tag is used to define a standard cell in an
HTML table.
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
<tr>
<td>Adish</td>
<td>Math</td>
<td>A</td>
</tr>
<tr>
<td>smit</td>
<td>Science</td>
<td>B</td>
</tr>
</table>
9) Link
It's helps to links external resources.
It is used for linking CSS stylesheets.
Syntax: <link rel=“…” href=“…..” >
10) div
The div tag is used in HTML to make divisions of content in the web
page (text, images, header, footer, navigation bar, etc).
Syntax: <div>Content</div>
11) span
The HTML span element is a generic inline container for inline elements
and content.
Syntax: <span class=””>Some Text</span>
HTML Basic Structure
