Scribd
Upload
31 views38 pages

HTML Notes

HTML (Hypertext Markup Language) is a standard markup language used for creating webpages, defining their structure with elements represented by tags. An HTML document typically consists of a doctype declaration, a root <html> element, a <head> for meta-information, and a <body> for visible content. The document includes various elements for formatting text, creating lists, and adding images or links, among other functionalities.

Uploaded by

amitsonagra44
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
31 views38 pages

HTML Notes

HTML (Hypertext Markup Language) is a standard markup language used for creating webpages, defining their structure with elements represented by tags. An HTML document typically consists of a doctype declaration, a root <html> element, a <head> for meta-information, and a <body> for visible content. The document includes various elements for formatting text, creating lists, and adding images or links, among other functionalities.

Uploaded by

amitsonagra44
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML

Introduction to HTML & HTML document structure

HTML stands for Hypertext Markup Language. It is a standard language for creating/developing
webpages. It is a markup language, not a programming language. A markup language is used to
define and structure the content of a document. It cannot perform logical and decision-making
operations.
It describes the structure of a webpage using elements represented by tags. HTML elements help
browsers understand how to display content, such as text, images, and links, and define the layout
of the page.
An HTML document is structured using a series of nested elements. The basic structure consists
of the following key elements:
➢ <!DOCTYPE html>: Declares the document type and version (HTML5 in this case).
➢ <html>: The root element that contains all the content of the page.
➢ <head>: Contains meta-information about the document, such as its title and links to
stylesheets or scripts.
➢ <body>: Contains the content of the HTML document that is visible to users.
The Structure of HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
</head>
<body>
<!-- Contains the content of the HTML document that is visible to users -->
</body>
</html>

<!DOCTYPE html>:
• Declares the document type and version (HTML5).
• Ensures that the browser renders the page in standards mode.

Page 1 of 38
HTML

<html lang="en">:
• The root element of the HTML document.
• lang="en" specifies the language of the document (English).
<head>:
• Contains meta-information about the document, such as its title and links to
stylesheets or scripts
• <title>: Sets the title displayed in the browser tab.
<body>:
• Contains the content that will be visible on the webpage.

Sample Program:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
<p>It contains a <strong>main heading</strong> and <em> paragraph </em>. </p>
</body>
</html>

In this example, the html element is the root element of the hierarchy and contains two child
elements:

Page 2 of 38
HTML

 head (<head>…</head> tag): The head element, in turn, contains a child element called
the title
 body (<body>…</body> tag): The body element contains child elements: h1 and p.

➢ <html>: the root element of the DOM, and it contains all of the other elements in the code.
➢ <head>: contains metadata about the web page, such as the title and any linked CSS or
JavaScript files.
➢ <title>: contains the title of the web page, which will be displayed in the web browser's title
bar or tab.
➢ <body>: contains the main content of the web page, which will be displayed in the web
browser's window.
➢ <h1>: contains the title for the paragraph on the web page.
➢ <p>: contains the paragraphs of text on the web page.
➢ <strong>, <em>: child elements of the <p> elements, they are used to mark text as important
and emphasized respectively.
HTML elements:
HTML elements consist of several parts, including the opening and closing tags, the content, and
the attributes.
The opening tag: This consists of the element name, wrapped
in angle brackets. It indicates the start of the element and the
point at which the element's effects begin.
The closing tag: This is the same as the opening tag, but with
a forward slash before the element name. It indicates the end
of the element and the point at which the element's effects stop.
The content: This is the content of the element, which can be text, other elements, or a combination
of both.
The element: The opening tag, the closing tag, and the content together make up the element.
HTML Attributes: HTML elements can have attributes, which provide additional information
about the element. They are specified in the opening tag of the element and take the form of name-
value pairs.
For example: <a href="http://example.com"> Example </a>
The href is an attribute. It provides the link information about the <a> tag. In the above example,
href - the name of attribute
https://www.programiz.com - the value of attribute
Note: HTML attributes are mostly optional.

Page 3 of 38
HTML

Creating heading (<h1></h1> to <h6></h6>)

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6>
defines the smallest heading.
Examples: <h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
Note: HTML automatically adds an extra blank line before and after a heading.

Creating a paragraph (<P>--</P>)

Paragraphs are defined with the <p> tag


