Here are some of the most common web technologies used today:

MEAN STACK DEVELOPMENT

HTML: Hyper Text Markup Language (HTML) is the standard markup language used to create web pages.
UNIT - 01
CSS: Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a
HTML 5: Introduction to Web, Overview of Web Technologies, HTML - Introduction, HTML - Need, Case- document written in HTML.
insensitivity, Platform-independency, DOCTYPE Declaration, Types of Elements, HTML Elements -
Attributes, Metadata Element, Sectioning Elements, Paragraph Element, Division and Span Elements, List JavaScript: A high-level programming language used to create interactive and dynamic web pages.
Element, Link Element, Character Entities, HTML5 Global Attributes, Creating Table Elements, Table
Elements : Colspan/ Rowspan Attributes, border, cellspacing and cellpadding attributes, Creating Form PHP: Hypertext Preprocessor (PHP) is a server-side scripting language used for web development to create
Elements, Input Elements - Attributes, Color and Date Pickers, Select and Datalist Elements, Editing dynamic web pages.
Elements, Media, Iframe, Why HTML Security, HTML Injection, Clickjacking, HTML5 Attributes & Events
Python: A high-level programming language used for web development to create scalable web
Vulnerabilities, Local Storage Vulnerabilities, HTML5 - Cross-browser support, Best Practices For HTML Web
applications.
Pages.
Ruby on Rails: A web development framework that uses the Ruby programming language to create web
Introduction to Web:
applications.
The web, short for World Wide Web, is a system of interconnected documents & resources that are
React: A JavaScript library used for building user interfaces.
accessed over the internet. It is a vast network of information that has revolutionized the way we share and
access information. Angular: A TypeScript-based open-source web application framework used for building dynamic web
applications.
The web is based on a client- server architecture, where a user’s web browser acts as the client &
communicates with a server over the internet. When a user types in a web address, also known as a WordPress: A Content Management System (CMS) used to create blogs, websites, and online stores.
Uniform Resources Locator – ( URL ), browser sends a request to the sever, which then sends back the
requested web page. Apache: A popular open-source web server software used to serve web pages.

Web pages are typically written in Hyper Text Markup Language – ( HTML ), which a markup language that Nginx: A lightweight and high-performance web server and reverse proxy server.
allows developers to create structured content with links to other pages, images, and multimedia. Web
pages can also include styling and layout information using Cascading Style Sheets – ( CSS ) and interactive MySQL: A popular open-source relational database management system (RDBMS) used for storing and
behavior using JavaScript. retrieving data.

The web has evolved significantly since it’s inception in the 1990’s. It has gone from being a collection of MongoDB: A NoSQL database program used for storing and retrieving data in a document-oriented
static web pages to a dynamic & interactive platform that allows users to create, share & consume content database format.
in a variety of forms, including text, images, audio & video. The web has also given rise to various web-
based technologies such as E-Commerce, social media & online education, which have fundamentally These web technologies are continually evolving and being updated to provide better performance,
transformed the way we work, learn and communicate. security, and user experience.

Overview of Web Technologies :- HTML – Introduction:-

Web technologies refer to the software and tools used to create and maintain websites and web HTML (Hyper Text Markup Language) is a standard markup language used to create web pages and other
applications. These technologies include programming languages, web development frameworks, content online content. It provides a structure for web content by using a system of tags and attributes to describe
management systems, and web servers. the different elements of a page. It is an Scripting Language can be used to create web pages.
At a basic level, HTML consists of a series of tags that are used to define the various elements of a web In HTML, tag and attribute names are case-insensitive. This means that you can use uppercase or lowercase
page, such as headings, paragraphs, links, images, and tables. These tags are enclosed in angle brackets, letters when writing HTML code and the browser will treat them the same way.
and may include attributes that specify additional information about the element.
For example, the following two lines of code are equivalent:
HTML is the foundation of the web and is used in conjunction with other technologies like CSS and
JavaScript to create dynamic, interactive web pages. It is a language that is constantly evolving, with new <p>This is a paragraph.</p>
versions being released periodically.
<P>This is a paragraph.</P>
Learning HTML is a fundamental skill for anyone interested in web development, as it provides the
foundation for creating web pages and understanding how the web works. Similarly, attribute values are generally case-insensitive, although there are some exceptions. For example,
the ‘type’ attribute in an input element is case-sensitive, so’ type="text"’ and’ type="TEXT"’ are not
HTML – Need:- equivalent.

