The HTML picture element gives the users more flexibility in defining image resources.
The HTML picture element is used for art direction in responsive designs. Instead of having one image that is scaled on the viewport width, multiple images can be designed to nicely fill the browser viewport.
The HTML <picture> tag contains two tags: one or more <source> elements and one <img> tag.
Example:
Resize the browser window to load different images:
The HTML <source> tag defines multiple media resources for media elements, such as <audio>, <picture>, and <video>.
The HTML <source> element specifies alternative video/audio/image files which the browser can choose from, based on browser support (the browser will choose the first <support> it supports).
Example1:
The audio player with two source files (the browser will choose the first <source> it supports):
The HTML <pre> element specifies pre-formatted text.
Text in a <pre> tag is displayed in a fixed-width font, and the text preserves both spaces and line breaks (the text will be displayed exactly as written in the HTML source code).
Example:
<!DOCTYPE html>
<html>
<body>
<pre>
Text in a pre tag
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</body>
</html>
Output:
Text in a pre tag
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
To create a pre-formatted text with a fixed width (with CSS):
<!DOCTYPE html>
<html>
<body>
<div style="width:250px;overflow:auto">
<pre>This is a pre with a fixed width. It will use as much space as defined.</pre>
</div>
</body>
</html>
Output:
This is a pre with a fixed width. It will use as much space as defined.
The HTML <time> element specifies a specific time (or datetime).
The HTML datetime attribute of this tag is used to translate the time into a machine-readable format so that browsers can offer to add date reminders through the user’s calendar.
Example:
<!DOCTYPE html>
<html>
<body>
<p>We have a job meeting from <time>11:00</time> to <time>12:00</time> every Friday.</p>
<p>I have a meeting on <time datetime="2021-12-03 18:00">Friday</time>.</p>
</body>
</html>