Example: <p>This is a paragraph</p>
<p>This is another paragraph</p>
Note: HTML automatically adds an extra blank line before and after a paragraph. It automatically
adds some space (margin) before and after the content to separate it visually from other elements.

Adding text in newline(<Br></BR> )

The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The
<br> tag forces a line break wherever you place it.
Example: <p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no closing tag.

Page 4 of 38
HTML

Creating a horizontal ruler (<HR>--</HR>)

The <hr> tag in HTML stands for horizontal rule.


It is used to create a horizontal line (or rule) across a webpage, often as a separator between
content sections.
The <hr> tag:
• Self-closing tag: It does not have a closing tag.
• Block-level element: By default, it stretches across the width of its container.
• Default Styling: Typically appears as a thin, light-gray horizontal line.
• Attributes:
o width: specifies the width of the horizontal rule
o size: Defines the thickness (height) of the line.
o align: Aligns the horizontal rule
o color: Sets the color of the line
• For example: <hr width="80%" size="5" color="blue">

Sub Script

• The <sub> tag is used to define subscript text.


• Subscript text appears slightly lower than the baseline and is often used in
• mathematical formulas,
• chemical formulas, and
• footnotes.
• Syntax: <sub>subscript text</sub>
• Example:<p>Normal text <sub>Subscript text</sub></p>

Page 5 of 38
HTML

Super Script

• The <sup> tag is used to define superscript text.


• Superscript text appears slightly above the normal text line. It’s commonly used in
• Mathematical Expressions: Exponents (e.g., x², 10³).,
• Scientific Notations: Representing powers of ten (e.g., 1.6 × 10⁻¹⁹).
• Footnotes: Indicating citations in documents and
• Ordinal Numbers: 1st, 2nd, 3rd…
• Syntax: <sup>superscript text</sup>
• Example: <p>Normal text <sup>Superscript text</sup></p>

Formatting of text (<B>, <U>, <I> and other )

Bold Text:

• Makes text bold but does not convey any special importance.
• Syntax: <b>text</b>
• Example: <p>This is <b>bold</b> text.</p>

Important Text:

• Indicates that the text is of strong importance. Often displayed in bold.


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

Italic Text:

• Displays text in italic but without additional emphasis.


• Syntax: <i>text </i>
• Example: <p>This is <i>italic</i> text.</p>

Page 6 of 38
HTML

Emphasized Text:

• Emphasizes text, often displayed in italics


• Syntax: <em> text </em>
• Example: <p>This is <em>emphasized</em> text.</p>

Underlined Text:

• Underlines the text


• Syntax: <u> text </u>
• Example: <p>This is <u>underlined</u> text.</p>

Small Text:

• Renders text in a smaller size than the surrounding text.


• Syntax: <small> text </small>
• Example: <p>This is <small>small</small> text.</p>

Highlighted Text:

• Highlights text with a background color (usually yellow).


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

Deleted Text:

• Indicates text that has been deleted, typically shown with a strikethrough.
• Syntax: <del>text</del>
• Example: <p>This is <del>deleted</del> text.</p>

Inserted Text:

• Represents text that has been inserted, usually displayed with an underline.
• Syntax: <ins>text</ins> Example: <p>This is <ins>inserted</ins> text.</p>

Page 7 of 38
HTML

Abbreviation:

• Represents an abbreviation or acronym, often with a tooltip explaining its meaning.


• syntax: <abbr title="Full form">text</abbr>
• Example: <p>The <abbr title="World Health Organization">WHO</abbr> was founded
in 1948.</p>

Citation:

• Represents the title of a work or reference. Usually displayed in italics.


• Syntax: <cite>text</cite>
• Example: <p><cite>The Great Gatsby</cite> is a novel by F. Scott Fitzgerald.</p>

Code Text:

• Defines a piece of computer code in a monospace font.


• Syntax: <code>text</code>
• Example: <p>To print in Python, use <code>print("Hello, World!")</code>.</p>

Font tag with all attributes

• The <font> tag in HTML was used to define text font face, size, and color.
• Syntax: <font color="color" face="font_face“ size="font_size">Your Text
Here</font>
• Attributes:
• color: Specifies the text color
• face: Specifies the font type or family.
• size: Specifies the size of the text. Accepts values from 1 (smallest) to 7 (largest)
or relative values (+1, -1)

Page 8 of 38
HTML

Scrolling text<marquee>---</marquee> with its attributes

The <marquee> ag in HTML is used to create scrolling text or images within a web page.
Although it is widely supported by browsers, it's considered obsolete in HTML5, and its use is
generally discouraged in favor of CSS animations or JavaScript. However, understanding it helps
with legacy code or simple projects.
Syntax: <marquee attribute="value">Scrolling Text</marquee>
Example: <marquee>Welcome to our website!</marquee>

Attribute Values Meaning


Scroll (default): The text scrolls and
repeats
Behavior Defines the type of scrolling.
Slide: The text scrolls and stops.
Alternate: The text bounces back and forth.
Left (default): Scrolls from right to left
Right: Scrolls from left to right. Specifies the direction of the
Direction
Up: Scrolls vertically upwards. scroll.
Down: Scrolls vertically downwards.
Defines the speed of scrolling (in
scrollamount <marquee scrollamount="10">
pixels per interval).
Defines the delay between each
scrolldelay <marquee scrolldelay="100"> scroll movement (in
milliseconds).
A number (e.g., 3 to scroll three times) Specifies the number of times
Loop
infinite (default): Scrolls continuously. the marquee will scroll.
Sets the background color of the
Bgcolor <marquee bgcolor="yellow">
marquee.
Defines the width and height of
the marquee area. Can be
width and height <marquee width="300px" height="50px">
specified in pixels or
percentages.
hspace and Defines horizontal and vertical
<marquee hspace="10" vspace="20">
vspace space around the marquee.

<marquee behavior="alternate" direction="up" scrollamount="5" scrolldelay="50“


bgcolor="lightblue" loop="3" width="300px" height="100px">
Scrolling Text with Custom Properties!
</marquee>

Page 9 of 38
HTML

HTML Comment

• HTML Comment not displayed in the browser. They are used to


• add notes,
• explanations, or
• temporarily disable code
for debugging purposes.
• Comments help developers understand the code or collaborate effectively.
• Syntax: Comments are enclosed within <!-- and -->
• Single Line comment:
<!-- This is a single-line comment -->
• Multi-line Comment:
<!--
The following section contains a greeting message
and a brief introduction for the website.
-->

Working with List

Ordered list:
An ordered list (<ol>) is used to display items in a specific order or sequence, numbered by
default.

Attribute Description Example


Type Specifies the type of numbering (e.g., numbers, letters, <ol type="I">
Roman numerals).
Start Specifies the starting number of the list. <ol start="5">
Reversed Reverses the order of the list, so it starts from the highest <ol reversed>
number.
Syntax:
<ol type="I" start="3" reversed>
<li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

Page 10 of 38
HTML

Example:
<ol type="A" start="2">
<li>Introduction</li>
<li>Body</li>
<li>Conclusion</li>
</ol>

The <li> Tag:


The <li> tag is used to define individual items within an ordered list (<ol>), unordered list
(<ul>), or description list (<dl>). Each <li> element represents a single item in the list.

Unordered list:
An unordered list (<ul>) is used to display a list of items without a specific order. Each item is
marked with a bullet by default.

Attribute Description Example


Type Specifies the bullet style (circle, square, disc). <ul type="square">

Syntax:
<ul type= “square">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Example:
<ul type= “square">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Note: Use the list-style-type CSS property instead of the type attribute for modern HTML.
<ul style="list-style-type: square;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Page 11 of 38
HTML

Description list:
A description list (<dl>) is used to define terms and their corresponding descriptions. The terms
(<dt>) are displayed as bold text, while their descriptions (<dd>) are indented.
Syntax:
<dl>
<dt>Term 1</dt>
<dd>Description for Term 1</dd>
<dt>Term 2</dt>
<dd>Description for Term 2</dd>
</dl>

Example:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, used to create web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used to style web pages.</dd>
<dt>JavaScript</dt>
<dd>A programming language used to make web pages interactive.</dd>
</dl>

<dt> Tag:
The <dt> (Definition Term) tag represents a term or name being defined. It is usually displayed
in bold by default.

<dd> Tag:
The <dd> (Definition Description) tag provides the description or definition of the term specified
by <dt>. It is usually indented under the <dt> tag by default.

Working with Tables

The <table> tag is used to create tables in HTML, which are used to organize data into rows and
columns. Tables are especially useful for displaying structured data, such as schedules, price lists,
or reports.
Syntax:
<table> …. <table>

Page 12 of 38
HTML

Example:
<table border="1" >
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</table>

NOTE: Various other tags involved in table creation are <tr>, <th>, <td>, <thead>, <tbody> and
<tfoot>

Table Row <tr>:


The <tr> tag is used to define a row in a table

Syntax:
<table>
<tr>
...
</tr>
</table>

Example:
<table>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Prasanna</td>
<td>Nepal</td>
</tr>
<tr>
<td>Simon</td>
<td>USA</td>
</tr>
</table>

Page 13 of 38
HTML

Table Heading <th>:


The <th> tag is used to define a table header. It is generally the top row of the table.

Syntax:
<table>
<tr>
<th>… </th>
</tr>
</table>

Example:
<table>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Prasanna</td>
<td>Nepal</td>
</tr>
<tr>
<td>Simon</td>
<td>USA</td>
</tr>
</table>

Table Cell <td>:

The <td> tag is used to define table cells (data). The table cells store data to be displayed in the
table.
Syntax:
<table>
<tr>
<td>… </td>
</tr>
</table>

Example:
<table>
<tr>
<th>Name</th>
<th>Country</th>
Page 14 of 38
HTML

</tr>
<tr>
<td>Prasanna</td>
<td>Nepal</td>
</tr>
<tr>
<td>Simon</td>
<td>USA</td>
</tr>
</table>

The HTML table can be divided into three parts: a header, a body, and a footer

Table Header:
We use the <thead> tag to add a table head. The <thead> tag must come before any other tags
inside a table. The rows are placed with table headers inside the <thead> tag.

Syntax:
<table>
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
</tr>
</thead>

...
...
</table>

Table Body:
We use the <tbody> tag to add a table body. The <tbody> is placed on the center part of the table
and the rows are placed inside <tbody> tag.

Syntax:
<table>
<thead>
...
</thead>
<tbody>
<tr>
<td>Cell 1</td>

Page 15 of 38
HTML

<td>Cell 2</td>
</tr>
</tbody>

...
...
</table>

Table Footer:
We use the <tfoot> tag to add a table footer. The <tfoot> tag must come after <tbody>. The rows
with the footer in the <tfoot>.

Syntax:
<table>
<thead>
...
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<td>foot 1</td>
<td>foot 2</td>
</tr>
</tfoot>
</table>

For Example:
<table>
<thead>
<tr>
<th>S.N</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apple</td>
<td>2</td>
</tr>

Page 16 of 38
HTML

<tr>
<td>2</td>
<td>Mango</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Total</td>
<td>5</td>
</tr>
</tfoot>
</table>

Caption:
The <caption> element acts as the title of the table. It is used to give a short description of
the table. It shows up on top of the table.
The <caption> tag must be the first child of the <table> element.
Example:
<table>
<caption>Employee Details</caption>
<tr>
<th>Name</th>
<td>Sam</td>
<td>Steve</td>
<td>Peggy</td>
</tr>
<tr>
<th>Age</th>
<td>31</td>
<td>42</td>
<td>29</td>
</tr>
</table>

Page 17 of 38
HTML

Required attributes:
1. Border:
The border attribute is used to add a border to a table and all the cells.
NOTE: To prevent double borders like the one in the example above, we can set the border-
collapse property of the table
Syntax:
<table border="1" style="border-collapse: collapse;">
...
</table>

2. Colspan:
The colspan attribute merges cells across multiple columns
Syntax:
<table>
<tr>
<td colspan="2">Total</td>
<td>5</td>
</tr>
</table>

3. Rowspan
The rowspan attribute merges cells across multiple rows.
Syntax:
<table>
<tr>
<td rowspan="3">Mark Smith</td>
<td>English</td>
<td>67</td>
</tr>
</table>

Working with Images

• The HTML <img> tag is used to embed an image in a web page.


• Images are not technically inserted into a web page; images are linked to web pages.
• It creates a holding space for the referenced image.
• The <img> tag is empty, it contains attributes only, and does not have a closing tag.
• Syntax
• <img src="url" alt="alternatetext">

Page 18 of 38
HTML

• Example:<img src="E:/images/animal.png" height="180" width="300" alt="animal image">


• Required attributes:
• src - Specifies the path (URL) to the image
• alt - Specifies an alternate text for the image, if the user for some reason cannot view
it. It should describe the image
• float - lets the image float to the right or to the left of a text (the image float to the left
or to the right)
• width and height - attributes or the CSS width and height properties to define the size
of the image

Image maps (<map>---</map>)

• An image map is an image with clickable areas.


• The <map> tag can consist of more than one <area> elements which define the coordinates
and type of the area.
• The <area> tag defines the clickable areas or active areas inside the image-map which are
associated with the hyperlinks. If you click on those areas then it will perform some action
such as open a new image, new URL, etc. This tag is always used with <map> element.
• With the help of <map> tag, you can easily link any part of the image to other documents,
without dividing the image.
• The <area> element is defined with (required) attributes shape, cords and href.
• This shape attribute specify the shape of the region which will become a hyperlink.
• Syntax:
<img src =" " usemap ="#name">
<map name ="name">
<area shape = " " coords =" " href = " ">
</map>
• Example:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

Attribute Value Description


An alternative text String to display on the browser if
Alt text
it does not display the image.

Page 19 of 38
HTML

Here(x1, y1) coordinates represents the left-top


x1,y1,x2,y2(rect) position and (x2, y2) represents the Right-bottom
position of a rectangular region.
Coords Here (x, y) represents the center of the circle and r
x,y,r(circ)
represents the radius of the circle.
Here each xn, yn pair represent the vertex of polygon
x1,y1,x2,y2..xn,yn(poly)
region and n represents number of vertices.
default It defines the default area(rectangular).
rect It defines the rectangular area.
Shape
circle Defines the circular area.
poly Defines the polygonal.
_blank Open link in a new window
_parent Open link in the parent frame
Target
_self Open link in current window
_top Open link with full width in the same window

Working with Forms

• An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
• Form is a section of a document which contains controls such as text fields, password fields,
checkboxes, radio buttons, submit button, menus etc.
• Form facilitates the user to enter data that is to be sent to the server for processing such as
name, email address, password, phone number, etc…

Description Description

<form> It defines an HTML form to enter inputs by the user side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

Page 20 of 38
HTML

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

Form tag

• It defines an HTML form to enter inputs by the user side.


• An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.
• Syntax:
<form>
//Form elements
</form>
• Note: The <form> element does not itself create a form but it is container to contain all
required form elements, such as <input>, <label>, etc.

Input tag

• It is used to create form fields, to take input from user.


• Syntax: <input type="text" name="username">
• The type="text" attribute of input tag creates textfield control also known as single line
textfield control.
• The name attribute is optional,
• Note:
➢ If you will omit 'name' attribute then the text filed input will not be submitted to server.
➢ The name attribute is used to reference elements in a JavaScript, or to reference form
data after a form is submitted.
➢ Only form elements with a name attribute will have their values passed when
submitting a form.

Page 21 of 38
HTML

Attributes Example Description

value value="John"  specifies an initial value for an input field


 specifies that an input field is read-only
 A read-only input field cannot be modified
(however, a user can tab to it, highlight it, and
readonly readonly
copy the text from it).
 The value of a read-only input field will be sent
when submitting the form!
 specifies that an input field should be disabled.
 A disabled input field is unusable and un-
disabled disabled clickable.
 The value of a disabled input field will not be
sent when submitting the form!
 specifies the visible width, in characters, of an
input field.
Size size="50"  The default value for size is 20
 It works with the following input types: text,
search, tel, url, email, and password.
 specifies the maximum number of characters
allowed in an input field.
 When a maxlength is set, the input field will not
accept more than the specified number of
characters.
 However, this attribute does not provide any
maxlength maxlength="4" feedback. So, if you want to alert the user, you
must write JavaScript code.
 The maximum number of characters allowed are
UTF-16 (16-bit Unicode Transformation Format)
is a character encoding method capable of
encoding all 1,112,064 valid code points of
Unicode.
 specify the minimum and maximum values for an
input field.
 min and max attributes work with the following
min and
min="1" max="5" input types: number, range, date, datetime-local,
max
month, time and week.
 Use the max and min attributes together to create
a range of legal values.
 specifies that the user is allowed to enter more
multiple multiple
than one value in an input field.

Page 22 of 38
HTML

 It works with the following input types: email,


and file.
 specifies a short hint that describes the expected
value of an input field (a sample value or a short
description of the expected format).
placeholder placeholder=“Username”  The short hint is displayed in the input field
before the user enters a value.
 works with the following input types: text,
search, url, number, tel, email, and password
 specifies that an input field must be filled out
before submitting the form.
required required  works with the following input types: text,
search, url, tel, email, password, date pickers,
number, checkbox, radio, and file.
 as the input type value changes the type of value
type text, password, etc
taken from user changes.

Input Types

Text:
• Defines a single-line text input field.
• Syntax: <input type="text">
• Example:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
</form>

Password
• Defines a password field.
• Syntax: <input type="password">
• Example:
<form>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

Submit
• Defines a button for submitting form data to a form-handler.
• The form-handler is typically a server page with a script for processing input data.
• The form-handler is specified in the form’s action attributes.
• Syntax: <input type="submit">

Page 23 of 38
HTML

• Example:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

Reset
• Defines a reset button that will reset all form values to their default values.
• Syntax: <input type="reset">
• Example:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

Radio
• Defines a radio button.
• Radio buttons let a user select ONLY ONE of a limited number of choices
• Syntax: <input type="radio">
• Example:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

Checkbox
• Defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a limited number of choices.
• Syntax: <input type="checkbox">
• Example:

Page 24 of 38
HTML

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

Button
• Defines a button.
• Syntax: <input type="button">
• Example: <input type="button" onclick="alert('Hello World!')" value="Click Me!">

Color
• It is used for input fields that should contain a color.
• Syntax: <input type="color">
• Example:
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>

Date
• It is used for input fields that should contain a date.
• Depending on browser support, a date picker can show up in the input field.
• Syntax: <input type="date">
• Example:
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
Datetime-local
• Specifies a date and time input field, with no time zone.
• Depending on browser support, a date picker can show up in the input field.
• Syntax: <input type="datetime-local">
• Example:
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Page 25 of 38
HTML

Email
• It is used for input fields that should contain an e-mail address.
• Depending on browser support, the e-mail address can be automatically validated when
submitted.
• Some smartphones recognize the email type, and add ".com" to the keyboard to match
email input.
• Syntax: <input type="email">
• Example:
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>

Image

• Defines an image as a submit button.


• The path to the image is specified in the src attributes
• Syntax: <input type="image">
• Example:
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

File
• Defines a file-select field and a "Browse" button for file uploads.
• Syntax: <input type="file">
• Example:
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>

Month
• Allows the user to select a month and year.
• Depending on browser support, a date picker can show up in the input field.
• Syntax: <input type="month">
• Example:
<form>
<label for="bdaymonth">Birthday (month and year):</label>

Page 26 of 38
HTML

<input type="month" id="bdaymonth" name="bdaymonth">


</form>

Number
• Defines a numeric input field.
• You can also set restrictions on what numbers are accepted.
• The following example displays a numeric input field, where you can enter a value from
1 to 5.
• Syntax: <input type="number">
• Example:
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Range
• Defines a control for entering a number whose exact value is not important (like a slider
control). Default range is 0 to 100. However, you can set restrictions on what numbers
are accepted with the min, max and set attributes.
• Syntax: <input type="range">
• Example:
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>

Search
• It is used for search fields (a search field behaves like a regular text field).
• Syntax: <input type="search">
• Example:
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>

Tel
• It is used for input fields that should contain a telephone number.
• Syntax: <input type="tel">
• Example:
<form>
<label for="phone">Enter your phone number:</label>

Page 27 of 38
HTML

<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">


</form>

Time
• It allows the user to select a time (no time zone).
• Depending on browser support, a time picker can show up in the input field.
• Syntax: <input type="time">
• Example:
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>

Url
• It is used for input fields that should contain a URL address.
• Depending on browser support, the url field can be automatically validated when
submitted.
• Some smartphones recognize the url type, and adds ".com" to the keyboard to match url
input.
• Syntax: <input type="url">
• Example:
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>

Label Tag

• It is considered better to have label in form. As it makes the code user friendly.
• If you click on the label tag, it will focus on the text control. To do so, you need to have
for attribute in label tag that must be same as id attribute of input tag.
• Syntax: <label> … </label>
• Example:
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"/>

Page 28 of 38
HTML

Text-Area tag

• It is used to insert multiple-line text in a form.


• Syntax: <textarea rows="2" cols="20"></textarea>
• Example:
<label for="w3review">Review of W3Schools:</label>
<textarea id="w3review" name="w3review" rows="4" cols="50">
At w3schools.com you will learn how to make a website. They offer free
tutorials in all web development technologies.
</textarea>

Fieldset tag

• The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped elements.
• Syntax: <fieldset> <legend>…<legend> group of elements </fieldset>
• Example:
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="submit" value="Submit">
</fieldset>
</form>

Select tag

• Used to create a drop-down list in a form, to collect user input


• The <option> tags inside the <select> element define the available options in the drop-
down list.
• Syntax: <select><option>…</option></select>
• Example:
<select name="shirts" id="shirt-colors" >

Page 29 of 38
HTML

<option value="red">Red t-shirt</option>


<option value="blue">Blue t-shirt</option>
<option value="orange">Orange t-shirt</option>
</select>

Option tag

• The <option> tag defines an option in a select list.


• Note: The <option> tag can be used without any attribute, but it should be used with
value attribute which specifies what send to the server.
• Syntax: <option value="">.....</option>
• Example:

Attribute Value Description

disabled disabled If it is set then that option will be disabled.

Label text It defines the name for the list item.

selected selected If it is set, then it will be selected by default in the list.

Value text It specifies the data which is sent to the server.

• <option> elements used inside a


• <select>,
• <optgroup> , or
• <datalist> element.

Example:
<label for="cars">Choose a car:</label>

<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

Page 30 of 38
HTML

Use of <option> in <optgroup> elements:

• Tag is used to group related options in a <select> element (drop-down list).


• If you have a long list of options, groups of related options are easier to handle for a user.
<label for="cars">Choose a car:</label>
<select id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Button:

• Defines a clickable button.


• Inside a <button> element you can put text (and tags
like <i>, <b>, <strong>, <br>, <img>, etc.). That is not possible with a button created
with the <input> element!
• Tip: Always specify the type attribute for a <button> element, to tell browsers what type
of button it is. Like:
• Button
• Reset
• submit

Page 31 of 38
HTML

The Markup Element HTML5

Article:
• specifies independent, self-contained content.
• An article should make sense on its own and it should be possible to distribute it
independently from the rest of the site.
• Potential sources for the <article> element:
• Forum post
• Blog post
• News story
Note: The <article> element does not render as anything special in a browser.

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web
browser since January, 2018.</p>
</article>

• Note: Use the ARTICLE element when the content is an independent part of the site that
can stand alone.

Section:
• The <section> tag is used to define a section of a web page that groups together related
content. This tag is often used to divide a page into sections, such as a header, main
content, and footer.
For example:
<section>
<h2>Main Content</h2>
<p>This is the main content section of the web page.</p>
</section>

• Using <section> and <article> together You can use <section> and <article> tags together
to create a well-structured web page.
• Use the <section> tag to group related content together
• Use the <article> tag to define a self-contained piece of content

Page 32 of 38
HTML

<section>
<h2>Main Content</h2>
<article>
<h3>Article 1</h3>
<p>This is the first article in the main content section.</p>
</article>

<article>
<h3>Article 2</h3>
<p>This is the second article in the main content section.</p>
</article>
</section>

Details:

• Specifies additional details that the user can open and close on demand.
• Often used to create an interactive widget that the user can open and close. By default,
the widget is closed. When open, it expands, and displays the content within.
• Any sort of content can be put inside the <details> tag.
• Tip: The <summary> tag is used in conjunction with <details> to specify a visible
heading for the details.
• <details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

If summary tag not used, then…


<details>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

Summary:
• defines a visible heading for the <details> element. The heading can be clicked to
view/hide the details.
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort

Page 33 of 38
HTML

featuring exciting attractions, international pavilions, award-


winning fireworks and seasonal special events.</p>
</details>
Note: The <summary> element should be the first child element of the <details> element.

Figure:
• specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
• While the content of the <figure> element is related to the main flow, its position is
independent of the main flow, and if removed it should not affect the flow of the
document.
• It can be moved or styled (e.g., centered) without disrupting the logical flow
of the document.
• Its physical placement can be adjusted using CSS without affecting how the
rest of the document is structured.
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
</figure>

Figcaption:

• Defines a caption for a <figure> element.


• Element can be placed as the first or last child of the <figure> element.

<figure>
<figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
</figure>

Meter:
• Defines a scalar measurement within a known range, or a fractional value.
• Examples: disk usage, the relevance of a query result, etc.
Note: the <meter> tag should not be used to indicate progress (as in a progress bar). For progress
bars, use the <progress> tag.
Tip: always add the <label> tag.

<label for="disk_c">Disk usage C:</label>


<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>

<label for="disk_d">Disk usage D:</label>


<meter id="disk_d" value="0.6">60%</meter>

Page 34 of 38
HTML

Progress:
• Represents the completion progress of a task.
• Tip:
• Always add the <label> tag.
• Use the <progress> tag in conjunction with JavaScript to display the progress of a
task.
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

Footer:
• defines a footer for a document or section.
• A <footer>element typically contains:
• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents
• Tip: Contact information inside a <footer> element should go inside
an <address> tag.

<footer>
<p>Author: Hege Refsnes<br>
<a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

Header:

• represents a container for introductory content or a set of navigational links.


• A <header>element typically contains:
• one or more heading elements (<h1> - <h6>)
• logo or icon
• authorship information
Note: You can have several <header> elements in one HTML document.
However, <header> cannot be placed within a <footer>, <address> or another <header> element.

Page 35 of 38
HTML

The Media Elements

Audio
• The HTML <audio> element is used to play an audio file on a web page.
• The controls attribute adds audio controls, like play, pause, and volume.
• The <source> element allows you to specify alternative audio files which the browser
may choose from. The browser will use the first recognized format.
• The text between the <audio> and </audio> tags will only be displayed in browsers that
do not support the <audio> element.
• Add muted after autoplay to let your audio file start playing automatically (but muted):
<audio controls autoplay muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

Source
• The <source> tag is used to specify multiple media resources for media elements, such
as <video>, <audio>, and <picture>.
• The <source> tag allows you to specify alternative video/audio/image files which the
browser may choose from, based on browser support or viewport width. The browser will
choose the first <source> it supports.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

Video

• The HTML <video> element is used to show a video on a web page.


<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
• The controls attribute adds video controls, like play, pause, and volume.
• It is a good idea to always include width and height attributes. If height and width are not
set, the page might flicker while the video loads.

Page 36 of 38
HTML

• The <source> element allows you to specify alternative video files which the browser
may choose from. The browser will use the first recognized format.
• The text between the <video> and </video> tags will only be displayed in browsers that
do not support the <video> element.

Div tag:
• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is used as a container for HTML elements - which is then styled with CSS
or manipulated with JavaScript.
• The <div> tag is easily styled by using the class or id attribute.
• Any sort of content can be put inside the <div> tag!
Note: By default, browsers always place a line break before and after the <div> element.

Aligning <div> elements side by side

When building web pages, you often want to have two or more <div> elements side by side, like
this:

FGrid

The CSS Grid Layout Module offers a grid-based layout system, with rows and
columns, making it easier to design web pages without having to use floats and
positioning.

Sounds almost the same as flex, but has the ability to define more than one row
and position each row individually.

The CSS grid method requires that you surround the <div> elements with
another <div> element and give the status as a grid container, and you must
specify the width of each column.

• loat
o The CSS float property was not originally meant to align <div> elements side-by-
side, but has been used for this purpose for many years.
o The CSS float property is used for positioning and formatting content and allows
elements to be positioned horizontally, rather than vertically.
o Inline-block
o If you change the <div> element's display property from block to inline-block,
the <div> elements will no longer add a line break before and after, and will be
displayed side by side instead of on top of each other.
• Flex

Page 37 of 38
HTML

o The CSS Flexbox Layout Module was introduced to make it easier to design
flexible responsive layout structure without using float or positioning.
o To make the CSS flex method work, surround the <div> elements with
another <div> element and give it the status as a flex container.
• Grid
o The CSS Grid Layout Module offers a grid-based layout system, with rows and
columns, making it easier to design web pages without having to use floats and
positioning.
o Sounds almost the same as flex, but has the ability to define more than one row
and position each row individually.
o The CSS grid method requires that you surround the <div> elements with
another <div> element and give the status as a grid container, and you must
specify the width of each column.

Page 38 of 38

You might also like