Scribd
Upload
28 views29 pages

HTML Notes 2025

The document provides a comprehensive overview of HTML5, detailing its new semantic elements, form features, and basic document structure. It explains how to modify webpage backgrounds using CSS, the importance of metadata, and the usage of new HTML5 elements for better content organization. Additionally, it covers text formatting, alignment, and various inline styles, enhancing the understanding of web design principles.

Uploaded by

blackheart246664
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
28 views29 pages

HTML Notes 2025

The document provides a comprehensive overview of HTML5, detailing its new semantic elements, form features, and basic document structure. It explains how to modify webpage backgrounds using CSS, the importance of metadata, and the usage of new HTML5 elements for better content organization. Additionally, it covers text formatting, alignment, and various inline styles, enhancing the understanding of web design principles.

Uploaded by

blackheart246664
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/ 29

HTML Notes

Introduction to HTML5
• New structure: HTML5 introduced semantic elements like <header>, <footer>,
<article>, <section>, <aside>, and <nav> that help define the structure of a webpage
more meaningfully.
• New form elements & attributes: New input types (email, url, date, number, range,
search, etc.), attributes (required, placeholder, pattern, autofocus), and elements
like <datalist>, <output>, and <progress>.
• Browser support: Modern browsers (Chrome, Edge, Firefox, Safari) support most
HTML5 features, but some legacy support issues remain in older browsers.
• Basic structure of an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Example</title>
</head>
<body>
<h1>Hello, HTML5!</h1>
</body>
</html>

The basic structure of an HTML document defines how a web page is organized, starting with a
document type declaration and then dividing the content into a head (metadata) and a body (visible
content). Let’s break down your example step by step:

html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>HTML5 Example</title>
</head>

<body>

<h1>Hello, HTML5!</h1>

</body>

</html>

Explanation of Each Part

<!DOCTYPE html>

Declares that this file is an HTML5 document . It tells the browser to interpret the code using HTML5
standards.

<html lang="en"> ... </html>

The root element of the HTML document. The `lang="en"` attribute indicates that the language of the
page is English.

<head> ... </head>

Contains metadata about the document, which is not directly visible on the webpage. This includes
the title, character set, styles, scripts, and SEO-related metadata.

<meta charset="UTF-8">

Defines the character encoding (UTF-8) so all characters, including special symbols and languages,
display correctly.

<title>HTML5 Example</title>

Sets the title of the page, which appears in the browser tab and when bookmarking the page.
<body> ... </body>

Contains the content that is displayed in the browser window . All headings, paragraphs, images, lists,
and other visible elements are placed here.

<h1>Hello, HTML5!</h1>

A heading level 1 , usually the largest heading, often used for the page title or primary heading.

Modifying Background of Webpage


• Background color:

<body style="background-color: lightblue;">

• Background image:

<body style="background-image: url('bg.jpg');">

Background Color
• The background color of an element is controlled using the CSS property background-
color.
• When applied to the <body> element, it sets the color behind all the page content.
• Syntax:

<body style="background-color: lightblue;">

• The value of background-color can be specified in different formats:


o Named colors: red, blue, lightblue, etc.
o Hexadecimal codes: #00ff00, #abc, #ff5733
o RGB: rgb(255,0,0) for red or rgba(255, 0, 0, 0.5) for semi-transparent
o HSL: hsl(120, 100%, 50%)
• Example usage:

<body style="background-color: lightblue;">


<h1>Welcome</h1>
</body>

• The chosen color fills the entire background of the browser viewport behind all content.
• background-color applies to any HTML element and affects the background area
including padding but not margins.
• You can also set it using internal or external CSS for better organization.

Background Image
• The background image is set using the CSS property background-image.
• It loads an image file and displays it as the background of an element, often the page
(<body>) for a full-page effect.
• Syntax:

<body style="background-image: url('bg.jpg');">

• The URL can be a relative path like 'bg.jpg' or an absolute URL.


• By default, the background image is repeated (tiled) to fill the area unless specified
otherwise.
• Additional related properties control appearance:
o background-repeat (e.g., no-repeat)
o background-size (e.g., cover to scale image to cover the entire background)
o background-position (e.g., center center to position image)
• Example with no repeat and full cover:

<body style="background-image: url('bg.jpg'); background-repeat: no-repeat; background-size: cover;">


<h1>Welcome with Image Background</h1>
</body>

• The background color is still visible behind the image if the image has transparency or
does not fully cover.
• Using background images can enhance visual appeal but should be optimized for fast
loading.

Summary of Differences
Feature Background Color Background Image
Property background-color background-image
Value examples Color names, HEX, RGB, URL to image file
HSL
Usage scope Fills entire element Displays image as background
background with color
Transparency Supports opacity in Image may have transparent areas
RGBA/HSL
Layout controls Not applicable background-repeat, background-
size, background-position
Performance Minimal Image size impacts page load speed
concerns

Metadata in HTML
• Specifying metadata with <meta> tags inside <head> (author, description, viewport).

<meta name="description" content="HTML5 basics">


<meta name="author" content="John Doe">

Meta tags in the <head> section of an HTML document provide critical metadata that helps
browsers, search engines, and other services understand the web page. Here’s a detailed
explanation of common meta tags for author, description, and viewport:

Meta Description
• <meta name="description" content="HTML5 basics">
o Purpose: Gives a concise summary of the webpage’s content, usually shown in
search engine results below the page title.
o Usage: Helps improve SEO ranking and attract more visitors by summarizing
what the page is about in 160 characters or less.
o Best Practices:
▪ Focus on what users will learn or the service provided.
▪ Use relevant keywords.
▪ Make the description clear and engaging, reflecting the actual content of
the page.

Meta Author
• <meta name="author" content="John Doe">
o Purpose: Specifies the name of the person or company who authored the
webpage.
o Usage: Offers credit to the creator and helps identify the document’s source in
browser and search settings.
o Best Practices:
▪ Use the full name or organization name.
▪ Clearly credit the main creator or content owner.
▪ Useful for collaboration, copyright, and content management.
Meta Viewport
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
o Purpose: Controls the layout and scaling of the page on different devices,
especially for mobile responsiveness.
o Attributes:
▪ width=device-width: Page width matches the device’s screen width.
▪ initial-scale=1.0: Sets the initial zoom level when loaded.
o Usage: Enhances accessibility and user experience on smartphones, tablets, and
desktops.
o Best Practices:
▪ Include in all HTML pages to ensure mobile compatibility.
▪ Adjust initial-scale or other values as needed for specific layouts.

Example: Combined Usage


<head>
<meta name="description" content="Learn HTML5 basics, new elements, and web design techniques.">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

• This setup informs search engines about your page, credits the author, and ensures the
page is mobile-friendly.

New HTML5 Elements


• Markup elements: Using <section>, <article>, <header>, <footer>, <aside>,
<nav>.
• Example:

<article> <h2>News</h2>

<p>This is a news article.</p>


</article>
Here is an in-depth explanation of the HTML5 markup structural elements <section>,
<article>, <header>, <footer>, <aside>, and <nav> and how they are used to organize web
content semantically:

Header <header>
• Represents the introductory content or a group of navigational aids for a section or the
whole page.
• Usually contains site or page titles, logos, or introductory headings (<h1>–<h6>) and
sometimes navigation menus.
• Can be used multiple times on a page (e.g., for page header and article header).
• Provides semantic meaning that this block is a heading or intro area, better than a generic
<div>.
• Example:

<header>
<h1>Website Title</h1>
<nav> ... </nav>
</header>

Footer <footer>
• Defines the footer for a page or section, usually containing copyright, contact info, or
legal links.
• Like <header>, can be used multiple times for different areas (e.g., page footer, article
footer).
• Helps screen readers and search engines identify the end or supplementary information of
content.
• Example:

<footer>
<p> 2025 Company Name</p>
<a href="contact.html">Contact Us</a>
</footer>
Navigation <nav>
• Used exclusively for sections of navigation links, such as menus or table of contents.
• Helps assistive technologies and search engines recognize navigation areas distinctly.
• Typically contains lists of links (<ul>, <ol>) pointing to other pages or sections.
• Example:

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>

