I M P O RTA N T

NEW HTML
TA G A N D
AT T R I B U T E

P R E S E N T E D BY:
P I N K I PAT E L
H T M L < P I C T U R E > TA G

• The <picture> tag gives web developers more flexibility in specifying image resources.
• The most common use of the <picture> element will be for art direction in responsive
designs. Instead of having one image that is scaled up or down based on the viewport
width, multiple images can be designed to more nicely fill the browser viewport.
• The <picture> element contains two tags: one or more <source> tags and one <img>
tag.
• The browser will look for the first <source> element where the media query matches the
current viewport width, and then it will display the proper image (specified in the srcset
attribute). The <img> element is required as the last child of the <picture> element, as
a fallback option if none of the source tags matches.
EXAMPLE
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
 H T M L < M E T E R > TA G
• The <meter> tag defines a scalar measurement within a known range, or a
fractional value. This is also known as a gauge.( to make a judgement or to
calculate something by guessing)
• Examples: Disk usage, voting population, temperature, web traffic the relevance of
a query result, etc.
• Tip: Always add the <label> tag for best accessibility practices!
• Attributes - form , high, low, max, min, optimum,value
• Note: The <meter> tag should not be used to indicate progress (as in a progress
bar). For progress bars, use the <progress> tag.
EXAMPLE

<label for="disk_c">Disk usage C:</label>

<meter id="disk_c" value="5"min="0" max="50"> out of 10</meter><br>

<label for="disk_d">Disk usage D:</label>

<meter id="disk_d" value="0.6">60%</meter>
H T M L < P R O G R E S S > TA G

• The <progress> tag represents the completion progress of a task. It provides

an easy way for web developers to create progress bar on the website.
Dynamically changing values of the progress bar must be defined with the
scripts (JavaScript).
• It is used to represent the progress of a task. It is also defined how much work
is done and how much is left to download a thing. It is not used to represent
the disk space or relevant query.
• value - It defines that how much work the task has been completed.
max - It defines that how much work the task requires in total.
EXAMPLE
<label for="file">Downloading progress:</label><br>
<progress></progress> <br>
<progress id="file" value="32" max="100"> 32% </progress>
 H T M L < T I M E > TA G
• The <time> tag is used to display the human-readable date/time. It can also be used to encode dates and
times in a machine-readable form. The main advantage for users is that they can offer to add
birthday reminders or scheduled events in their calendars and search engines can produce
smarter search results.

• The time element is used to tell a browser that the associated text is time-related. In-and-of itself, that
doesn’t do a lot for users or browsers, although it may be a help to users of some assistive technologies.
The time element isn’t particularly useful until paired with a datetime attribute. One a datetime attribute
has been associated with the time element, the browser knows a lot more about the time
described in the time element and can use that information when interacting with other applications —
such as when importing information from an HTML email or webpage into a calendar application.

• The datetime attribute can be used to identify a year, a month and year, a specific date, a date and time, a
time without a date, and durations of time.
EXAMPLE
<p>
Meet me at <time>11:59</time> at the dock.
</p>
<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>

<p>
Last updated
<time datetime="2015-11-03">
November 3rd 2015
</time>.
</p>
H T M L < M A P > TA G

• Definition and Usage

• The <map> tag is used to define an image map. An image map is an image with clickable
areas.
• The required name attribute of the <map> element is associated with the <img>'s usemap
attribute and creates a relationship between the image and the map.
• The <map> element contains a number of <area> elements, that defines the clickable areas
in the image map.
The <area> coords attribute is used to specify the coordinate of an area in an image-map.
It is used with shape attribute to specify the size, shape, and placement of an area. (0, 0) is
the coordinate of the top-left corner.

https://www.image-map.net/
EXAMPLE
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"
target="_blank">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"
target="_blank">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"
target="_blank">
</map>
H T M L D ATA - * AT T R I B U T E S

• The data-* attributes is used to store custom data private to the page or application.
• The data-* attributes gives us the ability to embed custom data attributes on all HTML
elements.
• The stored (custom) data can then be used in the page's JavaScript to create a more
engaging user experience (without any Ajax calls or server-side database queries).
• The data-* attributes consist of two parts:
• The attribute name should not contain any uppercase letters, and must be at least one
character long after the prefix "data-"
• The attribute value can be any string
• Note: Custom attributes prefixed with "data-" will be completely ignored by the user agent.
EXAMPLE
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
</ul>
<script>
function showDetails(animal) {
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
H T M L H I D D E N AT T R I B U T E

• The hidden attribute is a boolean attribute.

• When present, it specifies that an element is not yet, or is no longer, relevant.
• Browsers should not display elements that have the hidden attribute specified.
• The hidden attribute can also be used to keep a user from seeing an element
until some other condition has been met (like selecting a checkbox, etc.). Then, a
JavaScript could remove the hidden attribute, and make the element visible.
<p hidden>This paragraph should be hidden.</p>
<p>This is a visible paragraph.</p>
H T M L PAT T E R N AT T R I B U T E

• The pattern attribute specifies a regular expression that the <input> element's value
is checked against.
• Note: The pattern attribute works with the following input types: text, date, search,
url, tel, email, and password.
• Tip: Use the global title attribute to describe the pattern to help the user.

<input type="text" name="username" id="username" placeholder="4 to 10

alphabetic characters "pattern="[A-Za-z]{4,10}"autofocus required>
We may use a regular expression to add a certain pattern as an input. The most
frequent pattern, for example, is [A-Za-z] 5,11. It will take both capital and lowercase
letters. It also indicates that the minimum character length is five, and the maximum
permissible character length is 11.
EXAMPLE
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-
z]{3}" title="Three letter country code"><br><br>
<input type="submit">
</form>
 C O N T E N T E D I TA B L E
A N D S P E L L C H E C K AT T R I B U T E
• The contenteditable attribute specifies whether the content of an element is editable or not.
• The spellcheck attribute specifies whether the element is to have its spelling and grammar
checked or not.
• The following can be spellchecked:
• Text values in input elements (not password)
• Text in <textarea> elements
• Text in editable elements

<p contenteditable="true" spellcheck="true">This is a praggagraph. It is editable. Try to change

the text.</p>

First name: <input type="text" name="fname" spellcheck="true">

H T M L R E V E R S E D AT T R I B U T E

• The reversed attribute is a boolean attribute.

• When present, it specifies that the list order should be descending (9,8,7...), instead of ascending (1,
2, 3...).
Example
<ol reversed>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>water</li>
<li>sugar</li>

</ol>
HTML
< A > D O W N L O A D AT T R I B U T E

• The download attribute specifies that the target (the file specified in
the href attribute) will be downloaded when a user clicks on the hyperlink.
• The optional value of the download attribute will be the new name of the file
after it is downloaded. There are no restrictions on allowed values, and the
browser will automatically detect the correct file extension and add it to the
file (.img, .pdf, .txt, .html, etc.).
• If the value is omitted, the original filename is used.
• Example: https://www.w3schools.com/tags/tryit.asp?
filename=tryhtml5_a_download
EXAMPLE
<h1>The a download attribute</h1>

<p>Click on the image to download it:<p>

<a href="mac.jpg" download>
<img src="mac.jpg" alt="mac" width="300" height="200">
</a>