HTML components form the building blocks of all websites. HTML allows images and objects to be imersed It's good practice to be consistent in your use of case when writing HTML code, as it can make your code
and can be used to create interactive forms. It provides a means to create structured documents by more readable and easier to understand. Many developers choose to use lowercase letters for HTML tags
indicating structural explanation for text such as headings, paragraphs, lists, links, quotes, and other items. and attributes, as this is the convention used in most examples and tutorials

HTML, or Hypertext Markup Language, is the standard language used to create web pages. It provides a HTML is not a Case Sensitive Language because, during parsing, all HTML elements are converted to
way to structure content and create semantic meaning in web documents. Here are some of the things you lowercase first. HTML5, the latest version of HTML, which is a new web standard, is also case insensitive.
will need to know to get started with HTML: XHTML, an older version of HTML, was case-sensitive for lowercase letters.

All the HTML elements/tags are case-insensitive. Case-insensitive means the tags/elements which are used in the
Basic syntax: HTML uses tags to structure content. Tags are written using angle brackets and usually come
code are understandable by the browser irrespective of the letters being the upper case or lower case classes.
in pairs, with an opening tag and a closing tag. For example, a paragraph is written as <p>...</p>.
HTML is case-insensitive, meaning that tags and attributes can be written in any combination of uppercase
Elements: HTML elements are made up of tags and the content they contain. Elements can include
and lowercase letters. For example, the <p> tag can be written as <P>, <p>, or even <P>.
headings, paragraphs, images, links, and more.
Case-Insensitivity in HTML 5 is the ability of the browser to recognize HTML tags, attributes, and attribute
Attributes: HTML attributes provide additional information about elements, such as the source of an image
values regardless of their capitalization. This means that the browser will treat "p" and "P" as the same tag,
or the destination of a link.
and "align" and "ALIGN" as the same attribute. This allows developers to write HTML code in a more
Document structure: HTML documents have a standard structure, with a head section that contains flexible way, without having to worry about capitalization.
information about the document and a body section that contains the visible content.
Platform-independency:-
Semantic markup: HTML provides a way to create semantic meaning in web documents, which can
improve accessibility and search engine optimization. For example, using the <nav> tag to indicate a Platform independency means it can run on any kind of platforms or OS. HTML refers to the ability of HTML
navigation menu, or the <article> tag to indicate a standalone piece of content. to be used and rendered on different operating systems and hardware platforms without the need for
modification. HTML is a markup language used to create web pages, and it is designed to be platform-
Learning HTML is a great way to get started with web development. There are many resources available independent.
online, including tutorials, reference guides, and interactive courses.
HTML code can be interpreted by any device that has a web browser installed, regardless of the operating
Case-Insensitivity:- system or hardware platform it is running on. This means that HTML pages can be viewed on different
types of devices, such as desktop computers, laptops, tablets, smartphones, and even smart TVs, as long as
they have a compatible web browser.
Overall, the platform independency of HTML is an essential feature of the language that has made it Headings: <h1> to <h6> There are six levels of headings (h1 to h6) that can be used to define the
possible for web pages to be accessed and viewed on a wide range of devices and platforms, without the importance of a section or sub-section of content.
need for developers to create separate versions of the content for each platform.
Paragraphs: <p> The "p" element is used to define a paragraph of text.
HTML (Hypertext Markup Language) is a markup language used to create web pages and is designed to be
platform-independent. This means that HTML code can be interpreted by any device, regardless of the Lists: <ul> and <ol> HTML supports ordered lists (ol) and unordered lists (ul) for displaying lists of items.
operating system or hardware platform it is running on, as long as there is a web browser installed that can Each item in the list is defined using the "li" element.
read and display HTML content.
Links: <a> The "a" element is used to create links to other pages or resources.
In addition, the separation of content and presentation in HTML helps to ensure that web pages are
accessible to users with different types of devices, such as mobile devices with smaller screens or assistive Images: <img> The "img" element is used to display images on a web page.
technologies for users with disabilities.
Tables: <table> The "table" element is used to create tables with rows and columns. Table cells are
Overall, HTML is a platform-independent technology that has helped to make the World Wide Web defined using the "td" and "th" elements.
accessible to users on a wide range of devices and platforms, and has contributed to the growth and
Forms: <form> The "form" element is used to create forms for user input. Form controls, such as text
evolution of the internet as we know it today.
inputs, radio buttons, and checkboxes, are defined using various input element types.

DOCTYPE Declaration:- Divisions: <div> The "div" element is used to group and organize content within a web page.

The doctype declaration in HTML (Hypertext Markup Language) is a declaration that specifies the version of Span: <span> The “Span” is used to group and apply styles to inline elements.
HTML or XHTML that the web page is using. It is placed at the very beginning of an HTML document, before
the <html> tag, and informs the browser how to interpret the markup in the page. Head: <head> The "head" element contains metadata about the web page, such as the page title and links
to stylesheets and scripts.
The doctype declaration starts with <!DOCTYPE> followed by the document type, such as html, html5,
xhtml, or xhtml5, and an optional public identifier and system identifier. Here is an example of a doctype Body: <body> The "body" element contains the main content of the web page.
declaration for HTML5:
HTML Elements – Attributes:-
<!DOCTYPE html>
In HTML, elements can have attributes that provide additional information about the element or modify its
This doctype declaration is used for HTML5 documents, which is the current version of HTML. It tells the behaviour. In HTML, elements are the building blocks used to structure and display content on a web page.
browser that the page is an HTML5 document and to use the appropriate parsing rules for that version. Each HTML element can have attributes, which are used to provide additional information about the
element or modify its behaviour. Attributes are added to an element's opening tag and are typically written
In summary, the doctype declaration is an important part of an HTML document that specifies the version
as name-value pairs, separated by an equal sign.
of HTML being used and ensures that the document is displayed correctly in different web browsers.
Here are some common attributes that can be used with HTML elements:
Types of Elements:-
id: Specifies a unique identifier for an element. This attribute provides a unique identifier for an HTML
An HTML element is defined by a start tag, some content, and an end tag. element on a web page. It is often used in conjunction with CSS and JavaScript to manipulate the element.

In HTML, there are several types of elements that can be used to structure and display content on a web class: This attribute specifies one or more class names for an HTML element. Classes are used to group
page. Here are some of the most common types of HTML elements: elements together and apply the same styles to all elements in the group. Specifies one or more class
names for an element, which can be used to apply styles to multiple elements at once.
style: Specifies inline styles for an element, which can be used to apply CSS styles directly to an element. Some common metadata elements in HTML include:
This attribute allows you to specify inline styles for an HTML element. Inline styles override any styles
defined in an external stylesheet or internal stylesheet. <title>: This element is used to define the title of the document, which appears in the browser's title bar
and is often used by search engines to help identify the content of the page.
src: This attribute specifies the URL of an external resource, such as an image or a script, that is used by the
element. Specifies the URL of an external resource, such as an image or script. <meta charset="">: This element specifies the character encoding used by the document, which is
important for displaying non-ASCII characters correctly.
href: Specifies the URL of the destination page or resource for a link. This attribute specifies the URL of the
destination page or resource for a link. <meta name="description" content="">: This element provides a brief description of the document, which
can be used by search engines to help identify the content of the page.
alt: This attribute specifies alternative text for an image, which is displayed if the image cannot be loaded.
Specifies alternative text for an image, which is displayed if the image cannot be loaded. <meta name="keywords" content="">: This element provides a comma-separated list of keywords that
are relevant to the document, which can also be used by search engines to help identify the content of the
title: Specifies additional information about an element, which is displayed as a tooltip when the user page.
hovers over the element. This attribute specifies additional information about an element, which is
displayed as a tooltip when the user hovers over the element. Metadata elements are included in the <head> section of an HTML document, and do not appear on the
page itself.
target: This attribute specifies where to open the link when it is clicked, such as in a new window or tab.
Specifies additional information about an element, which is displayed as a tooltip when the user hovers Sectioning Elements:-
over the element.
What is a section in HTML? In HTML, a section is a semantic element for creating standalone sections in a
type: Specifies the type of input control for form elements, such as "text" for a text input or "submit" for a web page. These sections should be made up of related content, like contact information. The section
submit button. This attribute specifies the type of input control for form elements, such as "text" for a text element should only be used if there isn't a more specific element to represent the related content.
input or "submit" for a submit button.
In HTML, sectioning elements are used to define the structure and outline of a document. They are used to
disabled: This attribute disables an input control or button so that it cannot be used. Disables an input create distinct sections of content, and help to provide context and hierarchy to the information on a page.
control or button so that it cannot be used. Some common sectioning elements in HTML include:

• All HTML elements can have attributes <header>: This element is used to define the header of a document or section. It often contains branding, a
• Attributes provide additional information about elements navigation menu, or other introductory content.
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value" <nav>: This element is used to define a section of a document that contains navigation links.

These are just a few of the most commonly used HTML attributes. There are many more attributes <section>: This element is used to define a section of a document that is logically grouped together, such as
available that can be used to modify the behaviour or appearance of HTML elements.
a chapter of a book, an article, or a section of a webpage.
Metadata Element:-
<article>: This element is used to define a self-contained piece of content, such as a blog post, news article,
or product review.
Metadata is data (information) about data. <meta> tags always go inside the <head> element, and are
typically used to specify character set, page description, keywords, author of the document, and viewport
<aside>: This element is used to define content that is related to the main content of the page, but is not
settings. Metadata will not be displayed on the page, but is machine parsable.
an essential part of it, such as a sidebar or a callout box.
456
<footer>: This element is used to define the footer of a document or section. It often contains copyright </head>
information, contact details, or other closing content. <body>

By using sectioning elements in HTML, you can create a clear and structured hierarchy of content, which <div class="myDiv">
can improve the accessibility, usability, and search engine optimization of your website. <h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
Paragraph Element:-
</body>
It is one of the most commonly used HTML tags and is used to structure content on a webpage. The </html>
HTML <p> element defines a paragraph. A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and after a paragraph. List Element:-
<li>: The List Item element. The <li> HTML element is used to represent an item in a list. It must be
<p>This is a paragraph.</p> contained in a parent element: an ordered list ( <ol> ), an unordered list ( <ul> ), or a menu (
<p>This is another paragraph.</p> <menu> ). In menus and unordered lists, list items are usually displayed using bullet points.

Division and Span Elements:- HTML lists allow web developers to group a set of related items in lists.

Span and div are both generic HTML elements that group together related parts of a web page. However, Link Element:-
they serve different functions. A div element is used for block-level organization and styling of page The <link> tag defines the relationship between the current document and an external resource.
elements, whereas a span element is used for inline organization and styling. The <link> tag is most often used to link to external style sheets or to add a favicon to your website.
The <link> element is an empty element, it contains attributes only.
<div>: The Content Division element. The <div> HTML element is the generic container for flow content. It
has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to Link to an external style sheet:
it, or some kind of layout model like Flexbox is applied to its parent element). <head>
<link rel="stylesheet" href="styles.css">
<span>: HTML element is a generic inline container for phrasing content, which does not inherently </head>
represent anything. It can be used to group elements for styling purposes (using the class or id attributes),
or because they share attribute values, such as lang . Character Entities:-

A <span> element which is used to color a part of a text: Character entities are used to display reserved characters in HTML. &#entity_number; To display a
less than sign (<) we must write: &lt; or &#60; Advantage of using an entity name: An entity name is
easy to remember.
<p>My mother has <span style="color:blue">blue</span> eyes.</p>

