KEMBAR78
Html5 Notes | PDF | World Wide Web | Internet & Web
Scribd
Upload
46 views39 pages

Html5 Notes

The document provides an overview of web terminologies and introduces HTML, detailing its structure and key elements. It explains concepts such as the Internet, WWW, clients, servers, and various HTML components including metadata, lists, links, and forms. Additionally, it covers attributes, character entities, and global attributes relevant to HTML5.

Uploaded by

Tejendra hsjajj
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
46 views39 pages

Html5 Notes

The document provides an overview of web terminologies and introduces HTML, detailing its structure and key elements. It explains concepts such as the Internet, WWW, clients, servers, and various HTML components including metadata, lists, links, and forms. Additionally, it covers attributes, character entities, and global attributes relevant to HTML5.

Uploaded by

Tejendra hsjajj
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
You are on page 1/ 39

🕸️

HTML

#Web Terminologies

Internet :- The Internet is a global network of connected computers that


can share information with each other.

Example :- When you open YouTube from your phone, it connects through the
Internet to get videos from a YouTube server.

WWW (World Wide Web) :- The World Wide Web (WWW), often called the
Web, is a system of interconnected webpages and information that you can
access using the Internet.

Internet
└── WWW (websites, pages, links, images, videos)
└── www.google.com
└── www.wikipedia.org

Client :- A client is the device or software that requests data from a server.

Example :- When you open Chrome and type amazon.in , your browser is the
client.

Server:- A server is a computer that stores and provides data (like


websites, videos, files) when requested.

Example:- YouTube's servers store all videos. When you click a video, a server
sends the video to you.

HTML 1
Browser:- A browser is a software application that lets you view websites
and use web apps.

URL (Uniform Resource Locator) :- A URL is the address of a webpage or


file on the web.

Parts of a URL:
Example URL: https://www.example.com/page.html

https:// – Protocol

www.example.com – Domain name (Server)

/page.html – Path (specific file or resource)

HTTP :- HTTP is a protocol (set of rules) that tells how data is transferred
between browser (client) and server.

HTTP = Data not encrypted

HTTPS = Secure with encryption (uses SSL/TLS)

Example:
When you open http://example.com , your browser talks to the server using HTTP.

MIME (Multipurpose Internet Mail Extension) :- MIME types tell the browser
what kind of file is being sent so it knows how to handle it.

Examples:
text/html → HTML file

image/png → PNG image

application/json → JSON data

HTML 2
video/mp4 → MP4 video

#Introduction to HTML
Hyper Text Markup Language (HTML) is a standard markup language to create
the structure of a web page. It annotates the content on a web page using
HTML elements.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

The following are some key elements in HTML that form the basic structure of a
web page.

<!DOCTYPE html> declaration update the browser about the


version of HTML being used. By default, it points to HTML5, the latest

HTML 3
version.

The <html> tag encapsulates the complete web page content. All other tags
are 'nested' within the <HTML> tag.

Any HTML document or web page consists of two main sections the 'head'
and the 'body'.

The head section starts with the start tag <head> and ends with the end
tag </head>.

The following elements can be provided within the head tag.

Tags Description

<title> Defines the title that should be displayed on the browser tab

Metadata is in-general, data about data.


Provides metadata about the HTML document.
Metadata will not be displayed on the page but will be machine-
readable.
Used to specify page description, author of the document, last
<meta>
modified, etc.
Used by browsers (control how to display content or reload the page),
search engines (keywords), or other web services.
Post HTML5, meta tag also allows web designers to take control over
the viewport by setting the meta viewport tag.

<style> Defines style information for the web page

<link> Defines a link to other documents like CSS

<script> Defines script like JavaScript

HTML is not case-sensitive but it is best practice to write name of all the
tags in lower case.

HTML is Platform-Independent.

HTML Elements can be classified into two types container elements(having


both closing and opening tag) and empty elements (having only closing
tag). The container elements and empty elements are further classified into
below types:-

HTML 4
Attributes :-HTML elements can contain attributes that can be considered
as an additional feature to set various properties and they are optional.

<html lang="en-US" >

Comment :-As a developer, you may want to document your code, so that
you can easily refer to it in the future.

<!-- -->

Meta Data Element :-

HTML 5
<!DOCTYPE html>
<html lang="en-US">

<head>
<title>Meta tag example</title>

<!-- Specifies the character encoding for the document. -->