Section <section>
• Represents a thematic grouping of content within a page, usually with a heading, related
by a common theme.
• A section is a dependent part of the document but denotes a distinct block of related
content.
• Useful for breaking content into logical blocks or chapters.
• Example:

<section>
<h2>About Us</h2>
<p>Information about the company.</p>
</section>

Article <article>
• Represents independent, self-contained content that could stand alone or be syndicated
(e.g., news articles, blog posts, comments).
• Each <article> should be meaningful on its own without external context.
• Can be nested inside sections.
• Example:

<article>
<h2>Breaking News</h2>
<p>Latest news story content here.</p>
</article>
Aside <aside>
• Represents content tangentially related to the main content, often sidebars, pull quotes,
or advertising.
• Provides supplementary information or navigation that is related but separate from the
main content flow.
• Can be placed within sections or outside, depending on context.
• Example:

<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Other article</a></li>
</ul>
</aside>

Summary Table:
Element Purpose Typical Content
<header> Introductory content of page/section Headings, logo, navigational aids
<footer> Footer content for page/section Copyright, legal info, contact links
<nav> Navigation links section Menus, table of contents
<section> Thematic grouping of related content Chapters, sections with a heading
<article> Independent, self-contained content News stories, blog posts, comments
<aside> Related but secondary content Sidebars, ads, related links

These semantic elements improve the accessibility, SEO, and maintainability of web pages by
clearly defining the roles of page sections rather than relying on generic container elements like
<div>.
Working with Text
• Plain text: Direct text in <body>.
• New line: <br>.

• Headings: <h1> to <h6>.


• Paragraphs: <p>.
• Horizontal rule: <hr>.
• Subscript & Superscript: <sub>, <sup>.
• Text alignment:

<p style="text-align:center;">Centered text</p>

• Text formatting (inline styles): <b>, <i>, <u>, <mark>, <strong>.


• Grouping text: <div> (block) and <span> (inline).
• Quotations: <blockquote> (long) and <q> (short inline).
• Character entities: &lt; (<), &gt; (>), &amp; (&), &copy; (©).
• Comments: <!-- This is a comment -->.

Plain Text
• Any direct text placed inside the <body> element appears as normal text on the webpage.
• Example:

<body>
This is plain text displayed on the page.
</body>

New Line: <br>


• Inserts a line break without starting a new paragraph.
• Useful for single line breaks within text.
• Example:

<p>This is line one.<br>This is line two.</p>


Headings: <h1> to <h6>
• Define headings, with <h1> being the highest (largest) level and <h6> the lowest.
• Search engines and screen readers pay special attention to these.
• Example:

<h1>Main Title</h1>
<h2>Sub-section</h2>

Paragraphs: <p>
• Defines a block of text as a paragraph.
• Browsers add space above and below paragraphs by default.
• Example:

<p>This is a paragraph of text on the page.</p>

Horizontal Rule: <hr>


• Inserts a thematic break or horizontal line, visually separating content.
• Example:

<hr>

Subscript & Superscript: <sub>, <sup>


• <sub>displays text slightly below the baseline (used in chemical formulas).
• <sup>displays text slightly above the baseline (used in exponents).
• Examples:

H<sub>2</sub>O <!-- Water molecule -->


E = mc<sup>2</sup> <!-- Einstein's formula -->

Text Alignment
• Use the style attribute with text-align CSS property to align text.
• Values: left, center, right, justify.
• Example:

<p style="text-align:center;">Centered text</p>


Text Formatting (Inline Styles)
• <b> - Bold text without extra importance.
• <strong> - Important text, typically bold, with semantic meaning.
• <i> - Italic text without emphasis.
• <em> - Emphasized text with semantic importance.
• <u> - Underlined text (usually decorative).
• <mark> - Highlighted text.
• Examples:

<p><b>Bold</b> and <strong>strong</strong> text.</p>


<p><i>Italic</i> and <em>emphasized</em> text.</p>
<p><u>Underlined</u> and <mark>highlighted</mark> text.</p>

Grouping Text: <div> and <span>


• <div> - Block-level element used to group large blocks of content.
• <span> - Inline element used to group small portions within text for styling.
• Examples:

<div style="background-color: lightgrey;">


<p>This is a grouped block of text inside a div.</p>
</div>

<p>This is a <span style="color: red;">red colored</span> word.</p>

Quotations
• <blockquote> - For long, block-level quotations, usually indented by browsers.
• <q> - For short inline quotes, usually wrapped in quotation marks automatically.
• Examples:

<blockquote>
This is a long block quotation that is visually set apart from the rest of the content.
</blockquote>

<p>He said, <q>This is an inline quote.</q></p>

Character Entities
• Used to display reserved characters and symbols in HTML.
• Common examples:
o &lt; for <
o &gt; for >
o &amp; for &
o &copy; for ©
• Example:

&lt;div&gt;This is a div&lt;/div&gt;
Copyright &copy; 2025

Comments
• Comments are not displayed on the webpage but are visible in the HTML source code.
• Syntax:

<!-- This is a comment -->

• Useful for notes or disabling code without deleting it.

Summary Example Putting It All Together


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Elements Example</title>
</head>
<body>

Plain text paragraph.

New line using <br> tag:<br>


Line one.<br>
Line two.

<h1>Main Heading</h1>
<h2>Subheading</h2>

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

Water formula: H<sub>2</sub>O <br>


Einstein's equation: E = mc<sup>2</sup>

<p style="text-align:center;">Centered text example</p>

<p><b>Bold</b>, <strong>Strong</strong>, <i>Italic</i>, <em>Emphasized</em>, <u>Underline</u>,


<mark>Highlight</mark></p>
<div style="background-color: lightgrey; padding: 10px;">
This text is inside a div block container.
</div>

<p>Inline <span style="color: red;">colored span</span> example</p>

<blockquote>This is a block quotation with multiple lines.</blockquote>


<p>Inline quote example: <q>To be or not to be</q></p>

Display reserved character: &lt; &gt; &amp; &copy;

<!-- This is an HTML comment -->

</body>
</html>

Hyperlinks
• Basic hyperlink: <a href="page.html">Click here</a>.
• Hyperlink colors with CSS:

css
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }

• Linking within page: Use id and #.

<a href="#section1">Jump to Section 1</a>


<h2 id="section1">Section 1</h2>

Here is a detailed explanation of HTML hyperlinks including basic hyperlinks, hyperlink colors
with CSS, and linking within the same page with examples.

Basic Hyperlink
• Created using the <a> (anchor) tag with an href attribute that specifies the URL or target.
• The clickable part is the tag’s inner text or nested content.
• Example:

<a href="page.html">Click here</a>


This creates a link labeled "Click here" that navigates to "page.html" when clicked.

Hyperlink Colors with CSS


• By default, browsers apply different colors to links based on their state:
o a:link — unvisited links, typically blue.
o a:visited — visited links, typically purple.
o a:hover — links when hovered by mouse, often red or another color.
• These colors can be styled with CSS to customize appearance.
• Example:

a:link { color: blue; }


a:visited { color: purple; }
a:hover { color: red; }

This CSS will style links as blue when unvisited, purple when visited, and red on hover.

Linking within the Same Page (Anchor Links)


• To jump to a specific section on the page, assign an id attribute to the target element.
• Use href="#id" in the link to navigate to that element.
• Example:

<a href="#section1">Jump to Section 1</a>

<h2 id="section1">Section 1</h2>


<p>This is the content of section 1.</p>

• Clicking "Jump to Section 1" scrolls the viewport to the heading with id="section1".

Full Example Putting It All Together


<!DOCTYPE html>
<html lang="en">
<head>
<style>
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
</style>
<title>Hyperlink Example</title>
</head>
<body>

<p><a href="page.html">Click here to visit another page</a></p>

<p><a href="#section1">Jump to Section 1 below</a></p>

<h2 id="section1">Section 1</h2>


<p>This is the content in section 1.</p>

</body>
</html>

In this example:

• The first link navigates to another page called "page.html".


• The second link jumps to the section headed "Section 1" on the same page.
• Link colors change according to the user interactions due to CSS rules.

Lists
• Unordered list:

<ul><li>Item 1</li><li>Item 2</li></ul>

• Ordered list:

<ol><li>Step 1</li><li>Step 2</li></ol>

• Definition list:

<dl><dt>HTML</dt><dd>HyperText Markup Language</dd></dl>

• Nested lists: A list inside another <li>.


Unordered List (<ul>)
• Represents a list where the order of items doesn't matter.
• Items are marked with bullets (default is a filled circle).
• Each item is wrapped in <li> tags.
• Example:

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

• Different bullet styles can be applied using CSS list-style-type property: disc
(default), circle, square, or none.

Ordered List (<ol>)


• Represents a list where the order of items does matter.
• Items are numbered by default.
• Each item is wrapped in <li> tags.
• Example:

<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>

• You can change numbering style using attributes or CSS (e.g., numbers, letters, Roman
numerals).

Definition List (<dl>)


• Used for a list of terms and their definitions or descriptions.
• Each term is within a <dt> (definition term) tag.
• Each description is within a <dd> (definition description) tag.
• Example:

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Nested Lists
• Lists can be nested inside other lists by placing a <ul>, <ol>, or <dl> inside an <li>.
• This allows creation of sublists or hierarchical lists.
• Example of nested unordered list inside another unordered list:

<ul>
<li>Item 1
<ul>
<li>Sub-item 1a</li>
<li>Sub-item 1b</li>
</ul>
</li>
<li>Item 2</li>
</ul>

• Example of nesting ordered list inside unordered list:

<ul>
<li>Item 1
<ol>
<li>First sub-step</li>
<li>Second sub-step</li>
</ol>
</li>
<li>Item 2</li>
</ul>

Summary Table
List Type Tag Description Use Case Example
Unordered <ul> Bulleted list, unordered Grocery list, features list
List items
Ordered List <ol> Numbered list, ordered Step-by-step instructions
items
Definition <dl> List of terms and Glossaries, FAQs
List descriptions
Nested Lists Nested inside Sublists inside main lists Multi-level menus, detailed
<li> sublists
Tables
• Basic table: <table><tr><td>Cell</td></tr></table>.
• Caption: <caption>Table Title</caption>.
• Table heading: <th>.
• Borders: border="1" or CSS.
• Alignment: align, text-align, or CSS.
• Background color: style="background-color: yellow".
• Cell padding/spacing: cellpadding and cellspacing attributes or CSS.
• Nested tables: A table inside a <td>.

Here is an in-depth explanation of HTML tables, covering basic structure, captions, headers,
borders, alignment, background colors, cell padding/spacing, and nested tables with examples:

Basic Table Structure


• Table is created using the <table> element.
• Rows are defined with <tr> (table row).
• Cells inside rows are of two types:
o <th> for header cells (usually bold and centered).
o <td> for normal data cells.
• Example:

<table>
<tr>
<td>Cell</td>
</tr>
</table>

Caption
• <caption> element provides a title or description for the table.
• It should be placed immediately after <table> opening tag.
• Example:

<table>
<caption>Table Title</caption>
<tr><td>Cell 1</td></tr>
</table>
Table Heading (<th>)
• Header cells are used to define headings for columns or rows.
• Rendered in bold and centered by default.
• Can span multiple columns or rows using colspan and rowspan attributes.
• Example:

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

Borders
• Old-style border can be added using the border="1" attribute on <table>.
• Modern practice is to use CSS:

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Alignment
• Align table or content inside via:
o Deprecated align attribute on <table>, <tr>, <td>.
o Preferred CSS properties like text-align (for text) and margin or float (for
table alignment).
• Example of center-align text inside cells:

<td style="text-align: center;">Centered Cell</td>


Background Color
• Add background color using inline style or CSS.
• Example:

<table style="background-color: yellow;">


<tr><td>Yellow background</td></tr>
</table>

• You can also style individual cells similarly.

Cell Padding and Spacing


• cellpadding controls the space between cell content and cell borders.
• cellspacing controls the space between cells.
• Both are HTML attributes but better controlled via CSS now:

<table cellpadding="10" cellspacing="5">

• Modern CSS alternative:

td {
padding: 10px;
border-spacing: 5px; /* on table */
}

Nested Tables
• Tables can be nested by placing a <table> inside a <td> cell.
• Useful for complex layouts or grouping data.
• Example:

<table border="1">
<tr>
<td>Main cell 1</td>
<td>
<table border="1">
<tr><td>Nested cell 1</td></tr>
<tr><td>Nested cell 2</td></tr>
</table>
</td>
</tr>
</table>
Complete Example
<table border="1" style="border-collapse: collapse; background-color: lightyellow;" cellpadding="8"
cellspacing="5" align="center">
<caption><b>Sample Table</b></caption>
<tr>
<th>Item</th>
<th>Description</th>
</tr>
<tr>
<td>Fruits</td>
<td>
<table border="1" cellpadding="5" style="border-collapse: collapse;">
<tr><td>Apple</td></tr>
<tr><td>Banana</td></tr>
</table>
</td>
</tr>
<tr>
<td>Vegetables</td>
<td>Carrot, Broccoli</td>
</tr>
</table>

This explanation covers all basics and advanced aspects of creating and styling tables in HTML,
with semantic tags and modern CSS practices.The basic structure for HTML tables involves
using the <table> element, in which rows are defined by <tr> and cells within rows are created
with <td> (data cells) or <th> (header cells).

Basic Table:
<table>
<tr>
<td>Cell</td>
</tr>
</table>

This creates a simple table with one row and one cell.

Caption:
The <caption> element defines a title or description for the table. It should be the first child
inside <table>.

<table>
<caption>Table Title</caption>
<tr>
<td>Content</td>
</tr>
</table>

Table Heading (<th>):


Header cells used to define headings for columns or rows. These display bold and centered text
by default.

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

Borders:
• Using old HTML attribute (less preferred):

<table border="1">

• Preferred modern approach is CSS:

css
table, th, td {
border: 1px solid black;
border-collapse: collapse; /* To collapse borders */
}

Alignment:
• Align text inside a cell with text-align CSS:

<td style="text-align: center;">Centered text</td>

• Align the whole table with CSS margin or deprecated align attribute:
<table align="center">...</table>

Background Color:
Apply background color to the entire table or individual cells using CSS background-color:

<table style="background-color: yellow;">

or

<td style="background-color: yellow;">

Cell Padding and Spacing:


• Padding: space between cell content and cell border.
• Spacing: space between cells.
• HTML attributes: cellpadding and cellspacing (deprecated but widely supported)

<table cellpadding="10" cellspacing="5">

• CSS alternative:

td {
padding: 10px;
}
table {
border-spacing: 5px;
}

Nested Tables:
You can place a <table> inside a <td> to create nested tables.

<table border="1">
<tr>
<td>Main cell</td>
<td>
<table border="1">
<tr><td>Nested cell 1</td></tr>
<tr><td>Nested cell 2</td></tr>
</table>
</td>
</tr>
</table>

Frames (Deprecated in HTML5)


• Framesets are not supported in HTML5, replaced by iframes.
• Example:

<iframe src="page.html" width="400" height="300"></iframe>

• Attributes: src, width, height, name, frameborder.


• Adding hyperlinks to a frame target:

<a href="content.html" target="frame1">Open in frame</a>

Here is an explanation of Frames and Iframes, focusing on the fact that framesets are deprecated
in HTML5 and replaced by iframes, along with examples and attributes:

Frames and Framesets (Deprecated in HTML5)


• Frames divide the browser window into multiple resizable sections where each frame
can load a separate HTML document.
• The container defining these sections is called a frameset (<frameset>), which replaces
the <body> tag.
• Each section is a <frame> element specifying the content source via src attribute.
• Issues with frames include poor usability, accessibility problems, complex navigation,
and difficulty bookmarking pages.
• Due to these problems, frames were deprecated and are not supported in HTML5.

Iframes in HTML5
• The <iframe> (inline frame) tag is the modern and supported way to embed another
HTML document inside the current document.
• Unlike framesets, iframes behave like ordinary embedded elements and appear inline
within the existing content.
• The <iframe> tag is placed inside the <body> like any other HTML element.

Example of an Iframe

<iframe src="page.html" width="400" height="300"></iframe>

• This embeds the content of "page.html" into the current page in a box 400 pixels wide
and 300 pixels high.

Common Attributes of <iframe>


Attribute Description
src URL of the document to display inside the iframe.
width Width of the iframe (pixels or CSS units).
height Height of the iframe (pixels or CSS units).
name Name of the iframe, used as a target for links.
frameborder Border visibility (usually 0 or 1), but deprecated. CSS border preferred.

Adding Hyperlinks to Load in a Named Frame


• Using the target attribute on links (<a>) allows loading the linked document inside a
specific iframe if it has a matching name.

Example:

<iframe src="default.html" name="frame1" width="400" height="300"></iframe>

<a href="content.html" target="frame1">Open in frame</a>

• Clicking the link will open "content.html" inside the iframe named "frame1" instead
of navigating the whole page.

Advantages of Iframes over Frames


• Iframes can be positioned anywhere in the page and embedded inline with other content.
• Support scrolling, resizing, and better integration with modern responsive design.
• Do not interfere with page history or navigation like frames do.
• Widely supported in all modern browsers.

Summary
Aspect Frames/Frameset Iframe
HTML5 Support Deprecated Fully supported
Usage Divide window into sections Embed inline HTML documents
Placement Use <frameset> replacing <body> Use <iframe> inside <body>
Navigation Issues Yes, complex No
Flexibility Low High

Images
• Insert image:

<img src="image.jpg" alt="My image">

• Alternate text: alt attribute.


• Border: CSS style="border:2px solid black".
• Alignment: CSS float:left; or text-align: center;.
• Image as link:

<a href="page.html"><img src="img.jpg"></a>

• Image maps: Define clickable areas using <map> and <area>.

Here is an in-depth explanation of working with images in HTML including inserting images,
alternate text, styling borders and alignment, creating images as links, and defining image maps.

Insert Image
• Use the empty <img> tag to embed an image in a webpage.
• src attribute specifies the image file’s URL or relative path.
• alt attribute provides alternate text shown if the image can't be loaded or read by screen
readers for accessibility.
• Example:

<img src="image.jpg" alt="My image">

Alternate Text (alt Attribute)


• Essential for accessibility and SEO.
• Describes the image content to users with visual impairments or if the image fails to load.
• Example:

<img src="logo.png" alt="Company Logo">

Border Styling
• Borders are styled with CSS, not deprecated border attribute.
• Example for a 2-pixel solid black border:

<img src="image.jpg" alt="My image" style="border: 2px solid black;">

Image Alignment
• Align images using CSS float property or text-align on the parent container.
• float: left; or float: right; makes text flow around the image.
• Center alignment is achieved by applying text-align: center; to the parent element.
• Examples:

<img src="image.jpg" alt="My image" style="float: left; margin-right: 10px;">

<div style="text-align: center;">


<img src="image.jpg" alt="My image">
</div>

Image as Link
• To make an image clickable, wrap the <img> element inside an anchor <a> tag.
• Clicking the image will take the user to the linked URL.
• Example:

<a href="page.html">
<img src="img.jpg" alt="Clickable Image">
</a>

Image Maps: Defining Clickable Areas on an Image


• An image map links different parts of one image to different URLs using <map> and
<area> elements.
• The <img> element’s usemap attribute references a <map> by its name.
• <area> elements inside <map> define the clickable areas using shapes (rect, circle,
poly) and coordinates.
• Example:

<img src="worldmap.jpg" alt="World Map" usemap="#worldmap">

<map name="worldmap">
<area shape="rect" coords="0,0,100,100" href="asia.html" alt="Asia">
<area shape="circle" coords="150,150,50" href="europe.html" alt="Europe">
</map>

• Each coordinate corresponds to pixel positions within the image defining clickable
regions.

This approach improves interactivity and navigation on images by allowing different image parts
to link to different destinations.

You might also like