Scribd
Upload
180 views104 pages

HTML5 Web Design Basics

Uploaded by

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

HTML5 Web Design Basics

Uploaded by

Flamerisse Yoon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 104

WEB DESIGNING USING

HTML5
GROUP 7
MEMBERS:

Carlo Casapao Janelle Gutierrez Jhomer Zulueta


INTRODUCTION
 First developed by Tim Berners-Lee in 1990, HTML, or
HyperText Markup Language, is the standard markup language
used to create web pages. It’s a combination of Hypertext,
which defines the link between web pages, and Markup
language, which is used to define the text document within tags
to structure web pages. This language is used to annotate text
so that machines can understand and manipulate it accordingly.
HTML is human-readable and uses tags to define what
manipulation has to be done on the text.

HTML Tutorial: https://youtu.be/JHq3pL4cdy4


A WHAT IS HTML?
HTML stands for
HyperText Markup
Language and it is
HTML consists of used to create
various elements, that webpages.
are responsible for
telling search engines
how to display page HTML

content. For example,


It uses HTML tags
headings, lists,
and attributes to
images, links, and
describe the
more. structure and
formatting of a web
page.
1 Features of HTML

It is easy to learn
and easy to use.

It is platform-
independent. Images, videos, and
audio can be added
HTML
to a web page.

Hypertext can be
added to the text.
It is a markup
language.
2 HTML Elements and Tags

HTML uses predefined tags and elements that instruct the


browser on how to display the content. HTML elements include
an opening tag, some content, and a closing tag.
3 HTML Page Structure

The basic structure of an HTML page is shown below. It contains the


essential building-block elements (i.e. doctype declaration, HTML,
head, title, and body elements) upon which all web pages are created.
3 HTML Page Structure

<!DOCTYPE html> – This is the document type declaration (not technically a tag). It declares
a document as being an HTML document. The doctype declaration is not case-sensitive.

<html> – This is called the HTML root element. All other elements are contained within it.

•<head> – The head tag contains the “behind the scenes” elements for a webpage. Elements
within the head aren’t visible on the front end of a webpage. HTML elements used inside the
<head> element include:

<style> – This HTML tag allows us to insert styling into our web pages and make them
appealing to look at with the help of CSS.
3 HTML Page Structure

<title> – The title is what is displayed on the top of your browser when you visit a website and
contains the title of the webpage that you are viewing.

<base> – It specifies the base URL for all relative URL’s in a document.

<noscript> – Defines a section of HTML that is inserted when the scripting has been turned
off in the user’s browser.

<script> – This tag is used to add functionality to the website with the help of JavaScript.
3 HTML Page Structure

<meta> – This tag encloses the metadata of the website that must be loaded every time the
website is visited. For eg:- the metadata charset allows you to use the standard UTF-8
encoding on your website. This in turn allows the users to view your webpage in the language
of their choice. It is a self-closing tag.

<link> – The ‘link’ tag is used to tie together HTML, CSS, and JavaScript. It is self-closing.

<body> – The body tag is used to enclose all the visible content of a webpage. In other
words, the body content is what the browser will show on the front end.
3 HTML Page Structure
An HTML document can be created using an HTML text editor. Save the text file using the
“.html” or “.htm” extension. Once saved as an HTML document, the file can be opened as
a webpage in the browser.
EXAMPLE: This example illustrates the basic structure of HTML code.
4 Why learn HTML?
It is a simple markup language.
Its implementation is easy.

Helps in developing
fundamentals about
web programming.
HTML

Boost professional It is used to create a


career. website.
5 HTML History

HTML is a markup language used by the browser to manipulate text, images, and other
content, in order to display it in the required format. HTML was created by Tim Berners-Lee in
1991. The first-ever version of HTML was HTML 1.0, but the first standard version was HTML
2.0, published in 1995. Currently, we are using HTML5, which is the latest and most recent
version of HTML.
2014
1997
1993 2012 HTML
5
1995 HTML HTML
HTML 3 1999 4.01

1
HTML
2 HTML
4

HTML RELEASED YEAR


6 HTML ADVANTAGES AND DISADVANTAGES

ADVANTAGES DISADVANTAGES

• HTML can only create static web


• HTML is used to build websites.
pages. For dynamic web pages,
• It is supported by all browsers.
other languages have to be used.
• It can be integrated with other
• A large amount of code has to be
languages like CSS, JavaScript,
written to create a simple web page.
etc.
• The security feature is not good.
What is HTML5?
HTML5 is the update made to HTML from HTML4 (XHTML follows a different version
numbering scheme). It uses the same basic rules as HTML4, but adds some new tags
and attributes which allow for better semantics and for dynamic elements that are
activated using JavaScript. New elements include: <article>, <aside>, <audio>, <bdi>,
<canvas>, <datalist>, <details>, <embed>, <figure>, <figcaption>, <footer>, <header>,
<keygen>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <rt>, <ruby>,
<time>, <track>, <video>, and <wbr>. There are also new input types for forms, which
include tel, search, url, e-mail, datetime, date, month, week, time, datetime-local,
number, range, and color.

With the increasing movement to keep structure and style separate, some styling
elements were removed. Also tags with accessibility issues or saw little use were also
removed. These following elements should no longer be used in HTML code:
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>,
<frameset>, <noframes>, <strike>, and <tt>.
B HTML BASIC
EXAMPLES
1 DIFFERENCE BETWEEN HTML AND CSS

Difference between HTML HTML (HyperText Markup


and CSS Language)

HTML (HyperText Markup Language) and HTML is the standard markup language
CSS (Cascading Style Sheets) are the used to create web pages. It structures the
foundational technologies for creating web content by using elements such as
pages. HTML provides the structure, while headings, paragraphs, lists, links, images,
CSS defines the style and layout. HTML is and more. HTML elements are the building
used along with CSS and Javascript to blocks of web pages, allowing developers
design web pages. to embed multimedia, create forms, and
design the overall layout.
2 Features of HTML

STRUCTURE CONTENTS LINKS FORMS

HTML provides the HTML is used to add HTML is used to create HTML is used to create
basic structure of a various types of content links between different forms that allow users
webpage, defining the to a webpage, including pages and websites, to input data, such as
layout and hierarchy of text, images, videos, allowing users to contact information or
content using elements and audio. navigate the web. search queries.
such as headings,
paragraphs, and lists.
Example: In this example, we will see the basic structure of an HTML
document.
3 CSS (Cascading Style Sheets)

CSS stands for Cascading Style Sheets and it is used to style


web documents. It is used to provide the background color
and is also used for styling. It controls the layout, colors, fonts,
and overall look of a web page. CSS is also recommended by
World Wide Web Consortium (W3C). It can also be used along
with HTML and Javascript to design web pages.
4 Features of CSS

STYLE: CSS is RESPONSIVENESS:


used to define CSS allows for
the visual style responsive design,
LAYOUT: CSS ANIMATIONS: where the layout and
of a webpage,
allows for CSS can be style of a webpage
including fonts, used to create can adapt to different
colors, complex
animations and screen sizes and
backgrounds, layouts, with the
transitions on a device types.
and layout ability to webpage,
position making it more
elements on a interactive and
page and adjust engaging.
their size and
spacing.
Example: In this example, we will see the basic structure of an HTML document by
using CSS also.
5 Similarities between HTML and CSS

SYNTAX SEPARATION OF CONCERNS


Both HTML and CSS use a similar Both HTML and CSS follow the principle of
separation of concerns, where HTML defines
syntax, with the use of tags and
the structure and content of a webpage,
selectors to define elements on a
while CSS defines the style and layout.
webpage.

CASCADING INTEGRATION
The “C” in CSS stands for “Cascading”,
HTML and CSS are often used
which means that styles can be inherited
together, with CSS being used to style
and overridden based on the order of the
style rules and the specificity of the the elements defined in HTML.
selectors.
6 DIFFERENCE BETWEEN HTML AND CSS
The table below shows the Difference between HTML and CSS:

HTML CSS
• HTML is a markup language used to define a structure • CSS is a style sheet language used to style the web
of a web page. pages by using different styling features.
• It consists of tags inside which text is enclosed. • It consists of selectors and declaration blocks.
• HTML doesn’t have further types. • CSS can be internal or external depending upon the
• We cannot use HTML inside a CSS sheet. requirement.
• HTML is not used for presentation and visualization. • We can use CSS inside an HTML document.
• HTML has comparatively less backup and support. • CSS is used for presentation and visualization.
• HTML doesn’t allow animations and transitions. • CSS has comparatively higher backup and support.
• HTML files are saved with .htm or .html extension. • CSS allows animation and transitions which helps to
improve the UI.
• CSS files are saved with .css extension.
7 WHAT ARE PHYSICAL TAGS IN HTML?

Physical Tags are used to indicate that how specific characters


are to be formatted or indicated using HTML tags. Any physical
style tag may contain any item allowed in text, including
conventional text, images, line breaks, etc. Although each
physical tag has a defined style, you can override that style by
defining your own look for each tag. All physical tags require
ending tags.
Syntax: <tag_name> formatting character or para </tag_name>
8 Features of Physical Tags

1 2 3 4

They are extremely They are used to Physical Text Styles Physical Styles are
straightforward. highlighting important indicate the specific rendered in the same
sentences. type of appearance for manner by all browsers.
a section e.g., bold,
italics, etc.
9 Example of Physical Tags
TAGS MEANING PURPOSE

Bold increases the importance of the text because bold tag convert the text into bold size.
<b> Bold HTML <b> tag acts as a presentation tag used to markup written text as a bold format. If we want to
display plain text in bold format you can use text between <b>sentence</b> tag.

An Italic tag is used to define a text with a special meaning.


<i> Italic HTML <i> tag acts as a presentation tag used to markup written text as an italic format. If we want to
display plain text in italics format you can use text between <i></i> tag.

It is used to underline the text.


<u> Underline HTML <u> tag acts as a presentation tag used to markup written text as an underline format. If we
want to display plain text in underline format you can use text between <u></u> tag.

Big tag increase the font size by 1 (Note: You can not use the big tag in HTML 5)
The <big> tag is used to make the text one size bigger i.e small to medium, medium to large, and
<big> Big
large to x-large but the <big> tag will not make the font size larger than the browser’s maximum
font-size.
9 Example of Physical Tags
TAGS MEANING PURPOSE

A small tag defines the small text, and it is used while writing copyright.
<small> Small The <small> tag is used to make the text one size smaller i.e x-large to large …. small but <small>
tag will not make the font-size smaller than the browser’s minimum font-size.

The subscript is used for alternate baseline.


<sub> Subscript Sub tag defines subscript. Subscript appears half below a normal line with small font size. These tags
are mostly used while writing chemical formulas.

Superscript is usually used for showing elements above base-line.


<sup> Superscript Sup tag defines superscript. Subscript appears half above the normal line with small font size. These
tags are mostly used while writing mathematical derivations.

It is an editing markup that tells the reader to ignore the text passage.
<strike> Strike-through Strike tag defines Strike through sentences. The strike tag makes the horizontal line over the text
which represents that this given text is not for reading ignore it.

Teletype text gives the default font-family which is monospace.


<tt> Teletype text tt tag defines teletype text. This tag changes the given sentence into its default font-family i.e mono
space.
10 CONTAINER AND EMPTY TAGS IN HTML

HTML uses predefined tags that tell the browser how to display the
content. Tags are nothing but some instructions that are enclosed in
angle braces(i.e., <>). Tags are used in many places of the webpage but
many users are often confused about some tags whether it is a
container or an empty tag. They get this confusion because they don’t
know for what tag there should be an ending tag along with the opening
tag or not. There are two types of tags in HTML:
Table of Content
• Container tags
• Empty Tags
10 CONTAINER AND EMPTY TAGS IN
HTML
• Container tags
Container tags are generally divided into three parts, i.e., opening tag, content(which will
display on the browser), and closing tag. In the content part, they can also contain some
other tags. These opening and closing tags are used in pairs which are start tag and end
tag, which are often called ON and OFF tags.

If you forget to close the container tag, the browser applies the effect of the opening tag
until the end of the page. So be careful while working with container tags. The majority of
tags present in HTML are container tags.

Syntax:
<tag_name> ...</tag_name>
Some commonly used container tags are:
1. Essential Tags: Following tags are used to create the structure of the webpage:
• <html>….</html>: This marks the beginning and ending of the webpage also it tells that
the document is an HTML document. This contains all other tags in between these tags
which are considered for making a webpage.
• <head>…</head>: This tag is used to define the head part of the document which
contains the information related to the webpage.
• <title>…</title>: This tag stores the description of the web page, whatever given in these
tags appears on the tab name while opened by the browser. It is described in the head
tag.
• <body>….</body>: This tag is used to display all the information or data, i.e, text,
images, hyperlinks videos, etc., on the webpage to the user.

2. Headings: Following tags are used for headings:


<h1>….</h1> to <h6>…</h6>: It is used for including headings of different sizes ranging
from 1 to 6.
Some commonly used container tags are:
3. Text formatters: Following tags are used for text formatting:
• <p>….</p>: When paragraphs are needed to be included, this tag is used
• <b>….</b>: Makes the contained text to bold.
• <i>…</i>: Makes the contained text to italic.

4. HyperLinks: Following tag is used to define a hyperlink in the webpage:


<a href=”link.com”>…</a>: When we link some other webpages we add the hyper links to
other webpages using this <a …>…</a>tag.

5. Button tag: Following tag is used to create a click button:


<button>…</button>: This is used in many ways but mainly used to manipulate done by
adding events and many more.

6. Division tag: Following tag is used to create a division:


<div>….</div>: This defines a section in a document. The webpage can be divided to
different sections using the <div>….</div> tag.
Some commonly used container tags are:
7. Iframe tag: Following tag is used for inline framing:
<iframe src=”link.com> </iframe>: When some other document is to be embedded like
some video or image into HTML we use this tag.

8. Navigation tag: Following tag is used to set a navigation link:


<nav>…</nav>: Defines a navigation bar that contains a set of menu or a menu of
hyperlinks.

9. Script tag: Following tag is used to add JavaScript code to the webpage:
<script>…</script> : This contains the javascript code that adds interactivity to the
webpage.

10. Lists: Following tags are used to write data in the form of ordered and unordered lists:
• <ol>…</ol>: This tag is used to create ordered lists.
• <ul>…</ul>: This tag is used to create unordered lists.
• <li>…</li>: This tag is used to add list items.
10 CONTAINER AND EMPTY TAGS IN HTML

• Empty Tags
The tags that do not contain any closing tags are known as
empty tags. Empty tags contain only the opening tag but they
perform some action in the webpage. Some commonly used
empty tags are as:
Syntax:
<tag_name>
Empty Tags Description

Inserts a line break in a webpage wherever needed.


<br>
Inserts a horizontal line wherever needed in the webpage.
<hr>
This tag is used to display the images on the webpage which were given in
<img> the src attribute of the tag.

This is mainly used with forms to take the input from the user and we can
<input> also define the type of the input.

When we store our CSS in an external file this can be used to link external
<link> files and documents to the webpage and it is mainly used to link CSS files.

Contains all metadata of the webpage. Metadata is the data about data and
<meta> is described in the head tag.

When an external media source is needed to be included in the webpage.


source tag is used to insert any media source like audio, video etc… in our
<source> webpage.
<!DOCTYPE html>

<html lang="en">

<head>

<!--Meta data-->

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible"

content="IE=edge">

<meta name="viewport"

content="width=device-width, initial-scale=1.0">

<!--The description written on title tag get appeared as browser tab name-->

<title>Geeks For Geeks </title>

</head>

<!-- Whatever content in body tag appears on the webpage-->

<body>

<!--Headings-->

<h1> Geeks For Geeks </h1>

<h2> Geeks For Geeks </h2>

<h3> Geeks For Geeks </h3>

<h4>Geeks For Geeks </h4>

<h5> Geeks For Geeks</h5>

<h6> Geeks For Geeks </h6>

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

<!--For horizontal line -->

<hr>

<!--For paragraphs -->

<p> Geeks for geeks is a computer science portal for geeks. </p>

<hr>

<p> This is a <br> line break </p>


11 HOW TO ADD BACKGROUND IMAGE IN HTML?

Adding a background image to your HTML page can enhance the visual appeal
and provide a more immersive experience for your website visitors. This
process involves embedding an image behind your webpage content. You can
do this by using the background attribute in HTML tags or the style tag, either
inline or in an external stylesheet. This allows you to specify the image URL
and control its placement and appearance.

Table of Content
1. Using a style Attribute
2. Using The Background Attribute
3. Using the background-image property
Examples of adding background images in HTML

1. Using a style Attribute


To incorporate a background image in HTML using a style attribute, you
can apply CSS directly to the HTML element. For instance, you can set
the background image of the body using the style attribute, specify the
image URL, and prevent repetition. This method provides a
straightforward way to customize the look and feel of your webpage.

Syntax:
<div style = "background-image: url('Image_name.extension');">
Example: In this example we sets the background image of the body using the style attribute, specifying
the image URL and preventing repetition.

<!DOCTYPE html>
<html>
<head>
<title>By using style attribute</title>
</head>

<body
style="background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20240412161651/using-style-
attribute.jpg');
background-repeat: no-repeat;"
>
</body>
</html>

Output:

Using a style Attribute Example Output


Examples of adding background images in HTML

2. Using The Background Attribute


Using background attribute to body or target tag we can easily set the background
image in HTML.
Note: The background attribute in HTML is deprecated. Instead, use CSS
properties like background-image applied inline or external css to set background
images for elements.

Syntax:
body background="image_name.image_extension">
Example: In this example we sets the background image of the body using the deprecated background
attribute and specifies no repetition using inline CSS.
<!DOCTYPE html>
<html lang="en">

<head>
<title>Background Image</title>
</head>

<body background=
"https://media.geeksforgeeks.org/wp-content/uploads/20240412161651/using-style-attribute.jpg"
style="background-repeat: no-repeat;">
</body>

</html>

Output:

Using The Background Attribute Example Output


Examples of adding background images in HTML

3. Using the background-image property

Using the background-image property to set an element’s background. Specify the


URL of the image file

Syntax:
background-image: url('url')
Example: In this example we sets the body background image using CSS background-image property.
The image URL is provided within the style block, with background-repeat set to no-repeat.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Background Image</title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20240415102919/
UsingBackgroundImageProperty.webp");
background-repeat: no-repeat;

}
</style>
</head>

<body>
<!-- Your content here -->
</body>
</html>

Output:

Using the “background-image” property Example Output


12 HOW TO DEFINE A LIST ITEM IN HTML5?

To define a list in HTML5 we can use the HTML <li> tag. But there are two types
of listing in HTML. One is an ordered list and another one is an unordered list.
For ordered we can use HTML <ol> tag and for the unordered list, we will use
the HTML <ul> tag.

Also, we can change the list type, for that, you can check the below articles.
• HTML <li> type Attribute
• HTML <ol> type Attribute
• HTML <ul> type Attribute
Ordered list: It defines a list of items in which the order of item matters. An ordered list is
also called a number list. The list items are enclosed within <ol> and </ol>tags. The
ordering is given by numbering scheme, using Arabic numbers, letters or roman
numerical.

Syntax:

<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>

Unordered list: It is used for items in which the ordering is not specific. An unordered list
also called bulleted list. The list is defined using the <ul> and <ul/>tags. Each time in the
list is defined using the <li> tag.

Syntax:
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
Example: The following code demonstrates both the ordered list and un-ordered list.

HTML
<!DOCTYPE html>
<html>

<body>
<h1>GeeksforGeeks</h1>
<ol>
<li>Geeks</li>
<li>Sudo</li>
<li>Gfg</li>
<li>Gate</li>
<li>Placement</li>
</ol>
<ul>
<li>Geeks</li>
<li>Sudo</li>
<li>Gfg</li>
<li>Gate</li>
<li>Placement</li>
</ul>
</body>

</html>

Output:

ordered list and un-ordered list


13 DIFFERENCE BETWEEN SEMANTIC AND NON-SEMANTIC ELEMENTS

SEMANTIC HTML ELEMENTS

These semantic elements simply mean, elements with meaning.


The reason being, there definition in the code tells the browser
and the developer what they are supposed to do. Framing in
simpler words, these elements describe the type of content they
are supposed to contain.
Following is the list of some semantic elements:

• article <!DOCTYPE html>


<html>

<head>

• aside <title>my web page</title>


<style type="text/css">
h1 {

• details }
color: green;
font-weight: bold;

• figcaption table,
tr,
td {

• figure
border: 1px solid black;
}

th {

• footer }
font-weight: bold;
color: red;

• form
</style>
</head>

<body>

• header <article>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal for Geeks</p>

• main
</article>
<table>
<tr>
<th>head1</th>

• mark </tr>
<tr>
<th>head2</th>

• nav </tr>
<td>A</td>
<td>0</td>

<tr>

• table </tr>
<td>B</td>
<td>1</td>

• section </table>
</body>

</html>

Output:
Following is the list of some semantic elements:
• Article - Represents a self-contained piece of
content that could stand alone, such as a blog • Header - Represents introductory content,
post, news article, or forum post. typically a group of introductory or
• Aside - Contains content that is tangentially navigational aids.
related to the content around it, such as • Main - Specifies the main content of the
sidebars or call-out boxes. document, excluding headers, footers, and
• Details - Defines additional details that the navigation.
user can view or hide • Mark - The <mark> element is used to
• Figcaption - Provides a caption or legend for highlight text that is relevant or important to
the content of the <figure> element. the user's current context or for reference
• Figure - Encapsulates a unit of content, such
purposes.
as an image with a caption, that is referenced in
• Nav - Defines a set of navigation links.
the main flow of the document.
• Table - The <table> element is used to
• Footer - Represents the footer for its nearest
sectioning content or the root element. create a table, which is a structured set of
• Form - The <form> element represents a data made up of rows and columns.
section of a document that contains interactive • Section - Represents a standalone section
controls for submitting information to a web of content that is thematically related.
server.
14 DIFFERENCE BETWEEN SEMANTIC AND NON-SEMANTIC ELEMENTS

NON-SEMANTIC ELEMENTS

Unlike, semantic elements they don’t have any meaning. They


don’t tell anything about the content they contain. They can be
used with different attributes to mark up semantics common to a
group.
Following is the list of some non-semantic elements:
• Div - can be used to group <!DOCTYPE html>
<html>

elements together <head>


<title>my web page</title>
<style type="text/css">
span {
• Span - can be used to style color: green;
font-size: 40px;

text }
font-weight: bold;

</style>
</head>

<body>
<div>
<span>GeeksForGeeks</span> <br>
A computer science portal for geeks
</div>
</body>

</html>

Output:
15 Difference between semantic and non-semantic elements

SEMANTIC NON-SEMANTIC
• They have meaning • They don’t have meaning
• They describe how the content • They can contain anything
within them is supposed to • The ‘class’ attribute can be
behave used to work with their
• They have specific attributes for structure
their structure
15 HTML COLOR PICKER
HTML Color Basics

HEX Color Codes RGB Values HSL Values


• HTML color codes are • RGB stands for red, green, • HSL (hue, saturation,
represented in hexadecimal
and blue. lightness) provides a more
(HEX) format: #RRGGBB.
•
• Each color channel has a intuitive way to describe
Each of the two-digit values
(RR, GG, and BB) ranges from value from 0 to 255. colors.
00 to FF. • Example: rgb(143, 58, 132) • Hue: The color itself (0 to
• For example:
represents a shade of 360 degrees).
- Red: #FF0000 (255 red, 0
purple. • Saturation: Intensity (0%
green, 0 blue)
- Green: #00FF00 (0 red, 255
to 100%).
green, 0 blue) • Lightness: Brightness (0%
- Blue: #0000FF (0 red, 0 green, to 100%).
255 blue)
HTML colors with HEX, RGB, HSL values

Color Name HEX Code RGB Values HSL Values

Red #FF0000 rgb(255, 0, 0) hsl(0, 100%, 50%)

Green #00FF00 rgb(0, 255, 0) hsl(120, 100%, 50%)

Blue #0000FF rgb(0, 0, 255) hsl(240, 100%, 50%)

Cyan #00FFFF rgb(0, 255, 255) hsl(180, 100%, 50%)

Magenta #FF00FF rgb(255, 0, 255) hsl(300, 100%, 50%)

Yellow #FFFF00 rgb(255, 255, 0) hsl(60, 100%, 50%)


Shades of All HTML Colors
1. Shades of HTML Red Color:

Color Name HEX Code RGB Values HSL Values

Dark Red #8B0000 rgb(139, 0, 0) hsl(0, 100%, 27.3%)

Red #FF0000 rgb(255, 0, 0) hsl(0, 100%, 50%)

Light Red #FFC0CB rgb(255, 192, 203) hsl(350, 100%, 88.2%)

hsl(348.5, 83.3%,
Crimson #DC143C rgb(220, 20, 60)
47.1%)

Tomato #FF6347 rgb(255, 99, 71) hsl(9.1, 100%, 64.7%)

Indian Red #CD5C5C rgb(205, 92, 92) hsl(0, 53.3%, 58.8%)


Shades of All HTML Colors
2. Shades of HTML Green Color:

Color Name HEX Code RGB Values HSL Values

Dark Green #006400 rgb(0, 100, 0) hsl(120, 100%, 20%)

Green #008000 rgb(0, 128, 0) hsl(120, 100%, 25%)

Lime Green #32CD32 rgb(50, 205, 50) hsl(120, 61.2%, 50%)

hsl(146.5, 50.7%,
Sea Green #2E8B57 rgb(46, 139, 87)
36.3%)

Olive #808000 rgb(128, 128, 0) hsl(60, 100%, 25.1%)

Chartreuse #7FFF00 rgb(127, 255, 0) hsl(90, 100%, 50%)


Shades of All HTML Colors
3. Shades of HTML Blue Color:

Color Name HEX Code RGB Values HSL Values

Dark Blue #00008B rgb(0, 0, 139) hsl(240, 100%, 27.3%)

Blue #0000FF rgb(0, 0, 255) hsl(240, 100%, 50%)

hsl(197.8, 71.4%,
Sky Blue #87CEEB rgb(135, 206, 235)
71.6%)

Dodger Blue #1E90FF rgb(30, 144, 255) hsl(210.2, 100%, 55.1%)

Royal Blue #4169E1 rgb(65, 105, 225) hsl(225, 72.7%, 56.9%)

Navy Blue #000080 rgb(0, 0, 128) hsl(240, 100%, 25.1%)


Shades of All HTML Colors
4. Shades of HTML Cyan Color:

Color Name HEX Code RGB Values HSL Values

Dark Cyan #008B8B rgb(0, 139, 139) hsl(180, 100%, 27.3%)

Cyan #00FFFF rgb(0, 255, 255) hsl(180, 100%, 50%)

Aqua #00FFFF rgb(0, 255, 255) hsl(180, 100%, 50%)

hsl(174.7, 72.7%,
Turquoise #40E0D0 rgb(64, 224, 208)
55.1%)

Light Cyan #E0FFFF rgb(224, 255, 255) hsl(180, 100%, 93.9%)

Teal #008080 rgb(0, 128, 128) hsl(180, 100%, 25.1%)


Shades of All HTML Colors
5. Shades of HTML Magenta Color:

Color Name HEX Code RGB Values HSL Values

Dark Magenta #8B008B rgb(139, 0, 139) hsl(300, 100%, 27.3%)

Magenta #FF00FF rgb(255, 0, 255) hsl(300, 100%, 50%)

Fuchsia #FF00FF rgb(255, 0, 255) hsl(300, 100%, 50%)

hsl(302.2, 59.6%,
Orchid #DA70D6 rgb(218, 112, 214)
64.9%)

Hot Pink #FF69B4 rgb(255, 105, 180) hsl(330.4, 100%, 70.6%)

Plum #DDA0DD rgb(221, 160, 221) hsl(300, 47.1%, 75.9%)


Shades of All HTML Colors
6. Shades of HTML Pink Color:

Color Name HEX Code RGB Code HSL Code

Pink #FFC0CB rgb(255, 192, 203) hsl(350, 100%, 88%)

LightPink #FFB6C1 rgb(255, 182, 193) hsl(351, 100%, 86%)

HotPink #FF69B4 rgb(255, 105, 180) hsl(330, 100%, 71%)

DeepPink #FF1493 rgb(255, 20, 147) hsl(328, 100%, 54%)

MediumVioletRed #C71585 rgb(199, 21, 133) hsl(322, 81%, 43%)

PaleVioletRed #DB7093 rgb(219, 112, 147) hsl(340, 60%, 65%)


Shades of All HTML Colors
7. Shades of HTML Orange Color:

Color Name HEX Code RGB Code HSL Code

LightSalmon #FFA07A rgb(255, 160, 122) hsl(17, 100%, 74%)

Coral #FF7F50 rgb(255, 127, 80) hsl(16, 100%, 66%)

Tomato #FF6347 rgb(255, 99, 71) hsl(9, 100%, 64%)

OrangeRed #FF4500 rgb(255, 69, 0) hsl(16, 100%, 50%)

DarkOrange #FF8C00 rgb(255, 140, 0) hsl(33, 100%, 50%)

Orange #FFA500 rgb(255, 165, 0) hsl(39, 100%, 50%)


Shades of All HTML Colors
8. Shades of HTML Yellow Color:

Color Name HEX Code RGB Code HSL Code

Gold #FFD700 rgb(255, 215, 0) hsl(51, 100%, 50%)

Yellow #FFFF00 rgb(255, 255, 0) hsl(60, 100%, 50%)

LightYellow #FFFFE0 rgb(255, 255, 224) hsl(60, 100%, 94%)

LemonChiffon #FFFACD rgb(255, 250, 205) hsl(54, 100%, 90%)


16 HOW TO SET THE NAME FOR THE OBJECT IN HTML5?

<object> element in HTML5 is used to link any external files and resources in the form of
any image or any nested linked webpages or content or any plugin that can do the same
work.

Syntax:
object name="name"></object>

Elementary uses of <object/ element:

Initially <object> is designed to embed the different applications and browser plugins
within it, which is mostly used to extend the usability of browsers.
The attributes that can be passed within this element:
Attribute Value Description

data URL It specifies the URL of data in the object.

type media_type It specifies the media type of data specified in the data attribute.

It indicates that the resource should be embedded only if the value of the type attribute matches with the type of
typemustmatch boolean
resource provided on the data attribute.

left, right, top,


align It defines the alignment of the objects.
bottom

border pixels It specifies the border around the object.

height pixels It specifies the height of the object.

hspace pixels It specifies the white space on the left and right sides of the object.

vspace pixels It specifies the white space on the top and bottom of the object.

width pixels It specifies the width of the object.

name name It specifies the name of an object.

form form_id It specifies the form id to which the object element belongs to.
Example: Here is the sample code which has objected to link image, video, and any HTML link of some
other webpage:

 HTML

<!DOCTYPE html>

<!DOCTYPE html>

<html>

<body>

<h1>Example of an object element in HTML5</h1>

<label>1.Image Example</label><br>

<object data=

"https://media.geeksforgeeks.org/wp-content/uploads/20210214171643/logo.png"

width="400"

height="300"

border="2"

name="obj1"></object><br><br>

<label>2.Webpage Example</label><br>

<object data="https://www.geeksforgeeks.org/"

width="400"

height="300"

border="2"

name="obj2"></object><br><br>

<label>3.Video Example</label><br>

<object data=

"https://media.geeksforgeeks.org/wp-content/uploads/20210318163839/v.mp4"

width="400"

height="300"

border="2"

name="obj3"></object>

</body>

</html>
17 HOW TO ADD SPACE BETWEEN ELEMENTS?

In this article, we will know how to add space between elements in the
HTML table, along with understanding its implementation through the
examples. We can use normal CSS to make changes in the table, where
we will be using border property to give spacing between different body
elements.
No prior and deep knowledge is required it is just basic CSS and HTML
tricks.
Note: Only thing to be noted is that there must be one “tr” tag inside the
tbody tag
Example 1: The code that uses the border-top property to give the spacing between the elements is
given below.
<body>
 HTML <table>
<tbody class="tbody">
<!DOCTYPE html>
<html lang="en">
<tr> Output:
<td>GeeksforGeeks</td>
<td>GeeksforGeeks</td>
<head> </tr>
<meta charset="UTF-8"> <tr>
<meta name="viewport" <td>GeeksforGeeks</td>
content="width=device-width, <td>GeeksforGeeks</td>
</tr>
initial-scale=1.0">
</tbody>
<title>Document</title>
<tbody class="tbody">
<style> <tr>
body { <td>GeeksforGeeks</td>
color: #fff; <td>GeeksforGeeks</td>
font-size: 12px; </tr>
} <tr>
<td>GeeksforGeeks</td>
table { <td>GeeksforGeeks</td>
border-collapse: collapse; </tr>
} </tbody>
<tbody class="tbody">
<tr>
table td {
<td>GeeksforGeeks</td> Adding the space between the elements in the table
padding: 5px; <td>GeeksforGeeks</td>
background-color: #093d24; </tr>
} <tr>
<td>GeeksforGeeks</td>
.tbody { <td>GeeksforGeeks</td>
border-top: 25px solid #0f9d58; </tr>
} </tbody>
</style> </table>
</body>
</head>
</html>
Example 2: In the below given example, we have used the ::before selector property, which will help in giving a margin between the tbody
elements, so the code for this is given below. Also, we have used overflow: hidden property in the table to prevent overflow of before element.

<!DOCTYPE html>
<html lang="en">
<body>
<table> Output:
<tbody class="tbody">
<tr>
<head>
<td>GeeksforGeeks</td>
<meta charset="UTF-8">
<td>GeeksforGeeks</td>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> </tr>
<style> <tr>
body { <td>GeeksforGeeks</td>
color: #fff; <td>GeeksforGeeks</td>
font-size: 12px; </tr>
background-color: #f2f2f2; </tbody>
} <tbody class="tbody">
<tr>
<td>GeeksforGeeks</td>
table {
<td>GeeksforGeeks</td>
overflow: hidden; </tr>
border-collapse: collapse; <tr>
position: relative; <td>GeeksforGeeks</td>
} <td>GeeksforGeeks</td>
</tr>
table td { </tbody>
padding: 5px; <tbody class="tbody"> Preventing the overflow of before element using Overflow Property
border: 1px solid #000; <tr>
<td>GeeksforGeeks</td>
background-color: #093d24;
<td>GeeksforGeeks</td>
} </tr>
<tr>
.tbody::before { <td>GeeksforGeeks</td>
content: ""; <td>GeeksforGeeks</td>
margin: 10px; </tr>
} </tbody>
</style> </table>
<title>Document</title> </body>
</head>
</html>
18 HOW TO CREATE A CLICKABLE BUTTON IN HTML?

In this article, we will create a Button by using the


<Button> Element in the Document.
It is used to submit the content. The images and text
content can use inside a button tag.

Syntax:
<button type = "button">
Example: Using HTML <button> type Attribute

<!DOCTYPE html>
<html> Output:
<head>
<title>
How to create a clickable button?
</title>
</head>

<body>
<center>
<p>
<h2>
GeeksForGeeks
</h2>
</p>
<h2>
HTML: How to create a clickable button?

</h2>

<!-- button tag starts from here -->


<button type = "button" onclick =
"alert('Welcome to GeeksforGeeks')">
Click Here
</button>
<!-- button tag ends here -->

</body>
</html>
C HTML LINKS
1 HTML LINKS HYPERLINKS

HTML links, or hyperlinks, connect web pages and are created using the `<a>` tag with the
`href` attribute. They enable users to navigate between pages or resources. Links can be
text, images, or other elements, enhancing web navigation and interactivity. Users can
click on links to navigate between different pages or resources.
Note: A hyperlink can be represented by an image or any other HTML element, not just text.
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
Syntax:
<a href="url">link text</a>
Target Attribute

Attribute Description

_blank Opens the linked document in a new window or tab.

Opens the linked document in the same frame or window as the


_self
link. (Default behavior)

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

Opens the linked document in a specified frame. The frame’s


framename
name is specified in the attribute.
HTML Links Examples
Example 1: Basic Hyperlink

In this example we contains a paragraph instructing users to click on the link labeled “GeeksforGeeks,”
which directs to the website “https://www.geeksforgeeks.org”.

<!DOCTYPE html>
<html>

<head>
<title>HTML Links</title>
</head>

<body>
<p>Click on the following link</p>
<a href="https://www.geeksforgeeks.org">
GeeksforGeeks
</a>
</body>

</html>

Output:

HTML Links example output


<p>

HTML Links Examples


If you set the target attribute to
"_top", the link will open in the full
body of the window.
</p>
Example 2: Using target Attributes <a href="https://www.geeksforgeeks.org"
target="_top">
GeeksforGeeks
In this example we demonstrates the use of target attributes in links. Each link opens in a different </a>
context: _blank opens in a new window or tab, _self in the same frame, _parent in the parent frame,
<p>
_top in the full window body, and framename in a specified frame. If you set the target attribute to
"_parent", the link will open in the
parent frame.
<!DOCTYPE html> </p>
<html> <a href="https://www.geeksforgeeks.org"
target="_parent">
<head> GeeksforGeeks
</a>
<title>Target Attribute Example</title> </body>
</head>
</html>
<body> Output:
<h3>
Various options available in the
Target Attribute
</h3>

<p>
If you set the target attribute to
"_blank", the link will open in a new
browser window or tab.
</p>
<a href="https://www.geeksforgeeks.org"
target="_blank">
GeeksforGeeks
</a>

<p>
If you set the target attribute to
"_self", the link will open in the
same window or tab.
</p>
<a href="https://www.geeksforgeeks.org"
target="_self">
GeeksforGeeks
</a>
2 HTML Cheat Sheet

HTML (HyperText Markup Language) serves as the foundational framework for


web pages, structuring content like text, images, and videos. HTML forms the
backbone of every web page, defining its structure, content, and interactions. Its
enduring relevance lies in its universal adoption across web development, ensuring
that regardless of the framework or language used, content ultimately renders in
HTML.

This HTML Cheat Sheet for Beginners contains helpful code examples and is
designed as a quick reference for those familiar with these languages. From
semantic elements to mobile optimization, we covered all topics. Whether you’re
building a personal blog, an e-commerce site, or a cutting-edge web app, this cheat
sheet has you covered.
What is an HTML Cheat Sheet?
An HTML Cheat Sheet is a reference document summarizing key HTML elements, attributes, and
syntax. It serves as a quick guide for web developers, offering easy access to commonly used tags
and their respective functionalities.

Table of Content
• Main root
• Boilerplate
• Headings
• Container
• Document Information
• Semantic Element
• Text Formatting and Inline Text Semantics
• Lists
• Tables
• Forms
• Multimedia
• Characters and Symbols
• Attributes
Main root
The <html> element represents the root (top-level element) of an HTML document also called the
document element. All other elements must be descendants of this element.
<html> … </html>
 BOILERPLATE
HTML
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Description of the document -->
<meta charset="UTF-8" />
<title>
<!-- title goes here -->
Geeks For Geeks
</title>
</head>

<body>
<!-- your content goes here -->
Welcome to Geeks for Geeks
</body>

</html>
Main root
 Headings
HTML heading tags (<h1> to <h6>) are used to define headings and subheadings on your webpage.
The <h1> tag is typically reserved for the page’s main title, while the others denote subheadings in
descending order of importance.

Heading Tags Description Syntax

Used for title generally once per page and has a font size
<h1> <h1>….</h1>
of 2em.
Used for medium sized titles and has a font size of
<h2> <h2>….</h2>
1.5em.

<h3> Used for subsections and has a font size of 1.17em. <h3>….</h3>

<h4> Used for highlighting text with font size of 1em. <h4>….</h4>

<h5> Fifth level heading with font size of .83em. <h5>….</h5>

Displays least significant details and has a font size


<h6> <h6>….</h6>
of .67em
Main root
HTML
<!DOCTYPE html>
<html>

<head>
<title>Heading Tags</title>
</head>

<body>
<h1>GeeksforGeeks</h1>
<h2>GeeksforGeeks</h2>
<h3>GeeksforGeeks</h3>
<h4>GeeksforGeeks</h4>
<h5>GeeksforGeeks</h5>
<h6>GeeksforGeeks</h6>
</body>

</html>
Main root
 Container
Container tags in HTML are used to group other elements together. They provide a way to structure
your HTML and apply styles to multiple elements at once. The several container tags in HTML are:

Tags Description Syntax


Block element that defines a division
<div> <div>… </div>
in HTML document.
Inline element used to mark up a
<span> <span>…</span>
part of a text or document.
<p> Used to represent a paragraph. <p>…</p>
Represents pre-formatted text to
<pre> present exactly as written in the <pre>…</pre>
HTML file.

<code> Used to represent source codes <code>…</code>


Main root
HTML This
<!DOCTYPE html> is a pre tag.
<html> </pre>
</p>
<head> <!-- html pre tag ends here -->
<title> GeeksforGeeks </title> <!--code Tag starts here -->
<meta name="keywords" content="Meta Tags, Metadata" /> code tag: Displays code snippets.
<meta name="description" content="Geeksforgeeks is a computer science portal." /> <code>
<style type="text/css"> #include<stdio.h>
body { int main() {
background-color: powderblue; printf("Hello Geeks");
} }
<!--code Tag ends here -->
h1 { </code>
color: black; <p>
font-family: arial; Click on the following link
} <!-- anchor tag starts -->
</style> <a href="https://www.geeksforgeeks.org">
</head> GeeksforGeeks
</a>
<body> <!-- anchor tag ends -->
<p> </p>
GeeksforGeeks is a
</body>
<!-- span tag starts-->
<span style="color:red;font-weight:bolder">
</html>
computer science</span> portal for
<span style="background-color: lightgreen;">
geeks
</span>
<!-- span tag ends -->
<!-- pre tag starts here -->
<pre>
Main root
 Document Information
This section encompasses HTML tags that provide a comprehensive summary of the content within the
HTML document. These tags offer a snapshot of what the document contains, enhancing the
understanding of its structure and content.

Tags Description Syntax


Container for metadata which is data
<head> <head>…</head>
about data.
Used to link external style sheets or
<link> <link>
documents.
Defines metadata about HTML
<meta> <meta/>
document.
<title> Defines the document’s title <title>…</title>
Used to define style information
<style> <style>…</style>
(CSS) for a document.
Main root
HTML color: white;
}
<!DOCTYPE html>
<html> .second {
text-align: center;
<!-- head tag starts here -->
background-color: white;
font-size: 30px;
<head> color: red;
}
<!-- title tag --> </style>
<title>Title goes here </title> <!-- style tag ends here -->
</head>
<!-- head tag ends here -->
<!-- link tag -->
<link rel="stylesheet" type="text/css" href="style.css"> <body>
<p id="first">Hello GeeksforGeeks.</p>
<p class="second">Welcome Geeks</p>
<!-- meta tag starts --> </body>
<meta name="keywords" content="Meta Tags, Metadata" />
<!-- meta tag ends --> </html>

<!-- style tag starts here -->


<style>
#first {
font-family: Castellar;
background-color: green;
Main root
 Semantic Element
Semantic Element in HTML are elements that clearly describe their meaning in terms of content and
function, both to the browser and the developer.

Tags Description Syntax

<header> Used to give introductory content about the document. <header>… </header>

<main> Represents the main dominant content of a document. <main>… </main>

<section> Structural HTML element used to group together related elements. <section>… </section>

<nav> Represents a section of a page to provide navigation links <nav>…</nav>

Represents a self-contained composition which is independently


<article> <article>… </article>
distributable or reusable.

<aside> Defines some content aside from the content it is placed in. <aside>… </aside>

<footer> Represents a footer for its sectioning root element <footer>… </footer>
Provides contact information for a person, people, or an
<address> <address>..</address>
organization.
Main root
HTML </article> visit us:<br>
<!DOCTYPE html> <!-- main tag starts here --> GeeksforGeeks<br>
<html> <main>
A-118, Sector 136, Noida, <br>
<!-- HTML section tag is used here -->
Uttar Pradesh (201305)
<section>
<body>
</address>
<h1>Geeksforgeek: Section 1</h1>
<h3>HTML Header Tag</h3>
<p>Content of section </p>
<!-- address tag ends here -->
<hr>
</section> </article>
<article>
<!-- HTML section tag ends here --> <br>
<!-- header tag starts --> <!-- aside tag starts here --> <a href="https://www.geeksforgeeks.org/about/">
<header> <aside>
About Us
<h3>GeeksforGeeks Learning</h3> <h1>This is heading text in aside Tag</h1>
</a>|
<p>This is paragraph text in aside Tag</p>
<h3> HTML nav Tag</h3> <a href="https://www.geeksforgeeks.org/privacy-policy/">
</aside>
<!-- nav tag starts --> Privacy Policy
<!-- aside tag ends here -->
<nav> </a>|
</main>
<a href="#">Home</a> | <!-- main tag ends here --> <a href="https://www.geeksforgeeks.org/careers/">
<a href="#">Interview</a> | <!--HTML footer tag starts here--> Careers
<a href="#">Languages</a> | <footer> </a>
<a href="#">Data Structure</a> | <article>
<p>@geeksforgeeks, Some rights reserved</p>
<!-- address tag starts from here -->
<a href="#">Algorithm</a> </footer>
<address>
</nav> <!-- footer tag ends here -->
Organization Name: GeeksforGeeks <br>
<!-- nav tag ends --> </body>
Web Site:
</header> <a href="https://www.geeksforgeeks.org/about/contact-us/">
<!-- header tag ends --> GeeksforGeeks</a><br> </html>
Main root
 Text Formatting and Inline Text Semantics
Text formatting tags in HTML, are used to format text in different ways, like making text bold, italicized,
or monospaced. The HTML inline text semantics is used to define the meaning, structure, or style of a
word, line, or any arbitrary piece of text.
Tags Description Syntax
<em> Used to put stress on some text or show some degree of emphasis. <em>…</em>

<strong> Indicates that the content has strong importance. <strong>…</strong>

<sub> Writes the text as subscript. <sub>…</sub>

<sup> Writes the text as superscript. <sup>…</sup>

<abbr> Represents an abbreviation or acronym. <abbr>… </abbr>

<mark> Highlights important text for reference or notation purposes. <mark>…</mark>

<cite> Describes the title of a creative work. <cite>…</cite>

<time> Used to represent a specific period of time. <time>…</time>


Main root
HTML
<!DOCTYPE html>
<html>

<head>
<title> Geeks for Geeks </title>
</head>

<body>
<!-- emphasis -->
<div><em>Emphasized text</em></div>
<!-- strong -->
<div><strong>Important text!</strong></div>
<!-- subscript -->
<div>GFG<sub>subscript text</sub></div>
<!-- superscript -->
<div>GFG<sup>Superscript text</sup></div>
<!-- abbreviation -->
<div><abbr>Abbreviation</abbr></div>
<!-- mark -->
<div><mark>Highlighted text</mark></div>
<!-- cite -->
<div><cite>Title of creative work</cite></div>
<!-- time -->
<div>Time<time>9:00 am</time>
to <time>7:00 pm</time>
</div>
</body>

</html>
Main root
 Lists
List tags in HTML, including <ul>, <ol>, and <li>, are used to create different types of lists. It can be
either numerical, alphabetic, bullet, or other symbols. There are three list types in HTML:
 Unordered list: Used to group a set of related items in no particular order.
 Ordered list: Used to group a set of related items in a specific order.
 Description list: Used to display name/value pairs such as terms and definitions.

Tags Description Syntax


<ul> Represents an unordered list of items list. <ul>…</ul>
<ol> The HTML <ol> element represents an ordered list of items. <ol>…</ol>
<li> Represents an item in a list. <li>…</li>
<dl> Represents a description list. <dl>…</dl>

<dd> Used to describe a term/name in a description list. <dd>…</dd>

<dt> Specifies a term in a description. <dt>…</dt>


Main root
HTML <ol>
<li>Array</li>
<!DOCTYPE html>
<li>Linked List</li>
<html> <li>Stacks</li>
</ol>
<head> <h5>Description List</h5>
<title>GeeksforGeeks</title> <!-- Description List -->
</head> <dl>
<dt>Courses:</dt>
<body> <dd>100 </dd>
<h2>Welcome To GeeksforGeeks Learning</h2> <dt> Quizes:</dt>
<dd> 500 </dd>
<h5>Unordered List</h5>
<dt> Interview Experiences:</dt>
<!-- Unordered List --> <dd>1000 </dd>
<ul> </dl>
<li>Data Structures & Algorithm</li> </body>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li> </html>
</ul>
<h5>Ordered List</h5>
<!-- Ordered List -->
Main root
 Tables
Table tags in HTML, such as <table>, <tr>, <td>, and <th>, are used to create and structure tables in
HTML. They allow you to present data in rows and columns.
Tags Description Syntax

<caption> Specifies caption of a table. <caption>…</caption>

<table> Represents data in a two-dimensional table. <table>…</table>

<thead> Used to provide a header to the group of content in an HTML table <thead>…</thead>

<tbody> Used to group primary content of an HTML table. <tbody>…</tbody>

<th> Defines a cell as header of a group of cells of the table. <th>…</th>

<td> Defines a cell of a table. <td>…</td>

<tr> Defines a row in an HTML table. <tr>…</tr>

<tfoot> Defines a set of rows summarizing the columns of the table. <tfoot>…</tfoot>
Main root
HTML </tr>
<!DOCTYPE html> <tr>
<html> <td>Java programming</td>
<td>Backend development</td>
</tr>
<head>
<tr>
<title>HTML Table</title>
<td>Angular </td>
</head>
<td>Frontend Development</td>
</tr>
<body>
<!-- Table Footer starts here -->
<!-- table starts here --> <tfoot>
<table> <tr>
<!-- Table Caption --> <td>Footer content</td>
<caption>Geeks For Geeks Learning</caption> </tr>
<!-- Table row starts --> </tfoot>
<tr> <!-- Table footer ends here -->
<!--Headers --> </table>
<th>Programming Languages</th> </body>
<th>Development</th>
</tr> </html>
<!-- Table row ends -->
<tr>
<!-- Table data -->
<td>C programming </td>
<td>Full stack development</td>
Main root
 Forms
An HTML form is a section of a document that acts as a container for different types of input elements,
such as text fields, passwords, menus, checkboxes, radio buttons, submit buttons, etc.
Generally, Form tags in HTML, like <form>, <input>, <textarea>, and <button>, are used to create forms
for user input.
Tags Description Syntax
Creates a grouping of
<optgroup> options within a <select> <optgroup>.</optgroup>
Represents a section
element.
<form> containing controls for <form>…</form>
submitting information.
Displays an indicator
<progress> showing the degree of <progress>…</progress>
Creates interactive controls completion of a task.
<input> <input>…</input>
for forms to accept data.

Used to give predefined


Create a multi-line plain-
<textarea> <textarea>…</textarea> options for an <input>
text editing control <datalist> <datalist>…</datalist>
element and adds an
autocomplete feature to it.
Represents a control that
<select> provides a menu of options <select>…</select> Represents a clickable
to select from. <button> <button>…</button>
button.

Defines an option in a Specifies a label for an


<option> <option>…</option> <label> <label>…</label>
select list. <input> element.
Main root
HTML <label>First name: </label>
<!DOCTYPE html> <input name="firstName" placeholder="input element used here" /> </p>
<html lang="en"> </label> <p>
</p> <label>Date of Birth:
<head> <input type="date" name="birthDate"/>
<p>
<meta charset="UTF-8"> </label>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <label>Last name: <input name="lastName" /></label> </p>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> </p> <p>
<title>GfG</title> <p> <!-- HTML address tag -->
</head> Gender : <label>
<label> Address :
<body> <input type="radio" name="gender" value="male" /> Male <br />
<form> <!--Textarea -->
</label>
<fieldset> <textarea name="address"
<legend>Personal Details</legend> <label>
<input type="radio" name="gender" value="female" /> Female placeholder="Textarea used here">
<p>
</textarea>
<p>select used here:</p> </label>
</label>
<!-- label starts --> </p> </p>
<label> <label Language preferred: </label> <p>
Salutation <input list="lang" placeholder="datalist used here">
<br />
<button type="submit">Submit</button>
<!--datalist Tag starts here --> </p>
<!-- select starts -->
<select name="salutation"> <datalist id="lang"> <p>Progress tag used here:</p>
<option>--None--</option> <option value="java"></option> Downloading progress for your profile:
<option>Mr.</option> <option value="reactjs"></option> <!--HTML progress tag starts here-->
<option>Ms.</option> <option value="php"></option> <progress value="57" max="100" placeholder="progress tag used here">
<option>Mrs.</option> <option value="python"></option> </progress>
</select> <!--HTML progress tag ends here-->
</datalist>
<!-- select ends --> </fieldset>
<!--datalist Tag ends here --> </form>
</label>
<!-- label ends --> <p> </body>
</p> <label>Email:
<p> <input type="email" name="email" /> </html>
Main root
 Multimedia
Multimedia tags in HTML, such as <img>, <audio>, and <video>, are used to embed multimedia content
like images, audio files, and videos into your webpage.
Tags Description Syntax

<img> Used to link images to web pages. <img />

<audio> Used to include sound content in documents. <audio>…</audio>

<video> Embeds a media player which supports video files in the document. <video>…</video>

Groups various diagrams, images, illustrations, and code snippets into


<figure> <figure>…</figure>
the document.

<figcaption> Used to provide the caption of the content. <figcaption>…</figcaption>

<embed> Embeds multimedia on a Web page <embed>…</embed>

Includes objects, such as images, audio, videos, and Portable


<object> <object>…</object>
Document Format (PDF) on a Web page.
Main root
HTML <!-- Video tag ends here -->
<!DOCTYPE html> <p> HTML Figure here</p>
<html> <!--HTML figure tag starts here-->
<figure>
<body style="text-align: center;">
<img src=
<p>image here</p>
<!-- image tag starts here--> "https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"
<img src= width="304" height="228" alt="The Pulpit Rock">
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png" <figcaption>Figure Caption goes here </figcaption>
width="420" height="100" alt="Geeksforgeeks.org"> </figure>
<!-- image tag ends here--> <!--HTML figure tag ends here-->
<p> Audio Sample</p>
<p> HTML Object here</p>
<!-- audio tag starts here -->
<audio controls>
<!--HTML object tag starts here-->
<source src="test.mp3" type="audio/mp3"> <object data=
<source src="test.ogg" type="audio/ogg"> "https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"
</audio> width="550px" height="150px">
<!-- audio tag ends here --> GeeksforGeeks
<p> Video sample</p> <!--HTML object tag ends here-->
<!-- Video tag starts here -->
</object>
<video width="400" height="350" controls>
<source src="myvid.mp4" type="video/mp4"> </body>
<source src="myvid.ogg" type="video/ogg">
</video> </html>
Main root
 Characters and Symbols
Special characters and symbols in HTML, like &amp; for an ampersand or &lt; for a less-than sign, are
used to display characters that have special meaning in HTML. Some of the most commonly used ones
are:

Symbol Description Entity Name Number Code

© Copyright &copy; &#169;

& Ampersand &amp; &#38;

> Greater than &gt; &#62;

< Less than &lt; &#60;

$ Dollar &dollar; &#36;

“ Quotation mark &quot; &#34;

‘ Apostrophe &apos; &#39;


Main root
HTML
<!DOCTYPE html>
<html lang="en">

<head>
<title>HTML Characters and Symbols</title>
</head>

<body>
<!-- Characters and Symbols are use inside of p element -->
<p>This is the sign of copyright: © </p>
<p>This is the sign of trademark: ™ </p>
<p>This is the sign of ampersand: @ </p>
<p>This is the sign of dollar : $ </p>
<p>This is the sign of less than : < </p>
<p>This is the sign of greater than : > </p>
<p>This is the sign of quotation mark : " </p>
</body>

</html>
Main root
 Attributes
Attributes in HTML are used to provide additional information about HTML elements. They are always
specified in the start tag and usually come in name/value pairs like name=”value”. The name is the
property you want to set and the value is the desired value of the attribute.
Attributes Description Syntax Helps to change the
< tag_name style =”…”
Used in the image tag style look and feel of the
>
to specify the document.
alt < tag_name alt =”…” >
alternative text of the
Unique identifier used to
image
id specify an area of a < tag_name id =”…” >
webpage.
Used to define a < tag_name href =”…”
href
hyperlink. > Specifies one or more
< tag_name class =”…”
class class names for an
>
Specifies URL of the element.
src < tag_name src =”…” >
image to be used. Specifies extra
title information about an < tag_name title =”…” >
Specifies the width of < tag_name width =”…” element.
width
the image in pixels. > Specifies a short hint
that describes the <tag_name
Placeholder
Specifies the height of < tag_name height expected value of an placeholder=” “>
height
the image in pixels. =”…” > input field/text area
Main root
HTML <br> Styling using id attribute here
<!DOCTYPE html>
<!-- Link: href attribute--> </h2>
<html>
<a href="https://ide.geeksforgeeks.org/">
<head> Click to open in the same tab <!-- class attribute -->
<title>HTML Attributes</title>
</a> <h2 class="gfg">
<style>
#geeks { <br> Styling using class attribute here
background-color: green; <a href="https://ide.geeksforgeeks.org/" target="_blank"> </h2>
color: white;
Click to open in a different tab
}
</a> <!-- style -->
.gfg { <h2 style="font-family:Chaparral Pro Light; ">
background-color: white;
<!-- title attribute--> Styling using style attribute here
font-size: 30px;
color: red; <h2 title="GeeksforGeeks: A computer science </h2>
} portal for geeks">
</style>
</head>
Title attribute: hover to see the effect </body>
</h2>
<body>
<!-- source attribute-->
</html>
<div>
<!-- Width and Height attribute-->
<p>source attribute:</p> <p>Using width and height attribute here:</p>
<img src= <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png">
</div>
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"
<!--Alternative text: alt attribute --> width="300px" height="100px">
<div><img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads../Geek_logi_-low_res.png"
alt="Alternative text here">
<!-- id attribute-->
</div> <h2 id="geeks">
3 Benefits of Using HTML Cheat Sheet
An HTML Cheat Sheet is a handy tool that makes creating websites faster and easier, helps your
site show up in search results, and lets you build web pages that everyone can use and enjoy.

Here are some key benefits of HTML Cheat Sheet:

Efficient Web Development:


An HTML Cheat Sheet provides a quick reference guide for web developers, enabling faster
and more efficient coding. It helps in reducing the time spent on searching for syntax or tags,
thereby increasing productivity.

Comprehensive Tag Reference:


The cheat sheet includes an extensive collection of HTML tags and attributes, covering
everything from basic structure tags to complex interactive elements. This makes it a
valuable resource for both beginners and experienced developers.

Semantic Understanding:
With the inclusion of semantic tags in the cheat sheet, developers can create more
meaningful and accessible web content. It aids in understanding the structure and content of
web pages better.
3 Benefits of Using HTML Cheat Sheet
An HTML Cheat Sheet is a handy tool that makes creating websites faster and easier, helps
your site show up in search results, and lets you build web pages that everyone can use and
enjoy.

Here are some key benefits of HTML Cheat Sheet:


Interoperability:
HTML is the foundational language of the web. An HTML Cheat Sheet can be
beneficial when working with other web technologies like CSS, JavaScript, and various
web development frameworks.
Optimized for SEO:
A well-structured HTML document using the correct tags and attributes can
significantly improve SEO. The cheat sheet can guide developers in creating SEO-
friendly markup.
Multimedia Integration:
The cheat sheet covers tags for embedding multimedia elements like images, audio, and
video into web pages, enabling richer and more interactive web content
Remember, using an HTML Cheat Sheet can greatly enhance your web development process, making it a must-have tool for every web
developer.
THANK YOU!!!

You might also like