Subject – Open Elective – II – Web Page Design using HTML and CSS

Class – S. Y. B. Tech
Unit 3 – Advanced HTML Notes

HTML5 Semantics
∙
HTML5 semantic elements provide meaningful tags that clearly describe their
purpose, improving readability, accessibility, and SEO for both humans and
browsers.
∙ Clearlydefine the role and content of elements.
∙ Improve code readability and structure.
∙ Enhance accessibility for screen readers.
∙ Help browsers and search engines understand page content.
∙ Examples include <form>, <table>, <article>, <header>, and <footer>.

Semantic Elements

HTML5 semantic elements that you should use to structure your web content are
structured as follows –

HTML header Tag

∙
The <header> tag is a semantic HTML element that is used to define the
introductory or navigational content of a webpage or a section. Typically, a header
contains elements like:
∙ The website or page title
 ∙ Logo or branding
∙ Navigation menus
∙ Search bar
∙ Any introductory information relevant to the page or section

Syntax:

<header> ...</header>

HTML <nav> Tag

∙
The <nav> tag in HTML is used to define navigation sections on a webpage. It
typically contains links to key parts of the site, such as the main menu, table of
contents, or index. These links are usually organized using unordered lists (<ul>) or
displayed as standalone links.
Using the <nav> tag improves the semantic structure of a webpage, helping both
users and search engines understand which parts of the page are meant for
navigation. According to modern web development practices, over 85% of well
structured websites use the <nav> tag to enhance accessibility and improve SEO
performance.
Syntax:

<nav>
<!-- Your navigation links here -->
</nav>

HTML <section> Tag

∙
The Section tag defines the section of documents such as chapters, headers, footers,
or any other sections. The section tag divides the content into sections and
subsections.
The section tag is used when requirements of two headers or footers or any other
section of documents are needed. Section tag grouped the generic block of related
contents. The main advantage of the section tag is, it is a semantic element, that
describes its meaning to both the browser and the developer.

Syntax
<section> Section Contents </section>

HTML <main> Tag

∙
The HTML <main> Tag defines a document's main content, which should be
unique. It excludes content like sidebars, navigation, logos, and copyright info,
ensuring unique document-specific material within.
Note: The document must not contain more than one <main> element. The
<main> element should not be a child element of an <article>, <aside>,
<footer>, <header>, or <nav> element.
Syntax:
<main>
// contents of main Element
</main>

HTML aside Tag

∙
The <aside> tag is used to describe the main object of the web page more shortly
like a highlighter. It identifies the content that is related to the primary content of
the web page but does not constitute the main intent of the primary page. The
<aside> tag contains mainly author information, links, related content, and so on.
Syntax:
<aside>
// contents of aside Element
</aside>

HTML footer Tag

The <footer> tag in HTML is used to define the footer section of an HTML
document.
∙ The footer section typically contains information such as contact information,
sitemap, back-to-top links, related documents, copyright, etc.
∙ The footer tag is a semantic tag included in HTML (in 2014) along with other
tags like article, nav, header, etc.
∙ It is not mandatory, but adds to clear structure to the document and useful for
SEO.
<footer>
// contents of footer Element
</footer>

HTML details Tag

∙
The <details> tag in HTML is used to create a disclosure widget from which the user
can view or hide additional information. It is used with the <summary> tag, which
provides the title or header for the details section. It's generally used for FAQs,
dropdown menus, or to show/hide additional content.
Syntax
<details>
<summary>Click to view </summary>
 <p> Additional content that can be shown or hidden.</p>
</details>

Advantages of Semantic Elements

1. Better SEO
2. Better accessibility
3. Cleaner code structure
4. Easier maintenance
5. Clear content hierarchy

HTML Forms(Advanced) - New Input Types (email,

date, number, range, color, etc.),
HTML <input type="email">
∙
The HTML <input type="email"> is used to create an input field specifically for
email addresses. It automatically validates the input to ensure it follows the correct
email format. Adding the "multiple" attribute allows the user to input multiple
email addresses, separated by commas.
Syntax
<input type="email">

e.g.
<label for="mail">Enter Email : </label>
<input type="email" />
HTML <input type="date">
∙
The HTML <input type="date"> element provides a date picker interface for
selecting dates. It allows users to input dates using a calendar widget, ensuring
standardized date input across different browsers and devices.
Syntax
<input type="date">

e.g.
<label for="date">Select Date : </label>
<input type="date" />

HTML <input type="time">

∙
The HTML <input type="time"> element creates a time input field, allowing users
to select a time (including hours and minutes) from a pre-defined list or by
 entering it manually. It provides a standardized way to input time values, enhancing
user experience in forms that require time-based inputs.
Syntax
<input type="time">

e.g
<label for="time">Select Time :</label>
<input type="time" />

HTML <input type="week">

∙
The HTML <input type="week"> is used to select a specific week of the year
using a week picker interface. It provides an easy way to input week-based data,
including the year and week number, in a standardized format, enhancing user
experience and data consistency.
Syntax
<input type="week">

e.g
<label for="time">Select Week : </label>
<input type="week" />

HTML <input type="month">

∙
The HTML <input type="month"> element creates a month picker, allowing
users to select a specific month and year without specifying a day. It provides a
standardized way to input month-based data to enhance user experience. Syntax
<input type="month">

e.g
<label for="date">Select Month : </label>
<input type="month" />

HTML <input type="color">

∙
The HTML <input type="color"> element is used to define a color picker. The
value should be a seven-character hexadecimal notation representing RGB values
in hexadecimal format. Its default value is #000000 (black).
Syntax
<input type="color">

e.g.
<label for="color">Select Color : </label>
<input type="color" />

HTML <input type="number">

The HTML <input type="number"> element is used to enter numerical value or
to increase or decrease that value using up or down arrows on the right side of the
control.
Syntax
<input type="number">
e.g.
<label for="number">Select Number : </label>
<input type="number" />

HTML <input type="range">

The HTML <input type="range"> element allows the user to enter a numerical
value within a specified range.
Syntax
<input type="range">
e.g.
<label for="number">Select Number in Range :
</label> <input type="range" min="1" max="10"
step="1" />

HTML <input type="search">

The HTML <input type="search"> element allows the user to enter a search
string within the input field.
Syntax
<input type="search">
e.g.
<label for="search">Enter Search string :
</label> <input type="search" placeholder="search
..." />

HTML <input type="tel">

The HTML <input type="tel"> element allows the user to enter a telephone
number.
Syntax
<input type="tel">

e.g.
<label for="number">Enter Telephone No. :
</label> <input type="tel"
placeholder="xxx-xxx-xxxx" />

HTML <input type="url">

The HTML <input type="url"> element allows the user to enter the URL.
Syntax
<input type="url">
e.g.
<label for="url">Enter Url : </label>
<input type="url" placeholder="[Link] />
Write a program to accept the background color from the user using “color”
input type and change the background color of the document with the
selected color after clicking on the button “ChangeBackgroundCcolor”.
<html>
<head>
<style>
body,button
{
font-size:25px;
}
</style>
</head>
<body>
Select background color <input type="color" id="bcolor" />
<br><br><br>

<button onclick="changeColor()">ChangeBackgroundColor</button>

<script>
function changeColor()
{
var bcolor = [Link]("bcolor").value;
[Link]=bcolor;
}
</script>

</body>
</html>
Attributes used with Input Types (Attributes: accept, disabled, checked,
placeholder, required, pattern, autofocus )
 HTML accept Attribute
∙
HTML accept Attribute specifies the type of file that the server accepts. This
attribute can be used with <input> element only. This attribute is not used for
validation tools because file uploads should be validated on the Server. Syntax:
<input accept = "file_extension">
The accept attribute is associated with <input> elements only and not supported
in HTML 5
e.g.
<form action=" ">
<input type="file" name="picture"
accept="image/*">
<input type="submit">
</form>

HTML disabled Attribute

∙
The disabled attribute in HTML indicates whether the element is disabled or
not. If this attribute is set, the element is disabled. The disabled attribute is
usually drawn with grayed-out text. If the element is disabled, it does not
respond to user actions, it cannot be focused. It is a boolean attribute.
Usage: It can be used on the following elements: <button>, <input>, <option>,
<select>, <textarea>, <fieldset>, <outgroup>, and <keygen>.
Syntax:
<tag disabled></tag>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>HTML disabled Attribute</h2>

<!--A disabled text input-->

Enter your name : <input type=”text” name=”uname” disabled />

<!--A disabled button-->

<button type="button" disabled>Click Me!</button>
HTML checked Attribute
∙
The checked attribute in HTML is used to indicate whether an element should
be checked when the page loads up. It is a Boolean attribute.
Note: It can be used with <input> element only where the type is either
"checkbox" or "radio".
Syntax:
<input type = "checkbox|radio" checked>
 e.g
<input type="checkbox"
name="check"
value="1"
checked>
Checked by default<br>
<input type="checkbox"
name="check"
value="2">

HTML placeholder Attribute

∙
HTML placeholder attribute specifies a short hint that describes the
expected value of an input field/text area. The short hint is displayed in the
field before the user enters a value.
Syntax:
<element placeholder="">
e.g.
<input type="text" name="fname" placeholder="Enter First name">
<br>
<br>
<input type="text" name="lname" placeholder="Enter Last name">
<br>
<br>
<input type="submit" value="Submit">

HTML pattern Attribute

∙
The HTML pattern attribute is used with <input> elements to specify a regular
expression that the input's value must match for the form to be submitted. It
enforces specific formatting rules, like requiring a certain number of
characters or specific character types.
Syntax:
<input pattern = "regular_exp">
Element: This attribute is associated with <input> element only.
Attribute: This attribute specifies the regular expression.
e.g.
<form action="#">
<label for="userPass">Password:</label>
<input type="text"
name="password"
 id="userPass"
pattern="[A-Za-z]{3}"
title="3 letter Password">
<input type="submit" value="submit">
</form>

HTML required Attribute

∙
It is a Boolean attribute that is used to specify that the input element must
be filled out before submitting the Form.
Elements: These attributes can be associated with three elements which
are listed below:
∙ <input>
∙ <select>
∙ <textarea>
Syntax:
<input required>

e.g. 1( use of required with input type)

<form action="">
Username:
<input type="text"
name="username"
required>
<br>
Password:
<input type="password"
name="password">
<br>
<input type="submit">
</form>
e.g. 2 ( use of required with select type)

<form action="">
<select required>
<option value="">
None
</option>
<option value="ds">
Data Structure
</option>
<option value="algo">
Algorithm
</option>
<option value="os">
Operating System
 </option>
<option value="cn">
Computer Network
</option>
</select>
<input type="submit">
</form>
e.g. 3 ( use of required with textarea type)

<form action="">
<textarea rows="7"
cols="50"
name="comment"
required>
</textarea>
<input type="submit">
</form>

HTML autofocus Attribute

∙
The HTML autofocus attribute is a powerful tool that enhances user
experience by automatically setting the focus to a specific element when a
webpage loads.
Syntax
<input type="text" autofocus>
Note: This attribute is boolean, meaning it can either be present or absent.
e.g.
<form>
<label>First Name:
<input type="text"
autofocus placeholder="Enter Name" />
</label>
</form>

HTML readonly Attribute

∙
The HTML readonly attribute, when applied to input fields or text areas,
prevents users from editing the content, allowing it only for viewing purposes.
Syntax
<input readonly>

e.g.
<form action="">
Email:
<input type="text" name="email" />
<br />
 Country:
<input type="text"
name="country"
value="Noida" readonly />
<br />
<input type="submit" value="Submit" />
</form>

HTML Media Element Tags(Multimedia Element Tags)

HTML media element tags allow audio and video content to be embedded and
played directly in web pages without external plugins.
∙ Embed audio and video directly using HTML.
∙ Provide built-in controls like play, pause, volume, and fullscreen. ∙
Supported by all modern browsers.
∙ Playback behavior can be customized using attributes.
They are widely used in modern websites for tutorials, entertainment,
presentations, and interactive applications.

Media Tags
Given below the types of media tags:
1. <audio>

The <audio> tag is used to embed sound or audio content (like music or voice)
directly into a webpage and provides controls such as play, pause, and volume.
Syntax:
<audio>
<source src="sample.mp3" type="audio/mpeg">
</audio>

e.g.
<p>Audio Sample</p>
<audio controls autoplay>
<source src="[Link]
content/uploads/20190531165842/[Link]"
type="audio/ogg">

<source src="[Link]
content/uploads/20190531165842/Recording1514.mp3"
type="audio/mpeg">
</audio>

2. <video>
 The <video> tag is used to embed video content in a webpage and supports
playback controls like play, pause, volume, and fullscreen.
Syntax:
<video src="" controls> </video>
e.g.
<p>Video Sample</p>
<video width="200" height="150" controls preload>
<source src="myvid.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
</video>

Embedding contents - <iframe><embd><object>

Embedding is the process of adding external contents into an existing web page.

HTML iframe tag

∙
An iframe, or Inline Frame, is an HTML element represented by the <iframe> tag.
It functions as a 'window' on your webpage through which visitors can view and
interact with another webpage from a different source.
iframes are used for various purposes like:
∙ Embedding Multimedia: Easily integrate videos, audio, or animations from
platforms like YouTube, etc.
∙ Including Maps: Embed maps from services like Google Maps directly into your
site.
∙ Loading Forms and Widgets: Incorporate forms or widgets from other sources
without writing complex code.
Syntax:
<iframe src="URL" title="description" height=”300px”
width=”300px” ></iframe>

The src attribute specifies the URL of the document you want to embed, and
iframes can include videos, maps, or entire web pages from other sources.

e.g.
<html>
<head>
<title>HTML iframe Tag</title>
</head>

<body style="text-align: center">

<h2>HTML iframe Tag</h2>
<iframe src="[Link]" height="370" width="400">
 </iframe>
</body>
</html>

HTML embed Tag

∙
The <embed> tag in HTML is used to embed external content or media files (such as
audio, video, or interactive elements like Flash) directly into a webpage.
∙ It is a self-closing tag
∙ It is often used for embedding files like PDFs, images, or other types of media
that require a plugin or external application to display.

Syntax

<embed src="URL" type="MIME_type" width="width_value"

height="height_value">
In above syntax,
src – specifies URL of the source
height & width - specifies height and width of embedded object in
pixel type – specifies type of embedded object
e.g.

<html>
<body>
<h2>Embed a PDF Document</h2>
<embed src="[Link]" type="application/pdf"
width="400" height="200" />

<h2>Embed a Video</h2>
<embed src="example.mp4" type="video/mp4"
width="400" height="200" />
</body>
</html>

HTML <Object> tag

The <object> tag is used to display multimedia like audio, videos, images,
PDFs, and Flash on web pages. It can also be used for displaying another
webpage inside the HTML page. The <param> tag is also used along with this
tag to define various parameters. Any text that is written within <object> and
</object> tags is considered as an alternative text that appears when the data
specified is not supported by the browser.
Syntax:
<object data=”URL” type=”Type of embedded object” height=”value”
 width=”value></object>
∙
The <param> tag in HTML is used to define a parameter for plug-ins that are
associated with <object> element. It does not contain the end tag.
Syntax:
<param name=" " value=" ">
e.g. (without param tag>
<object data="[Link]" type="audio/wav" height=”300px” width=”400px” >
</object>
e.g. (with param tag )
<object data="[Link]" type="audio/wav"> <param name="autoplay"
value="true"> </object>
Meta Tags Importance for SEO
Meta tags are vital for SEO because they provide essential information to search
engines and users. Well-optimized meta tags boost visibility, user engagement,
and search rankings.
1. Helping Search Engines: Search engines use meta tags to understand what
webpage is about, helping them match your site with users searching for
related topics.
2. Attracting Visitors: Meta tags make your listing more appealing in search
results. The title tag acts like a book's title, and the meta description works
like a teaser, encouraging users to click.
3. Clear Communication: Meta tags help both search engines and visitors
quickly understand your page’s purpose, leading to a smoother and more user
friendly experience.

Meta Title Tag

The <title> tag provides the meta title, which appears as the headline of your
webpage in search results. It is a key ranking factor for search engines, so your
title should be clear, concise, relevant to the page content, and include your
target keyword.
<title>beautiful beaches in the world</title>

Meta Description Tag

The meta description provides a brief summary of the page's content that
appears below the title tag in search results. It should be informative and should
encourage users to click on the link to visit the page.
<meta name="description"
content="Dreaming of your next vacation? Explore our guide to
the world's most breathtaking beaches the perfect coastal paradise for your next
adventure or relaxation." />
Meta Keyword Tag
Meta keywords act like labels that describe what your webpage is about, helping
search engines understand its topic. But today, major search engines no longer
use them for ranking purposes.
∙ They were removed from ranking algorithms due to frequent keyword stuffing.
∙ Keyword stuffing involved overloading pages with terms to manipulate
rankings.
∙ As a result, meta keywords now provide little to no SEO value.

<meta name="keywords" content="stunning coastlines, tropical getaways,

beach vacations">

Meta Charset Tag

The Charset Meta Tag is like a special code that tells web browsers how to
understand the characters and symbols on your webpage. It ensures that all the
letters, numbers, and unique symbols (like emojis or foreign language
characters) are displayed correctly on your site.
<meta charset="UTF-8">

Meta Viewport Tag

The meta viewport tag is like a set of instructions for your webpage on how to
behave on different devices, particularly mobile devices. It helps ensure that
your website looks and works well on various screen sizes, from smartphones to
tablets.
∙ Without it, pages appear too small on mobile.
∙ It adjusts the layout for smaller screens.
∙ Improves readability and user experience.
Add meta viewport in your webpage:

<meta name="viewport" content="width=device-width, initial-scale=1">

Meta Robots Tag

The Meta Robots Tag is like a signpost for search engine robots (also known as
crawlers or spiders) that visit your website. It tells these robots what they can
and cannot do on your webpages. It's a way to control how your site is indexed
and displayed in search results. It's crucial because it helps you manage how
your website interacts with search engines.
Add meta robots in your webpage:
∙ "index" tells search engines that it's okay to include this page in their index,
which means it can appear in search results.
∙ "follow"tells search engines that they should follow the links on this page to
discover and index other pages linked from it.

<meta name="robots" content="index, follow">

∙ "noindex" instructs search engines not to include this page in their index, so it
won't appear in search results.
∙ "nofollow" tells search engines not to follow the links on this page, so they
won't explore other pages linked from it.
<meta name="robots" content="noindex, nofollow">

Responsive Web Design -

The Viewport
Setting The Viewport
The viewport is the user's visible area of a web page.

The viewport varies with the device (will be a lot smaller on a mobile phone than on a
computer screen).

You should include the following <meta> element in the <head> section of all your
web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This gives the browser instructions on how to control the page's dimensions and
scaling.

The width=device-width part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is
first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web
page with the viewport meta tag: