HTML INTRO
1. HTML INTRODUCTION:
HTML (Hypertext Markup Language) is the standard language used to create and design web pages and web
applications. An HTML document is composed of several elements that define its structure. It forms the
basic structure of web content, which is then enhanced and modified by other technologies like CSS
(Cascading Style Sheets) and JavaScript.
2. HTML HISTORY:
HTML was created by Sir Tim Berners-Lee in late 1991 but was not officially released. It was published in
1995 as HTML 2.0. HTML 4.01 was published in late 1999 and was a major version of HTML. HTML is a
very evolving markup language and has evolved with various versions updating. Long before its revised
standards and specifications are carried in, each version has allowed its user to create web pages in a much
easier and prettier way and make sites very efficient.
HTML 1.0 was released in 1993 with the intention of sharing information that can be readable and
accessible via web browsers. But not many of the developers were involved in creating websites. So
the language was also not growing.
Then comes HTML 2.0, published in 1995, which contains all the features of HTML 1.0 along with a
few additional features, which remained the standard markup language for designing and creating
websites until January 1997 and refined various core features of HTML.
Then comes HTML 3.0, where Dave Raggett introduced a fresh paper or draft on HTML. It included
improved new features of HTML, giving more powerful characteristics for webmasters in designing
web pages. But these powerful features of the new HTML slowed down the browser in applying
further improvements.
Then comes HTML 4.01, which is widely used and was a successful version of HTML before HTML
5.0, which is currently released and used worldwide. HTML 5 can be said for an extended version of
HTML 4.01, which was published in 2014
3. HTML Features
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It
provides the structure and formatting for web content, making it readable and interactive for users. Here
are some of the key features of HTML:
User-Friendly and Simple
HTML is easy to learn and use. It uses tags to structure content, making it simple for both
humans and browsers to read and interpret the document. Tags also enable the application of CSS
(Cascading Style Sheets) for enhanced visual presentation
Semantic Structure
HTML5 introduced semantic tags that define the purpose of different elements. For example, the
<article> tag is used for content, the <aside> tag for related content, and the <header> and
<footer> tags for the header and footer sections of a document. This semantic structure improves
the readability and accessibility of web pages
SEO (Search Engine Optimization)
HTML5 is optimized for search engines. It uses structured tags like <title>, <meta>, and
<header> to help web crawlers understand the content and keywords of a page. This optimization
enhances the visibility of web pages in search engine results
Client-Side Data Storage
HTML5 introduced local Storage and session Storage for client-side data storage. These features
allow developers to store data on the client side, reducing the need for server requests and
improving performance. Indexed DB extends this capability by allowing the storage of more
complex data
Offline Capabilities
HTML5 supports offline capabilities through Service Workers, Cache API, and IndexedDB.
These features enable web applications to function even when the user's internet connection is
down, providing a native-like experience
4. HTML Versions:
HTML 1.0
The HTML is released by TIM BERNERS-LEE in 1993. HTML 1.0 was the first version of
HTML. It introduced basic structural elements such as headings, paragraphs, lists, and links.
However, it had limited support for layout control and interactivity
Key Features: Basic structure for web pages, with tags like <html>, <head>, <body>, and <a>
for hyperlinks
HTML 2.0
HTML 2.0, released in 1995, standardized HTML by establishing common rules for web
browsers. It introduced forms, tables, and the concept of the World Wide Web Consortium (W3C)
to ensure consistency across browsers
Key Features: Improved support for forms, tables, and image embedding. It standardized many
of the features introduced in HTML 1.0.
HTML 3.0
In 1997, HTML 3.0 was released, bringing support for CSS (Cascading Style Sheets) and
enhanced image handling. It also improved form elements and expanded the character set for
more diverse content presentation.
Key Features: Support for applets, tables, text flow around images, and scripts. This version was
widely adopted and significantly improved the layout and presentation of web content.
HTML 4.0
HTML 4.01, released in 1999, introduced significant advancements such as linking CSS files,
new tags like <fieldset>, <header>, and <footer>, and enhanced table capabilities. It also marked
the beginning of separating content from presentation using CSS
Key Features: Introduced features like CSS support, more powerful scripting capabilities, and
better structure for web pages. HTML 4.01 was a minor revision of HTML 4.0 that fixed some
issues and clarified certain features.
HTML 5.0
HTML5, released in 2014, revolutionized web development with extensive support for new tags
and features. It introduced new form elements, audio and video tags, semantic tags, and
the <section> tag for better content organization. HTML5 also enhanced multimedia support and
provided better compatibility with mobile devices.
Key Features: Major overhaul introducing new elements like <header>, <footer>, <article>, and
<section>. Added support for multimedia (audio and video) through <audio> and <video> tags,
APIs for web applications, the <canvas> element for graphics, and improved form controls.
Emphasized semantics and accessibility.
5. HTML4 Vs HTML5
HTML 4 HTML 5
1. The doctype declaration is complex and 1. The doctype declaration is simplified and shorter
lengthy 2. More semantic elements
2. Limited semantic elements 3. Bulit in audio, video, image support
3. Limited multimedia support 4. Local and Session storage for storing data
4. Limited storage options 5. Buil-In geolocation API
5. No built-In geolocation API 6. CONTRACTION:
6. CONTRACTION: <DOCTYPE html>
<DOCTYPE HTML PUBLIC”-//DTD HTML <html lang=”en”>
4.01//EN” <head>
“[Link] <meta charset=”UTF-8”>
<HTML> <meta name=”viewport>
<HEAD> content=”width=”device-width,inline-scale=”1.0”>
<TITLE>HTML4</TITLE> <title>html document</title>
</HEAD> </head>
<BODY> <body>
-------------- ------------------
--------------- ------------------
</BODY> </body>
</HTML> </html1>
CORE COMPONENTS
1. TAGS & TYPES OF TAGS
DEFINATION OF TAGS
HTML tags are the building blocks of HTML, used to create and structure content on web pages.
Each HTML tag is wrapped in angle brackets ( <>) and usually comes in pairs: an opening tag and
a closing tag, with the content in between.
TYPE OF TAGS
In HTML Tags we have two types of tags they are
[Link] Tags
[Link]-Closing Tags
1. PAIRED TAGS: Paired tags consist of an opening tag and a closing tag. The opening tag
signifies the beginning of an element, and the closing tag marks its end. The content of the
element is placed between these two tags. In Paired Tags again we have two types
[Link] Elements: These tags having meaningful content
[Link]-Semantic Elements: These tags don’t convey specific meaningful content
Ex: :<p>This is a paragraph</p>, <header>, <article>, <footer>, <section>, <div>,<span>
2. SELF-CLOSING TAGS: Self-closing tags, also known as empty elements, represent elements
that do not contain any content. They are defined by a single tag that includes a forward slash
(/) before the closing angle bracket (>).
Ex: <img src="[Link]" alt="Image description">, <video src="[Link]" alt="Image
description">, <audio src="audio.mp3" alt="Image description">
2. ATTRIBUTES & TYPES OF ATTRIBUTES
DEFINATION OF ATTRIBUTES
HTML attributes are used to provide additional information about an elements. They are written
within the opening tag of an element and consist of a name and a value, separated by equal sign
and enclosed by quoted on marks. Before equal sign have a attribute name and after sign we have
a attribute value in doble quotation marks.
STRUCTRE:<element attributename=”attributevalue”>----</element>
TYPES OF ATTRIBUTES
We have two types of attributes they are
[Link] Attributes
[Link] Specific Attributes
[Link] Attributes: Global attributes are applied for any elements of the html. The global
attributes are provided general information about an element. Global attribute are used to
customize the behaviour and appearance of elements
Ex: Style attribute( <element style attribute>data</element>
<h1 style=”colour: blue”>heading1</h>
[Link] Specific Attributes: Element specific attributes are applicable only on certain HTML
elements. Element specific attributes are provides specific information to the elements.
Ex:<img src=”#”alt=”img description”/>
3. ELEMENTS & TYPES OF ELEMENTS
DEFINATION OF ELEMENTS
An HTML element is a component of an HTML document that represents a part of the web page.
It is defined by a start tag, optional content, and an end tag.
TYPES OF ELEMENTS
We have three type of elements they are
[Link] Level Elements
[Link] Elements
[Link] Elements
[Link] Level Elements: Block-level elements in HTML start on a new line and take up the full
width of the page. They are used to organize the layout of a web page and often contain other
elements.
Ex:
1<div>: A generic container for flow content, which has no specific meaning but can be used
to group other elements for styling or scripting purposes.
2.<p>: Defines a paragraph.
3.<h1> to <h6>: Define headings, with <h1> being the highest level and <h6> the lowest.
4.<ul>: Defines an unordered list.
5.<ol>: Defines an ordered list.
6.<li>: Defines a list item. Although <li> is technically part of <ul> or <ol>, it behaves as a
block-level element within those contexts.
7.<table>: Defines a table.
8.<tr>: Defines a table row.
9.<th>: Defines a table header cell.
10.<td>: Defines a table data cell.
11.<header>: Represents introductory content, typically a group of introductory or navigational
aids.
12.<footer>: Represents a footer for its nearest sectioning content or sectioning root element.
13.<section>: Defines a section in a document.
14.<article>: Represents a self-contained composition in a document, page, or site.
15.<aside>: Represents a portion of a document whose content is only indirectly related to the
document's main content.
16.<nav>: Represents a section of a page that links to other pages or to parts within the page.
17.<main>: Represents the dominant content of the <body> of a document.
[Link] ELEMENTS: Inline elements in HTML are elements that do not start on a new line
and only take up as much width as necessary. They are typically used to format small pieces of
content within a block-level element without disrupting the flow of the content. Here are some
common inline elements
EX:
1.<span>: A generic container for inline content, used to apply styles or scripts.
2.<a>: Creates a hyperlink to another page or resource.
3.<strong>: Makes text bold and semantically strong.
4.<em>: Italicizes text and gives it semantic emphasis.
5.<img>: Embeds an image in the document.
6.<input>: Defines an input control within a form.
7.<label>: Associates a label with a form element.
8.<br>: Inserts a line break.
9.<i>: Italicizes text.
10.<b>: Makes text bold.
11.<small>: Decreases the text size.
12.<sub>: Defines subscript text.
13.<sup>: Defines superscript text.
3. VOID ELEMENTS: All Self Closing or Inline Elements are Void Elements.
TAGS CATEGORY
1. HEADING TAGS: HTML heading tags are used to define headings on a web page. They are
important for both the structure and readability of the content, as well as for SEO (Search Engine
Optimization). There are six levels of heading tags, from <h1> to <h6>, with <h1> being the highest
level and most important, and <h6> being the least important.
<h1>: This tag defines the main heading of the page. It's usually the largest and most important
heading.
<h2>: This tag defines a second-level heading, used for subheadings under the main heading.
<h3>: This tag defines a third-level heading, used for subheadings under <h2> headings.
<h4>: This tag defines a fourth-level heading, used for subheadings under <h3> headings.
<h5>: This tag defines a fifth-level heading, used for subheadings under <h4> headings
<h6>: This tag defines a sixth-level heading, used for the least important subheadings.
2. PARAGRAPH & PRE-TAGS
The <p> and <pre> tags in HTML are used to format text in different ways. Here are simple definitions
and examples for each:
<p> Tag (Paragraph)
The <p> tag is used to define a paragraph of text. It is a block-level element that adds vertical space
before and after the content, creating a visually distinct paragraph.
Example:
html
<p>This is a paragraph of text. Paragraphs are used to separate blocks of text and improve
readability.</p>
<pre> Tag (Preformatted Text)
The <pre> tag is used to display preformatted text. It preserves both spaces and line breaks, displaying
the text exactly as it is written in the HTML code. It is often used for displaying code or text where the
exact formatting is important.
Example:
html
<pre>
This is preformatted text.
It preserves spaces and
line breaks.
</pre>
In summary:
<p>: Defines a paragraph of text.
<pre>: Displays preformatted text, preserving spaces and line breaks.
3. FORMATTING TAGS
HTML formatting tags are used to apply specific styles to text, such as making it bold, italic, underlined,
etc. Here are some of the most commonly used formatting tags:
Common Formatting Tags
<b>: Makes text bold.
html
<b>This text is bold.</b>
<strong>: Makes text bold and semantically strong.
html
<strong>This text is strong.</strong>
<i>: Italicizes text.
html
<i>This text is italic.</i>
<em>: Italicizes text and gives it semantic emphasis.
html
<em>This text is emphasized.</em>
<u>: Underlines text.
html
<u>This text is underlined.</u>
<small>: Reduces the text size.
html
<small>This text is smaller.</small>
<mark>: Highlights text.
html
<mark>This text is highlighted.</mark>
<del>: Displays text with a strikethrough (deleted text).
html
<del>This text is deleted.</del>
<ins>: Displays text as inserted (underlined).
html
<ins>This text is inserted.</ins>
<sub>: Displays text as subscript.
html
H<sub>2</sub>O
<sup>: Displays text as superscript.
html
E = mc<sup>2</sup>
<code>: Displays text in a monospace font, typically used for code snippets.
html
<code>[Link]('Hello, world!');</code>
LISTS & TABLES
LISTS:
Lists in HTML are used to group related items together and can be either ordered or unordered. Here are the
different types of lists you can create in HTML:
UNORDERED LIST
An unordered list is a collection of items that do not have any specific order. Each item in an unordered
list is marked with a bullet point.
Example
html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
ORDERED LIST
An ordered list is a collection of items that are presented in a specific order. Each item in an ordered list
is marked with a number or letter.
Example
html
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
DESCRIPTION LIST
A description list is used to define terms and their descriptions. Each term is defined using the <dt> tag,
and each description is defined using the <dd> tag.
Example
html
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
NESTED LISTS
You can also create nested lists, which are lists within lists.
Example
html
<ul>
<li>Item 1
<ul>
<li>Subitem 1.1</li>
<li>Subitem 1.2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
Example of All List Types Together
html
<!DOCTYPE html>
<html>
<head>
<title>Lists Example</title>
</head>
<body>
<h1>HTML Lists</h1>
<h2>Unordered List</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Description List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
<h2>Nested List</h2>
<ul>
<li>Item 1
<ul>
<li>Subitem 1.1</li>
<li>Subitem 1.2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</body>
</html>
TABLES
TABLES IN HTML
Tables in HTML are used to organize and display data in a tabular format. They are particularly useful
for presenting structured information such as schedules, statistics, or any type of data that needs to be
presented in rows and columns. Here are the basic elements and attributes used to create tables in
HTML:
Basic Table Elements
<table>: This element defines the table itself.
<tr>: Table row, used to create a row in the table.
<th>: Table header, used to define a header cell in the table, typically shown in bold.
<td>: Table data cell, used to define a standard cell in the table.
Example of a Simple Table
html
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Table</title>
</head>
<body>
<h1>HTML Table Example</h1>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
</body>
</html>
Table Attributes
border: Specifies the width of the border around the table and its cells.
cellpadding: Specifies the space between the cell wall and the cell content.
cellspacing: Specifies the space between cells.
width: Specifies the width of the table.
MULTIMEDIA
HTML provides various elements to embed multimedia content like images, audio, and video
directly into web pages. Here are some common multimedia elements and how to use them:
IMAGES (<IMG>)
The <img> tag is used to embed images in an HTML document.
Example:
html
<img src="[Link]" alt="Description of image" width="300" height="200">
src: Specifies the path to the image file.
alt: Provides alternative text if the image cannot be displayed.
width and height: Define the dimensions of the image.
AUDIO (<AUDIO>)
The <audio> tag is used to embed audio files.
Example:
html
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
controls: Adds audio controls like play, pause, and volume.
source: Specifies the path to the audio file and its type.
Fallback content: Provides a message for browsers that do not support the <audio> tag.
VIDEO (<VIDEO>)
The <video> tag is used to embed video files.
Example:
html
<video controls width="600">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
controls: Adds video controls like play, pause, and volume.
width: Specifies the width of the video player.
source: Specifies the path to the video file and its type.
Fallback content: Provides a message for browsers that do not support the <video> tag.
EMBEDDING YOUTUBE VIDEOS
You can also embed YouTube videos using the <iframe> tag.
Example:
html
<iframe width="560" height="315" src="[Link]
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
src: Specifies the URL of the YouTube video.
allowfullscreen: Allows the video to be played in fullscreen mode.
frameborder: Specifies whether or not to display a border around the iframe.
Example with All Multimedia Elements
Here's an example demonstrating the use of images, audio, and video in an HTML document:
html
<!DOCTYPE html>
<html>
<head>
<title>Multimedia HTML Example</title>
</head>
<body>
<h1>Embedding Multimedia in HTML</h1>
<h2>Image</h2>
<img src="[Link]" alt="Beautiful landscape" width="300" height="200">
<h2>Audio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<h2>Video</h2>
<video controls width="600">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<h2>YouTube Video</h2>
<iframe width="560" height="315" src="[Link]
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</body>
</html>
FORMS
1. TYPES OF FORMS
Forms in HTML are used to collect user input. They can come in various types, depending on the kind of
data you want to gather. Here are some common types of form elements:
Text Input:<input type="text">: A single-line text input field.
Ex:<input type="text" name="username" placeholder="Enter your username">
Password Input:<input type="password">: A single-line text input field where the characters are
masked.
Ex:<input type="password" name="password" placeholder="Enter your password">
Email Input:<input type="email">: A single-line text input field for email addresses.
Ex:<input type="email" name="email" placeholder="Enter your email">
Number Input:<input type="number">: A single-line text input field for numbers.
Ex:<input type="number" name="age" min="1" max="100">
Date Input:<input type="date">: A single-line text input field for dates.
Ex:<input type="date" name="birthday">
Radio Buttons:<input type="radio">: Used to select one option from a group of choices.
Ex:<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Checkboxes:<input type="checkbox">: Used to select multiple options from a set of choices.
Ex:<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="travelling"> Travelling
Submit Button:<input type="submit">: A button to submit the form data.
Ex:<input type="submit" value="Submit">
Reset Button:<input type="reset">: A button to reset the form data to its initial values.
Ex:<input type="reset" value="Reset">
File Input:<input type="file">: A single-line text input field to select files.
Ex:<input type="file" name="file">
Dropdown List(Select):<select>: A dropdown list to select one or multiple options.
<select name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
Text Area:<textarea>: A multi-line text input field.
Ex:<textarea name="comments" rows="4" cols="50"></textarea>
2. HTML4 VS HTML5 FORMS
HTML5 brought many improvements and new features to forms compared to HTML4. Here's a
comparison highlighting the key differences:
HTML4
Basic Input Types: HTML4 includes basic input types like text, password, checkbox, radio,
submit, reset, file, hidden, image, and button.
Form Validation: HTML4 lacks built-in form validation, requiring JavaScript to handle form
validation.
Placeholder Text: HTML4 does not support the placeholder attribute for input elements.
Date and Time Input: HTML4 does not provide specific input types for dates, times, and numbers.
Autocomplete: Limited support for the autocomplete attribute, which helps users fill out forms
more quickly.
HTML5
Enhanced Input Types: HTML5 introduces new input types such as email, url, number, range,
tel, date, time, datetime-local, month, week, and color. These new input types provide better
user experience and data validation
Built-In Form Validation: HTML5 provides built-in form validation. You can use attributes like
required, pattern, min, max, step, and maxlength to enforce input rules without needing
JavaScript.
Placeholder Attribute: HTML5 supports the placeholder attribute, which provides a short hint
that describes the expected value of an input field.
Autocomplete: HTML5 has better support for the autocomplete attribute, helping users to fill out
forms more quickly.
Datalist Element: HTML5 introduces the <datalist> element, which provides an autocomplete
feature for input fields
New Form Attributes: HTML5 adds new form attributes such as novalidate to disable form
validation, and formaction, formenctype, formmethod, formnovalidate, and formtarget for
customizing form submission
HTML 5 FEATURES
HTML5 introduced new semantic and non-semantic tags that enhance the structure and meaning of web
content. Here's a breakdown of both types of tags:
SEMANTIC TAGS
Semantic tags clearly describe their meaning in a human- and machine-readable way. These tags help
improve the structure, accessibility, and SEO of web documents.
<header>: Represents introductory content, typically a group of introductory or navigational aids.
<header>
Ex:<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<footer>: Represents a footer for its nearest sectioning content or sectioning root element.
Ex:<footer>
<p>© 2024 My Website</p>
</footer>
<article>: Represents a self-contained composition in a document, page, or site.
Ex:<article>
<h2>Article Title</h2>
<p>This is an article.</p>
</article>
<section>: Defines a section in a document.
Ex:<section>
<h2>Section Title</h2>
<p>This is a section.</p>
</section>
<av>: Represents a section of a page that links to other pages or to parts within the page.
Ex:<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<aside>: Represents a portion of a document whose content is only indirectly related to the
document's main content.
Ex:<aside>
<h3>Related Information</h3>
<p>This is an aside.</p>
</aside>
<main>: Represents the dominant content of the <body> of a document.
Ex:<main>
<h1>Main Content</h1>
<p>This is the main content of the page.</p>
</main>
<figure>: Specifies self-contained content, like illustrations or diagrams.
Ex:<figure>
<img src="[Link]" alt="Description of image">
<figcaption>Figure Caption</figcaption>
</figure>
<figcaption>: Defines a caption for a <figure> element.
Ex:<figcaption>Figure Caption</figcaption>
NON-SEMANTIC TAGS
Non-semantic tags do not provide any information about the content they contain. They are used
primarily for styling and scripting.
<div>: Defines a division or section in an HTML document, used for styling or layout purposes.
Ex:<div class="container">
<h2>Content within a div</h2>
<p>This is a paragraph.</p>
</div>
<span>: An inline container for text or other elements, used for styling or adding attributes.
Ex:<p>This is a <span class="highlight">highlighted text</span> in a paragr