<!-- ISO-8859-1 -->
<meta charset="utf-8">

<meta name="author" content="Susan">


<meta name="description" content="This is a sample demo to understand H

<!-- A web app wants to allow content from a current domain and truste dom
and all its subdomains -->
<meta http-equiv="content-security-policy" content="default-src 'self' http:/

<!-- Specify the preferred style sheet to use.-->


<meta http-equiv="default-style" content="/style.css">

<!-- page content display to be adjusted to the device width being used to v
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<p> Sample demo to explain meta tag with attributes </p>
</body>

</html>

Sectioning Elements

HTML 6
#Basics of HTML

Grouping Elements :- Grouping elements can be classified into following


types

HTML 7
<!--UNORDERED LIST (square , circle , disc)-->
<h1>Courses offered:</h1>
<ul style="list-style-type: square;">
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>Bootstrap</li>
</ul>

<!-- ORDEREED LIST (decimal , upper-roman ,upper-latin) -->


<h1>Courses offered:</h1>
<ol style="list-style-type: upper-roman;">
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>Bootstrap</li>
</ol>

<h1>Courses offered:</h1>
<ol type="a" start="d" reversed>
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>Bootstrap</li>
</ol>

Description List

HTML 8
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>The God of Small Things</dt>
<dd>The story is authored by Arunthati Ry and is set in Kerala and revolv
<dt>Shadow Lines</dt>
<dd>Shadow Lines is an invigorating story by Amitav Ghosh about the bo
<dt>The Lord of The Rings</dt>
<dd>An epic high fantasy book by the English author and scholar J.R.R.T
</dl>
</body>
</html>

Quotation Element

<!DOCTYPE html>
<html>
<body>
Below line has been referred from OWASP website:
<blockquote cite="https://owasp.org/">
The Open Web Application Security Project® (OWASP) is a nonprofit fo
</blockquote>
</body>
</html>

Link Element

Link elements are defined using <a> .. </a> tag as below:

HTML 9
A hyperlink is a prime way in which users can navigate from one web
page to another. A hyperlink can point to another web page, or website,
or files, or even specific locations on the same web page.
Hyperlinks can be of any of the below types:
Text hyperlink:

A clickable text is used to take the user to another web page. Largely, we
use text-based hyperlinks.

This text usually appears with an underline and in a different color.

This color mapping is automatically done by the browser for all text
hyperlinks.

Image hyperlink:

A clickable image is used to take the user to another web page.

Bookmark hyperlink:

A clickable text/image is used to take the user to another part of the same
web page.

Email hyperlink:

It allows users to send an email by clicking on that link.

Contact number hyperlink:

It allows the user to call a number by clicking on that link.

<a href="Enquire.html"> Click here to connect to us </a><br/>


<a href="http://www.google.com"> Click here to go to Google website </a>

<a href="http://www.google.com">
<img src="google.jpg" />
</a>

<h2 id="top">Topic</h2>
<p>Detail……</p>
<p>Detail……</p>

HTML 10
<p>Detail……</p>
<a href="#top">Go to Top</a>

<a href="mailto:someone@xyz.com?Subject=Hello%20again">Send Mail</a>

<a href="tel:+9999">Call Us</a>

The possible value of "target" Description

_blank Opens a web page in a new window or tab

_self Opens a web page in the same window (default)

_parent Opens a web page in the parent frame

_top Opens a web page in the full body of the window

frame-name Opens a web page in a named frame

For example:

<a href="https://owasp.org/" target="_blank">Link to OWASP web site</a>

Text Level Semantic Element

The table below lists widely used text-level semantic elements supported in
HTML5.

Element Description

abbr Defines abbreviation or acronym

Represents text quoted from another source by


q
adding quotation mark (" ")

small Displays text in relatively smaller font-size

mark Highlights text

strong Displays text in bold

em Displays text in the italic or emphasized format

sub Displays text as subscript

HTML 11
sup Displays text as superscript

span Provides styling to text

br Breaks line of text/

<strong>Text in bold</strong>

Character Entities

Some characters are reserved in HTML.

For example: If you use the less than (<) or greater than (>) sign in your
content, the browser may mix them with HTML tags.
Also, some characters are unavailable on the keyboard.

For example: ©
Character entities are used to include such character content on a web page

Character Description Entity Name Entity Number

Non-breaking space &nbsp; &#160;

< Less than &lt; &#60;

> Greater than &gt; &#62;

& Ampersand &amp; &#38;

© Copyright &copy; &#169;

€ Euro &euro; &#8364;

£ Pound &pound; &#163;

® Registered trademark &reg; &#174;

<!DOCTYPE html>
<html>
<body>
<p>
&lt;body&gt; is start tag of body element.
</p>
<p>

HTML 12
&lt;/body&gt; is end tag of body element.
</p>
</body>
</html>

Global Attributes

Attributes that can be used with all HTML elements are called "Global
attributes".
The table below lists a few global attributes supported in HTML5.

Attribute Description

contenteditable Allows the user to edit content. Possible values are true/false.

dir Specifies text direction. Possible values are Itr/ rtl.

title Displays the string message as a tooltip.

Specifies whether the spelling of an element's value should be


spellcheck
checked or not. Possible values are true/false.

id Gives a unique id to an element.

For example:

<div>
<p contenteditable="true">This is editable</p>
<p dir="rtl">The direction of the text is from right to left</p>
<p title="mydemo">Hover your mouse here to see the title</p>
<p id="id1">ID should be unoque for each element</p>
</div>

#Table Element

HTML 13
<table>
<caption>MERN stack developer program</caption>
<colgroup>
<col>
<col style="background-color:lightblue;">
<col span="2" style="background-color: lightgreen;">
<col style="background-color: lightpink;">
</colgroup>
<tr>
<th>Technology</th>
<td >MongoDB</td>
<td >Node</td>
<td >Express</td>
<td>React</td>
</tr>
<tr>
<th >Description</th>
<td>The database</td>
<td>Node is the base for server side scripting</td>
<td>JS framework for web server development</td>
<td>JS library to design the front end</td>
</tr>
</table>

<!DOCTYPE html>
<html>
<body>
<table border="2">
<caption>Training Status of the Team</caption>
<tr>
<th colspan="2">Employee Details</th>
<th>Training Status</th>
</tr>
<tr>
<td rowspan="2">Oct'20</td>
<td>Jacob, #1002</td>
<td>Completed</td>

HTML 14
</tr>
<tr>
<td>Jeenie, #3001</td>
<td>In progress</td>
</tr>
</table>
</body>
</html>

#Form Element

HTML 15
The form input element is used to collect details from the user.
The table below lists the various types of input elements.

The possible value of


Description
"type"

text Creates textbox

password Creates textbox that accepts the only password

checkbox Creates checkbox

radio Creates a radio button

button Creates button

Creates a button that submits values of all form elements to


submit
the server

Creates a button that resets values of all form elements to


reset
their default value

image Creates a graphical version of a button

file Creates control to upload the file to the server

hidden Creates a hidden text field

email Creates textbox that accepts only valid email id

number Creates spinbox that accepts only whole numbers

range Creates a range slider

HTML 16
search Creates a search bar

URL Creates textbox that accepts only valid URL

color Creates color picker

date Creates date picker to select date

month Creates date picker to select a month

week Creates date picker to select week

<input type="" value="">

Label:-The <label> element is used to associate a text label with a form


<input> field. The label is used to tell users the value that should be entered
in the associated input field.

Additionally, the "for" attribute of the label can point to the "id" of input control.
This ensures the cursor focuses on the respective input control on the click of
the label.
It also enhances the usability, by allowing the user to toggle the control by
clicking on text written within <label>…</label> tag.

<label>
Username:
<input type="text" name="username">
</label>

Select and Datalist Elements

Country code: <select >


<option value="">-- Please choose a country code --</option>
<option value="+213">+213</option>
<option value="+91">+91</option>
<option value="+244">+244</option>

HTML 17
<option value="+61">+61</option>
<option value="+973">+973</option>
</select>

Country: <input list="countries">


<datalist id="countries">
<option value="India">
<option value="France">
<option value="Singapore">
<option value="Thailand">
<option value="United Arab Emirates">
<option value="United States of America">
</datalist>

The following are some of the attributes which can be used with HTML input
elements.

HTML 18
Placeholder

Pattern

Min

Max

Step

Required

Multiple

Form-override

HTML 19
HTML 20
HTML 21
#EMBEDDED MEDIA

<figure>
<img src="tropicalSea.jpg"
alt="An image of tropical sea"
width="400"
height="341">

<figcaption>A colorful tropical sea view</figcaption>


</figure>

<audio src="audio.mp3" controls="controls"></audio>

<audio>
<source src="myaudio.ogg" type="audio/ogg">
<source src="myaudio.mp3" type="audio/mp3">
</audio>

<video src ="myVideo.mp4" controls="controls"></video>

Some of the attributes which are supported by video element are as follows:

Attribute Value Description

Boolean- any value sets it to


loop Loops audio indefinitely
true

Boolean- any value sets it to


autoplay Plays audio indefinitely
true

preload none-preloading Specifies whether the video should be


metadata- video metadata is preloaded or not
downloaded

HTML 22
auto- entire audio file is
downloaded

height pixel Specifies the height of the video player

width pixel Specifies the width of the video player

Displays image until the first frame of


poster URL of an image file
the video is downloaded

Boolean- any value sets it to


muted Mutes audio
true

iFrame :- We might have requirements to include documents, videos,


interactive videos, or even other web content into a web page directly from
external sources.

The <iframe> element is used to meet the above requirement. Using the iframe
element, contents from external sources can be integrated anywhere on our
web page

It is defined using <iframe>…</iframe> tag.

<iframe src="url" width="n" height="n"> </iframe>

<!DOCTYPE html>
<html>
<body>
<p>This demo loads the target of hyperlink into the same web page using
<a href="https://owasp.org/" target="myFrame">
Click here to load webpage content into iframe.
</a></br>
<iframe name="myFrame" width="600" height="400"></iframe>
</body>
</html>

Some possible values of the 'sandbox' attribute are shown below:

Value Description

(no value) Enables all restrictions

HTML 23
allow-forms Allows users to submit the form

allow-scripts Scripts execution would be enabled.

iframe content would be considered as accessed from


allow-same-origin
the same origin

allow-popups Popups can be enabled.

allow-popups-to-escape- Popups can be opened in new windows without any


sandbox sandbox restrictions.

allow-orientation-lock The orientation of the Screen can be locked.

allow-pointer-lock Pointer Lock API can be accessed.

allow-presentation Session Presentation is enabled for the user.

iframe content can access its top-level browsing


allow-top-navigation
context.

allow-top-navigation-by-user- iframe content can access its top-level browsing


activation context only through user

<iframe src="xyz.htm" sandbox="allow-forms allow-scripts "></iframe>

#HTML SECURITY
As HTML applications are web-based applications, developers should take
proper measures to safeguard the stored data and communications. An
attacker can inject some malicious code via Bluetooth/wifi/text messages for
mobile-based apps or via advertisements/emails for web-based apps. This
malicious code can capture sensitive information and can expose it to the
attacker or it can run some undesired operations internally like sending false
messages or purchasing a product with zero amount etc.
The following is the list of a few vulnerabilities that are possible in HTML:

1. HTML Injection

2. Clickjacking

HTML 24
3. HTML5 attributes and events vulnerabilities

4. Web Storage Vulnerability

5. Reverse Tabnabbing

#HTML INJECTION

🔐 What is HTML Injection?


HTML Injection is a security problem where an attacker puts malicious HTML
code into a website — and the site shows it without cleaning it up.
This can let the attacker:

Change how the page looks

Add links or scripts

Steal user info

💥 Types of HTML Injection


There are 2 main types:

1. Stored HTML Injection

2. Reflected HTML Injection

1️⃣ Stored HTML Injection (aka Persistent)


🔹 What it means:
The malicious HTML is saved (stored) in the website's database — and shown
to everyone who views the page.

📦 Example:
HTML 25
A blog website allows users to comment. But it doesn't check the comment for
HTML.
Attacker comments:

<b>Hacked!</b> <script>alert('Gotcha!');</script>

Now, whenever anyone views that blog post, the script runs! 😱

2️⃣ Reflected HTML Injection (aka Non-Persistent)


🔹 What it means:
The malicious HTML is not saved. It just appears temporarily — like in the URL
or form.

🔁 Example:
A website shows your name from the URL like this:

https://example.com/welcome?name=Teju

And it says:

Welcome, Teju!

But what if an attacker sends this link?

https://example.com/welcome?name=<script>alert('Oops')</script>

Now the site shows:

Welcome, <script>alert('Oops')</script>

🛡️ How to Prevent It:


🛡️ 1. Escape HTML
HTML 26
🔸 What it means:
Convert special characters (like < , > , " , & ) into HTML-safe text, so the
browser doesn't treat them as real HTML or script.

🔹 Example:
User inputs:

<script>alert('Hacked!');</script>

Instead of rendering it directly, we escape it:

&lt;script&gt;alert('Hacked!');&lt;/script&gt;

✅ Output in browser:
It just displays the text, not runs it:

<script>alert('Hacked!');</script>

🛡️ 2. Validate and Sanitize Input


🔸 What it means:
Validation = Check if the input is what you expect (e.g., only letters, no
HTML tags).

Sanitization = Remove or clean bad parts of input (e.g., strip HTML tags).

🔹 Example (in JavaScript):


Let’s say the form only expects names, not code.

function sanitizeInput(input) {
return input.replace(/<[^>]*>?/gm, ''); // removes any HTML tags
}

🔹 Usage:

HTML 27
let userInput = "<script>alert('x')</script>";
let safeInput = sanitizeInput(userInput); // Output: alert('x')

This strips dangerous tags from the input.

🛡️ 3. Use Trusted Libraries / Frameworks


🔸 What it means:
Use frameworks or libraries (like React, Angular, Django, Flask) that
automatically escape dangerous content and prevent injection.

🔹 Example (React):
In React, if a user enters:

const userInput = "<script>alert('x')</script>";

And you render it like:

<script>alert('x')</script>

React automatically escapes it. So it’s displayed as text, not executed.

#CLICKJACKING
🕵️‍♂️ What is Clickjacking?
Clickjacking is a trick where a user is fooled into clicking on something
invisible — like a hidden button — that does something dangerous without
them knowing.
Think of it as a "click trap".

🪤 Real-World Analogy:

HTML 28
Imagine you see a "Play Video" button on a website — but underneath it is a
hidden "Buy Now" or "Allow Camera" button.
When you click "Play", you're actually clicking the hidden button below. You
just got clickjacked.

💻 Example of Clickjacking
Let’s say there’s a real website:

https://bank.com/transfer?amount=1000&to=hacker

Now an attacker creates their own site with this invisible iframe:

<iframe src="https://bank.com/transfer?amount=1000&to=hacker"
style="opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 1
</iframe>

Then they place a fake "Click here to win a prize!" button exactly where the real
transfer button is underneath.
You click — 💸 money gets transferred!

🛡️ How to Prevent Clickjacking


✅ 1. Use X-Frame-Options HTTP Header
Tell the browser: "Don't allow my site in an iframe."

Example (sent from server):

X-Frame-Options: DENY
OR
X-Frame-Options: SAMEORIGIN

DENY = No iframe allowed

SAMEORIGIN = Allow iframe only from your own domain

HTML 29
✅ 2. Use Content-Security-Policy Header
This is a newer and better way:

Content-Security-Policy: frame-ancestors 'none';


It blocks framing from any site.

✅ 3. Frame Busting (JavaScript fallback)


Older method — use JavaScript to prevent being loaded in a frame:

if (window.top !== window.self) {


window.top.location = window.self.location;
}

#HTML5 ATTRIBUTES & EVENT


VULNERABILITIES
HTML5 has few tags, attributes, and events that are prone to different attacks
as they can execute Javascript code. These will be vulnerable to XSS and CSRF
attacks.
Below are a few examples of such attacks:

1. Malicious script injection via formaction attribute

<form id="form1" />


<button form="form1" formaction="javascript:alert(1)">Submit</button>

In the above code snippet, the malicious script can be injected in formaction
attribute. To prevent this, users should not be allowed to submit forms with
form and formaction attributes or transform them into non-working attributes.

2. Malicious script injection via an onfocus event

HTML 30
<input type="text" autofocus onfocus="alert('hacked')"/>

This will automatically get focus and then executes the script injected. To
prevent this, markup elements should not

3. Malicious script injection via an onerror event in the video-tag

<video src="/apis/authContent/content-store/Infosys/Infosys_Ltd/Public/lex_a

this code will run the script injected if the given source file is not available. So,
we should not use event handlers in audio and video tags as these are prone to
attacks.

🛡️ How to Prevent
1. HTML Sanitization

Input Character Encoded value

< &lt; or &#60;

> &gt; or &#62

" &quot; or &#34;

' &apos; or &#39;

& &amp; or &#3

<a href="#" onmouseover="alert('hacked')">Avengers</a>

On using HTML sanitization, the response will be as below.

&lt;a href="#" onmouseover="alert('hacked')"&gt; Avengers &lt;/a&gt;

2. DOMPurify

HTML 31
DOMPurify is used for sanitizing HTML code. It is written in JavaScript and
works in all modern browsers. This library strip out dangerous HTML and
prevents XSS attacks by sanitizing the HTML code.

<script type="text/javascript" src="dist/purify.min.js"></script>

Any dirty code can be sanitized using the below method.

var clean = DOMPurify.sanitize(dirty);

#Local Storage Vulnerabilities


In our web applications, we often store some data in the browser cache. As the
data is stored at the client-side, there is a chance of data-stealing by injecting
some malicious code, if no proper care is taken. Let us now see how to store
the data properly to prevent such attacks.
HTML5 has introduced Web storage or offline storage which deals with storing
data in a local cache. Data can be stored using two types of objects in HTML5.
Local storage and Session storage. These storages hold data in the form of
key-value pairs.
Local storage holds the data in the browser cache until the user deletes it or it
expires based on the expiry date given. setItem() method is used to assign data
to local storage. The below code creates three items with names bgcolor,
textcolor, fontsize and assigns the values to them.

localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
localStorage.setItem("textcolor", document.getElementById("textcolor").value
localStorage.setItem("fontsize", document.getElementById("fontsize").value);

document.getElementById("page").style.backgroundColor = localStorage.getI
document.getElementById("page").style.color = localStorage.getItem("textcol
document.getElementById("page").style.fontSize = localStorage.getItem("font

HTML 32
Mitigation Techniques:
1. Never store sensitive information on client-side
2. Use cookies with the 'httponly' flag to protect the data stored at the client-
side

document.cookie = "username = Smith;password = secret";

In the above code snippet username and password are keys, Smith and secret
are their corresponding values.
Below is the syntax of setting a cookie in the HTTP response header:

Set-Cookie: <name>=<value>[;<Max-Age>=<age>][;expires=<date>][;domai

#Reverse Tabnabbing
🔁 What is Reverse Tabnabbing?
Reverse Tabnabbing is a trick where a link you click can take control of your
original tab (the one you clicked from) and redirect it to a fake site — like a
fake login page.
It happens when you open links in a new tab ( target="_blank" ), but don’t protect
the original tab.

🧠 Why does it happen?


When you use:

<a href="https://badsite.com" target="_blank">Click me</a>

HTML 33
The new tab (badsite.com) can access the original page using window.opener and
run:

window.opener.location = 'https://fake-login.com';

Now your original tab gets redirected to a phishing page — and you might
think it's still the real site!

🧪 Simple Example:
Let’s say you’re on a bank website, and it has this innocent-looking link:

<a href="https://evil.com" target="_blank">Read this article</a>

You click it, a new tab opens evil.com.


Then evil.com runs:

window.opener.location = 'https://fake-bank-login.com';

🛡️ How to Prevent Reverse Tabnabbing


✅ 1. Use rel="noopener" or rel="noreferrer" with target="_blank"

<a href="https://example.com" target="_blank" rel="noopener">Safe Link</a>

🔹 Why this works:


rel="noopener" stops the new tab from accessing window.opener

rel="noreferrer" does that and hides the referrer info (less common need)

✅ HTML5 Best Practices (Summary)


1. Use proper page structure: Include <head> , <body> , <header> , <footer> , etc.

HTML 34
2. Declare correct DOCTYPE: Use <!DOCTYPE html> to ensure standards
rendering.

3. Meaningful titles: Give each page a descriptive <title> .

4. Close all tags: Even for non-container elements like <br> , <img> , etc.

5. Avoid inline styles/scripts: Use external CSS/JS files to keep HTML clean.

6. Place scripts at the end of <body> for better performance.

7. Set lang attribute on <html> , using short language codes (e.g., en ).

8. Use lowercase for tags and attributes for consistency.

9. Use semantic tags like <article> , <section> instead of <div> when possible.

10. Use <ul> for navigation bars instead of lists with type attributes.

11. Avoid type in lists; style with CSS ( list-style-type ).

12. Add alt attributes for images to support accessibility.

13. Indent nested elements properly for readability.

14. Use correct input type and wrap inputs with <label> in forms.

15. Use sandbox with <iframe> for security when embedding content.

16. Use rel="noopener noreferrer" with target="_blank" links to prevent reverse


tabnabbing.

17. Treat all input as untrusted: Sanitize inputs before use.

18. Use output encoding to prevent HTML/JS injection

#Summary
Table Elements:

Possible
Tag Description Attributes
Values

HTML 35
<table> Specifies the table element. None None

Specifies the header portion of


<thead> None None
the table element.

Specifies the content portion of


<tbody> None None
the table

<caption> Specifies the heading of the table None None

The element that is used to


<colspan> logically group the related None None
columns

<tr> Specifies a new table row. None None

<td> Specifies a new table column. None None

Embedded Elements:

Tag Description Attributes Possible Values

The element that is used


src="./demo.img"
<img> to embed an image into src, alt
alt="Alternative text"
the web page.

The element that is used src, controls, loop,


src='./audio.mp3'
<audio> to embed audio into the autoplay, preload,
controls ="controls"
web page. muted

The element that is used


src, controls, loop, src="./video.mp4"
<video> to embed video into the
autoplay, preload controls="controls"
web page.

Specifies the different


formats for video/ audio
<source> elements to be src src= "abc.mp4"
embedded into the web
page.

Specifies a self-
<figure> contained content along None None
with a caption.

Specifies a caption for a


<figcaption> None None
<figure> element

Tag Description Attributes Possible Values

Specifies the title of the


<title> None
web page.

HTML 36
Specifies the hyperlink to rel="stylesheet"
<link> href, rel
an external source. href="mystyle.css"

Specifies the CSS styling


<style> None
inside HTML page.

Specifies the JavaScript


<script> None
Code for the web page.

Specifies the additional name='description',


<meta> meta information for the name,content content="details of web
web page. page content"

Page Layout and Content Tags:

Tag Description Attributes Possible Values

Specifies the wrapped text as


<header> the header of the web page None
document.

Specifies the wrapped text as


<footer> the footer of the web page None
document.

Specifies independent and


<article> None
self-contained content.

Specifies a section in a web


<section> page document such as None
chapters.

Keeps the content aside from


<aside> None
the main content.

Specifies the navbar portion


<nav> None
of the web page.

Specifies the main content of


<main> None
the document.

href
="dummy.com"
Specifies hyper-link to either
rel=" noopener
an external web page or
<a> href, rel, target noreferrer"
some other division of the
target="_blank,
same web page.
_self,_parent or
_top"

Separate block-level division


<div> None
of the web page document.

HTML 37
Specifies the Inline division of
<span> None
an HTML element.

<ul> Specifies the unordered list.

type, start,
<ol> Specifies the ordered list. 1,I,I,a,A
reversed

Specifies the list item


<li> None
element.

<dl> Specifies the description list. None

Specifies the Title of the


<dt> None
description list element.

Specifies the definition/


<dd> details of the description list None
element.

Text Content and Text Formatting Tags:

Tag Description Attributes Possible Values

Heading tags where <h1> is


<h1>,<h2>, <h3>, the most important heading
None
<h4>,<h5>, <h6> and <h6> is the least
important heading.

Specifies paragraph
<p> None
element.

<br> Specifies the line break. None

<blockquote> Specifies quotes. cite cite="dummy.com"

Format the text content as


<sup> None
superscript.

Format the text content as


<sub> None
a subscript.

<em> Emphasize the text content. None

Highlight the text content


<strong> None
as important making it bold.

Highlight the text content


<mark> marking it with a yellow None
background.

Specifies deleted text by


<del> None None
striking off.

HTML 38
Specifies inserted text by
<ins> None None
underline.

Forms Element:

Tag Description Attributes Possible Values

Specifies the form action="target.html"


<form> action, method
element. method="GET"

type=" text",
placeholder="Enter
Specifies the input type, placeholder,
<input> Username"
field. value, formaction
value=""
formmethod-"POST"

Specifies an input
<button> None None
button element.

Specifies label for


<label> for for = "id1"
an input element.

Specifies the drop-


<select> value
down list.

Specifies the
value ="abc"
<option> options in the value, selected
selected= "true"
<select> drop down.

Specifies the auto-


<datalist> None None
completion list.

Specifies a progress min ="0", max="10",


<progress> min, max, step, value
bar step="1", value="5"

Specifies a meter min="0", max="10",


<meter> min,max,step,value
guage step="1", value="1"

Displays output of
<output> None None
user input

Custom sized text


<textarea> rows, cols rows ="2" cols="2"
box to collect input.

HTML 39

You might also like