A <div> section in a document that is styled with CSS: A character entity looks like this:

<html> &entity_name;
<head>
<style> OR
.myDiv {
border: 5px outset red; &#entity_number;
background-color: lightblue;
text-align: center; HTML5 Global Attributes:-
}
</style>
 padding: 8px;

tr:nth-child(even) {

background-color: #dddddd;

</style>

</head>

<body>

<h2>HTML Table</h2>

Creating Table Elements:- <table>

<!DOCTYPE html> <tr>

<html> <th>Company</th>

<head> <th>Contact</th>

<style> <th>Country</th>

table { </tr>

font-family: arial, sans-serif; <tr>

border-collapse: collapse; <td>Alfreds Futterkiste</td>

width: 100%; <td>Maria Anders</td>

} <td>Germany</td>

</tr>

td, th { <tr>

border: 1px solid #dddddd; <td>Centro comercial Moctezuma</td>

text-align: left; <td>Francisco Chang</td>

 <td>Mexico</td>

</tr>

<tr>

<td>Ernst Handel</td>

<td>Roland Mendel</td>

<td>Austria</td>

</tr>

<tr>

<td>Island Trading</td>

<td>Helen Bennett</td> Table Elements : Colspan / Rowspan Attributes:-

<td>UK</td> The rowspan and colspan are the attributes of <td> tag. These are used to specify the number of
rows or columns a cell should merge. The rowspan attribute is for merging rows and the colspan
</tr>
attribute is for merging columns of the table in HTML.
<tr>
To make a cell span over multiple columns, use the colspan attribute:
<td>Laughing Bacchus Winecellars</td>
<!DOCTYPE html>
<td>Yoshi Tannamuri</td>
<html>
<td>Canada</td>
<head>
</tr>
<style>
<tr>
table, th, td {
<td>Magazzini Alimentari Riuniti</td>
border: 1px solid black;
<td>Giovanni Rovelli</td>
border-collapse: collapse;
<td>Italy</td>
}
</tr>
</style>
</table>
</head>
</body>
<body>
</html>
<h2>Cell that spans two columns</h2>
Output of Creating Table Elements:-
 <p>To make a cell span more than one column, use the colspan border-collapse: collapse;
attribute.</p>
}
<table style="width:100%">
</style>
<tr>
</head>
<th colspan="2">Name</th>
<body>
<th>Age</th>
<h2>Cell that spans two rows</h2>
</tr>
<p>To make a cell span more than one row, use the rowspan
<tr> attribute.</p>

<td>Jill</td> <table style="width:100%">

<td>Smith</td> <tr>

<td>43</td> <th>Name</th>

</tr> <td>Jill</td>

<tr> </tr>

<td>Eve</td> <tr>

<td>Jackson</td> <th rowspan="2">Phone</th>

<td>57</td> <td>555-1234</td>

</tr> </tr>

</table> <tr>

</body> <td>555-8745</td>

</html> </tr>

To make a cell span over multiple rows, use the rowspan attribute: </table>

<!DOCTYPE html> </body>

<html> </html>

<head> Border:-
<style> The HTML border attribute is used to set visible border width to most HTML elements within the
body.
table, th, td {

border: 1px solid black;

cellspacing and cellpadding attributes:-

Cell spacing refers to the amount of space that is held between the cells in a table. It is specified
with the cellspacing attribute in the table element. Values are specified in number of pixels.
Increasing the cell spacing results in wider shaded borders between cells.

The cell padding attribute places spacing around data within each cell. The cell spacing attribute
places space around each cell in the table. The second and third examples below show the use of
cell padding or spacing. You can apply both padding and spacing, as in the fourth and fifth
examples.

HTML Table - Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 15px;
} <td>Doe</td>

</style> <td>80</td>

</head> </tr>

<body> </table>

<h2>Cellpadding</h2> <p><strong>Tip:</strong> Try to change the padding to 5px.</p>

<p>Cell padding specifies the space between the cell content and its </body>
borders.</p>
</html>
<table style="width:100%">
HTML Table - Cell Spacing
<tr>
Cell spacing is the space between each cell.
<th>Firstname</th>
By default the space is set to 2 pixels.
<th>Lastname</th>
To change the space between table cells, use the CSS border-spacing property on
<th>Age</th> the table element:

</tr> <!DOCTYPE html>

<tr> <html>

<td>Jill</td> <head>

<td>Smith</td> <style>

<td>50</td> table, th, td {

</tr> border: 1px solid black;

<tr> }

<td>Eve</td> table {

<td>Jackson</td> border-spacing: 30px;

<td>94</td> }

</tr> </style>

<tr> </head>

<td>John</td> <body>
<h2>Cellspacing</h2> </body>

<p>Change the space between the cells with the border-spacing </html>
property.</p>
Creating Form Elements:-
<table style="width:100%">
To create an HTML form, we will use the HTML <form> element. It starts with the <form> tag and
<tr> ends with the </form> tag. We can add the input elements within the form tags for taking user
input. form elements, such as text box, textarea, etc.
<th>Firstname</th>
An HTML form is used to collect user input. The user input is most often sent to a server for
<th>Lastname</th> processing.

<th>Age</th> <!DOCTYPE html>

</tr> <html>

<tr> <body>

<td>Jill</td> <h2>HTML Forms</h2>

<td>Smith</td> <form action="/action_page.php">

<td>50</td> <label for="fname">First name:</label><br>

</tr> <input type="text" id="fname" name="fname" value="John"><br>

<tr> <label for="lname">Last name:</label><br>

<td>Eve</td> <input type="text" id="lname" name="lname" value="Doe"><br><br>

<td>Jackson</td> <input type="submit" value="Submit">

<td>94</td> </form>

</tr> <p>If you click the "Submit" button, the form-data will be sent to a page
called "/action_page.php".</p>
<tr>
</body>
<td>John</td>
</html>
<td>Doe</td>

<td>80</td>

</tr>

</table>
Input Elements – Attributes:- Color Pickers in HTML allow the user to select and input a color. Once submitted, the browser
converts the input color into a string that represents it.
The input required attribute specifies that an input field must be filled out before submitting the
form. The required attribute works with the following input types: text, search, url, tel, email, Refer this link for color picker: https://www.w3schools.com/colors/colors_picker.asp
password, date pickers, number, checkbox, radio, and file.
The <input type="date"> defines a date picker. The resulting value includes the year, month, and
<!DOCTYPE html> day.

<html> Tip: Always add the <label> tag for best accessibility practices!

<body> <!DOCTYPE html>

<h1>The input value attribute</h1> <html>

<p>The value attribute specifies an initial value for an input field:</p> <body>

<form action="/action_page.php"> <h1>Show a Date Control</h1>

<label for="fname">First name:</label><br> <form action="/action_page.php">

<input type="text" id="fname" name="fname" value="John"><br> <label for="birthday">Birthday:</label>

<label for="lname">Last name:</label><br> <input type="date" id="birthday" name="birthday">

<input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit">

<input type="submit" value="Submit"> </form>

</form> <p><strong>Note:</strong> type="date" is not supported in Internet

Explorer 11 or prior Safari 14.1.</p>
</body>
</body>
</html>
</html>

Select and Datalist Elements:-

NOTE:- Please Refer Remaining Attributes from W3schools.com
The <select> element is used to create a drop-down list. The <select> element is most often used in a form,
to collect user input. The name attribute is needed to reference the form data after the form is submitted (if
Color and Date Pickers:- you omit the name attribute, no data from the drop-down list will be submitted).
<!DOCTYPE html> The <datalist> tag specifies a list of pre-defined options for an <input> element. The <datalist> tag
is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list
<html> of pre-defined options as they input data.

<body> <!DOCTYPE html>

<h1>The select element</h1> <html>

<p>The select element is used to create a drop-down list.</p> <body>

<form action="/action_page.php"> <h1>The datalist element</h1>

<label for="cars">Choose a car:</label> <form action="/action_page.php" method="get">

<select name="cars" id="cars"> <label for="browser">Choose your browser from the list:</label>

<option value="volvo">Volvo</option> <input list="browsers" name="browser" id="browser">

<option value="saab">Saab</option> <datalist id="browsers">

<option value="opel">Opel</option> <option value="Edge">

<option value="audi">Audi</option> <option value="Firefox">

</select> <option value="Chrome">

<br><br> <option value="Opera">

<input type="submit" value="Submit"> <option value="Safari">

</form> </datalist>

<p>Click the "Submit" button and the form-data will be sent to <input type="submit">
a page on the
</form>
server called "action_page.php".</p>
<p><strong>Note:</strong> The datalist tag is not supported in Safari
</body> 12.0 (or earlier).</p>

</html> </body>

</html>
Editing Elements:- Why HTML Security:-

You can edit the HTML — tags, attributes, and content — directly in the HTML pane: double-click HTML security consists of three different security measures: HTML encryption to ensure web content
the text you want to edit, change it, and press Enter to see the changes reflected immediately. You cannot be accessed by unauthorized users. The use of digital certificates to validate a domain and ensure
can add any HTML in here: changing the element's tag, changing existing elements, or adding new content is coming from a trusted location (the URL in the browser address bar).
ones.
For More Refer More on Internet.
Kindly Refer This for More: https://www.w3schools.com/html/html_editors.asp
HTML Injection:-
Media:-
HTML Injection also known as Cross Site Scripting. It is a security vulnerability that allows an attacker to
The media attribute specifies what media or device the linked document is optimized for. This inject HTML code into web pages that are viewed by other users.
attribute is used to specify that the target URL is designed for special devices (like iPhone), speech
or print media. This attribute can accept several values. Only used if the href attribute is present.

<!DOCTYPE html>

<html>

<body>

<h1>The a media attribute</h1>

Clickjacking:-
<p>
Clickjacking is an attack that fools users into thinking they are clicking on one thing when they are
<a href="att_a_media.asp?output=print" media="print and actually clicking on another. Its other name, user interface (UI) redressing, better describes what is going
(resolution:300dpi)">Open media attribute page for print</a> on.

</p> To Know More Refer This: https://www.kaspersky.com/resource-center/definitions/clickjacking

</body> Example:-

</html>

Iframe:-

An HTML iframe is used to display a web page within a web page.

Kindly Refer These To Understand More:

https://www.w3schools.com/html/html_iframe.asp

https://www.w3schools.com/tags/tag_iframe.ASP
HTML5 Attributes & Events Vulnerabilities:-

Attributes provide additional information about elements. Attributes are always specified in the start tag.
Attributes usually come in name/value pairs like: name="value".

Refer here: https://www.w3schools.com/html/html_attributes.asp

Refer this for HTML Events: https://www.w3schools.com/tags/ref_eventattributes.asp

It is a security vulnerability that allows an attacker to inject HTML code into web pages that are viewed
by other users. Attackers often inject malicious JavaScript, VBScript, ActiveX, and/or HTML into vulnerable
applications to deceive the user in order to gather data from them. HTML Injection also known as Cross
Site Scripting. It is a security vulnerability that allows an attacker to inject HTML code into web pages that
are viewed by other users.

Local Storage Vulnerabilities:-

As local storage was never intended to be secure, there is no data protection and any JavaScript on the
website can access it. Hackers can exploit the existing XSS vulnerability on the website like the following
screenshot when the user browses to https://set-localstorage.herokuapp.com/xss-injected-page.html.

HTML5 - Cross-browser support:-

Handling cross browser compatibility in HTML5

HTML5 is now compatible with all popular browsers (Chrome, Firefox, Safari, IE9, and Opera) and with
the introduction of DOCTYPE, it is even possible to have a few HTML features in older versions of Internet
Explorer too.

Best Practices For HTML Web Pages:-

Refer This for More: https://www.freecodecamp.org/news/html-best-practices/

THANK YOU
HAPPY LEARNING