Sep 4, 2022

Useful HTML5 Tags

There are some very useful but little-known HTML5 tags that can come in handy, too. They give a semantic meaning to your webpage, bring more accessibility, and make your life easier.


The <abbr> Tag

<p style="font-family: sans-serif;"> Can <abbr title="Artificial Intelligence">AI</abbr> be taught how to reciprocate human emotions?
</p>


The <details> Tag

<details>
    <summary>Table of Contents</summary>
    <ul>
        <li>
            <a href="#web-dev">Web Development</a>
        </li>
        <ul>
            <li><a href="#web-dev-html">HTML</a></li>
            <li><a href="#web-dev-css">CSS</a></li>
        </ul>
       </ul>
 </details>


The <base> Tag

<head>
    <base href="https://bhaveshrawat.pages.dev/assets/">
</head>
<body>
    <figure style="max-width: 480px;">
        <img style="width: 100%;" src="netflix-planform.webp">
        <figcaption>Netflix Planform made with Grid. </figcaption>
    </figure>
    <figure style="max-width: 480px;">
        <img style="width: 100%;" src="hamburger-menu.gif">   
        <figcaption>&lt;input&gt; tag menu bar</figcaption>
    </figure>
</body>


How the oncontextmenu attribute works

<body oncontextmenu="return false"></body>

 

<body>
    <section oncontextmenu="return false"></section>
</body>


The full article can be found at the link below.

 

Links: