Useful HTML tags
These tags are easy to use in developer life, but the developer doesn’t know or not use them. so, In this article I’ll describe some of the useful HTML tags.
The HTML <base> Element
The <base> element specifies the base URL and/or target for all relative URLs in a page.
The <base> tag must have either an href or a target attribute present, or both.
There can only be one single <base> element in a document!
<!DOCTYPE html>
<html>
<head>
<base href="https://www.joghar.github.io/" target="_blank">
</head>
<body>
<h1>The base element</h1>
<p>
<img src="images/dummy.jpg" width="24" height="39" alt="abc">
- Notice that we have only specified a relative address for the image.
- Since we have specified a base URL in the head section, the browser will look for the image at "https://www.joghar.github.io/images/dummy.gif".
</p>
<p>
<a href="blog/useful-html-tags">HTML base tag</a>
- Notice that the link opens in a new window, even if it has no target="_blank" attribute.
- This is because the target attribute of the base element is set to "_blank".</p>
</body>
</html>
HTML <object> Tag
The <object> tag defines a container for an external resource.
The external resource can be a web page, a picture, a media player, or a plug-in application.
Plug-ins
The <object> tag was originally designed to embed browser Plug-ins.
Plug-ins are computer programs that extend the standard functionality of the browser.
Plug-ins have been used for many different purposes:
- Run Java applets
- Run ActiveX controls
- Display Flash movies
- Display maps
<!DOCTYPE html>
<html>
<body>
<h1>The object element</h1>
<object data="snippet.html" width="500" height="200">
</object>
</body>
</html>
HTML <meter> Tag
The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.
Examples: Disk usage, the relevance of a query result, etc.
Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.
Tip: Always add the <label> tag for best accessibility practices!
<!DOCTYPE html>
<html>
<body>
<h1>The meter element</h1>
<p>The meter element is used to display a gauge:</p>
<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>
<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter>
<p><strong>Note:</strong> The meter tag is not supported in Edge 12 (or earlier).</p>
</body>
</html>
output:
HTML <figure> and <figcaption> Elements
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.
The element defines the actual image/illustration.
<!DOCTYPE html>
<html>
<body>
<h2>Places to Visit</h2>
<figure>
<img src="/assets/images/dummy.jpg" alt="dymmy" style="width:100%; height:200px">
<figcaption class="text-center">Fig.1 - Dummy.</figcaption>
</figure>
</body>
</html>
output:
HTML Computer Code Elements
HTML <kbd> For Keyboard Input
The HTML <kbd> element is used to define keyboard input. The content inside is displayed in the browser’s default monospace font.
<!DOCTYPE html>
<html>
<body>
<h2>The kbd Element</h2>
<p>The kbd element is used to define keyboard input:</p>
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
</body>
</html>
output: Ctrl + S
HTML <samp> For Program Output
The HTML <samp> element is used to define sample output from a computer program. The content inside is displayed in the browser’s default monospace font.
<!DOCTYPE html>
<html>
<body>
<h2>The samp Element</h2>
<p>The samp element is used to define sample output from a computer program.</p>
<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>
</body>
</html>
output: File not found. Press F1 to continue
HTML <code> For Computer Code
The HTML <code> element is used to define a piece of computer code. The content inside is displayed in the browser’s default monospace font.
<!DOCTYPE html>
<html>
<body>
<p>The code element does not preserve whitespace and line-breaks.</p>
<p>To fix this, you can put the code element inside a pre element:</p>
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
</body>
</html>
output:
x = 5;
y = 6;
z = x + y;
HTML <var> For Variables
The HTML <var> element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.
<!DOCTYPE html>
<html>
<body>
<h2>The var Element</h2>
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>
</body>
</html>
output:
The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.
Comments