npm npm npm npm

figure tag

  • title: figure
  • tags: figure
  • This can be used to mark up a photo. The figure element can also contain a figure caption.
<figure>
  <img src="zzz.jpg" alt="zzz" style="width:100%">
  <figcaption>ZZZ</figcaption>
</figure>

video tag

  • title: video
  • tags: video

  • This allows you to embed a media player for video playback. For example, you can upload your video on AWS S3 and use the video tag to embed it on your website.

  • Using YouTube for that might come off as unprofessional. And Vimeo doesn't allow you to embed your videos without paying. You can specify certain attributes, such as width, height, autoplay, loop, controls, etc.

<video autoplay="" loop="" controls="" width="640" height="480">
	<source type="video/mp4" src="zzz.mp4">
</video>
  • You can also embed a live stream using getUserMedia() or WebRTC

picture tag

  • title: picture
  • tags: picture

  • This tag helps you display images in a responsive manner, by showing an alternative image version for smaller viewports.

  • It needs to contain one or more source tags and one img tag. The img tag will be used only if the viewport doesn't match any of the source tags or if the browser does not support it.

<picture>
   <source media="(min-width: 968px)" srcset="large_img.jpg">
   <source media="(min-width: 360px)" srcset="small_img.jpg">
   <img src="default_img.jpg" alt="avatar">
</picture>

progress tag

  • title: progress
  • tags: progress
  • The progress tag represents the progress of a task. The progress tag should not be confused with the meter tag (which represents a gauge).
<progress value="63" max="100">
</progress>

meter tag

  • title: meter
  • tags: meter
  • You can use the meter element to measure data within a given range (a gauge).
  • This can be achieved with min and max values or with a percentage.
<meter value="2" min="0" max="10">2 out of 10</meter>
<meter value="0.6">60%</meter>

map tag

  • title: map
  • tags: map

  • The map tag is used to define a client-side image-map. An image-map is an image with clickable areas. All you have to do is mention the X and Y coordinates in the elements from the map.

  • This means that you create a map of our Solar System and define areas for each planet and take the visitors to a separate page for each planet they click on.

<img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth">
  <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars">
  <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn">
</map>

contenteditable attribute

  • title: contenteditable
  • tags: contenteditable
  • This attribute specifies whether the content of an element is editable or not.
<p contenteditable="true">This is an editable paragraph.</p>

input suggestions

  • title: input suggestions
  • tags: input suggestions
<input type="text" list="planets">
<datalist id="planets">
    <option value="Mercury"></option>
    <option value="Venus"></option>
    <option value="Earth"></option>
    <option value="Mars"></option>
    <option value="Jupiter"></option>
    <option value="Saturn"></option>
    <option value="Uranus"></option>
    <option value="Neptune"></option>
</datalist>

noscript tag

  • title: noscript
  • tags: noscript

  • The content inside the noscript element is rendered by the browser only when JavaScript is disabled.

  • It provides a fallback mechanism for the components that will stop working without JavaScript.

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>

html native search

  • title: HTML Native Search
  • tags: native, search
<div class="wrapper">
  <h1>
    Native HTML Search
  </h1>

  <input list="items">

  <datalist id="items">
    <option value="Marko Denic">
    <option value="FreeCodeCamp">
    <option value="FreeCodeTools">
    <option value="Web Development">
    <option value="Web Developer">
  </datalist>
</div>

fieldset element

  • title: Fieldset Element
  • tags: fieldset, element
  • You can use fieldset element to group several controls as well as labels (label) within a web form.
<form>
  <fieldset>
    <legend>Choose your favorite language</legend>

    <input type="radio" id="javascript" name="language">
    <label for="javascript">JavaScript</label><br/>

    <input type="radio" id="python" name="language">
    <label for="python">Python</label><br/>

    <input type="radio" id="java" name="language">
    <label for="java">Java</label>
  </fieldset>
</form>

window opener

  • title: window opener
  • tags: window, opener

  • Pages opened with target=”_blank” allow the new page to access the original's window.opener.

  • This can have security and performance implications.

  • Include rel=”noopener” or rel=”noreferrer” to prevent this.

<a href="https://freecodetools.org" target="_blank" rel="noopener">
  Free Code Tools
</a>

base element

  • title: base element
  • tags: base, element
  • If you want to open all links in the document in a new tab, you can use base element:
<head>
   <base target="_blank">
</head>
<!-- This link will open in a new tab. -->
<div class="wrapper">
  This link will be opened in a new tab: &nbsp;
  <a href="https://freecodetools.org/">
    Free Code Tools
  </a>
</div>

details element

  • title: Details Element
  • tags: details, element
  • You can use the details element to create native HTML accordion.
<div class="wrapper">
  <details>
    <summary>
      Click me to see more details
    </summary>

    <p>
      More details.
    </p>
  </details>
</div>

liveReload

  • title: livereload
  • tags: livereload
  • Heard of VsCode LiveServer Extension? We are going to create something similar to that with a single line of HTML, all you have to do is change the content value to your desired value Example: content = "3000".
<meta http-equiv="refresh" content="value(seconds)">