HTML Tips & Tricks 1/2

HTML Tips & Tricks 1/2

Written by Semir Teskeredzic on Dec 6th, 2021 ・ Views ・ Report Post

Semir Teskeredzic Visit User Profile

Hi all, HTML is a backbone for displaying elements on the web. I will share some tips and tricks that I've gathered on the web and that sound quite useful to be used in your next or existing project.

Here we go:

Lazy Loading

You can insert lazy attribute to have the page wait with loading images until the user scrolls to it. As per MDN Web Docs:

Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.

You can use it with several HTML elements such as img or iframe:

<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

HTML Native autocomplete

You can use <datalist> element to provide your list a native autocomplete option. How W3schools define it:

The tag specifies a list of pre-defined options for an element. The tag is used to provide an "autocomplete" feature for elements. Users will see a drop-down list of pre-defined options as they input data. The element's id attribute must be equal to the element's list attribute (this binds them together).

You can use it as:

<label for=”state”>EU Countries:</label>
<input type=”text” name=”eucountries” id=”eucountries” list=”eucountries_list”>
<datalist id=”eucountries_list”>
  <option>Germany</option>
  <option>France</option>
  <option>Italy</option>
  <option>Spain</option>
  <option>Portugal</option>
  <!– etc –>
</datalist>

Define starting point of

    By using start attribute on your ordered list element <ol>, you can define the starting point:

    🤩 Our Amazing Sponsors 👇
    DigitalOcean View Website
    DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
    Laravel News View Website
    Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
    Genesis View Website
    A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. 
    <ol start="24">
  <li>Tanzania</li>
  <li>China</li>
  <li>Australia</li>
  <li>Argentina</li>
</ol>

    This will print the first item like 24. Tanzania and continue with counting from that point.

    Clear forms with a native button

    You will use forms to send data and alert user that the transfer was successful or not. At the end of the process or at any time before you want to provide your users the ability to clear the form contents with a push of a button. Simply implement a type="reset" inside the form:

    <form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

    Display quantities without any JS

    This is the MDN Web Docs definition:

    The HTML element represents either a scalar value within a known range or a fractional value.

    It comes with several attributes:

    • min: it is the lowest numeric value of the range
    • max: it is the highest numeric value of the range
    • low: it describes the upper numeric bound of low range
    • high: it describes the lower numeric bound of high range
    • optimum: it describes the optimal numeric value
    <label for="fuel">Fuel level:</label>

<meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

    Security issues with target="_blank"

    When a new page is opened through target="_blank" it is allowed to access the window.opener of the original window. This presents a security and performance issue. You can avoid this with adding rel="noopener" or rel="noreferrer".

    <a href="https://devdojo.com" target="_blank" rel="noopener">
  DevDojo Homepage
</a>

    Using target="_blank" just works, but using it over and over again or perhaps having multiple editors where some can forget adding it can be frustrating. You can define this property as a default value in the <head> element:

    <head>
  <base target="_blank">
</head>

    All links inside <body> will open in new tab with or without the <target="_blank"> present.

    Create sliders

    You can use another type in the <input> element to present sliders. MDN Web Docs define it as:

    elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like the number input type.

    <p>Audio settings:</p>

<div>
  <input type="range" id="volume" name="volume"
         min="0" max="11">
  <label for="volume">Volume</label>
</div>

<div>
  <input type="range" id="cowbell" name="cowbell" 
         min="0" max="100" value="90" step="10">
  <label for="cowbell">Cowbell</label>
</div>

    Native HTML accordion Even though you will go with JS or JQuery to create an accordion, the HTML also provides the way to have some details hidden and revealed with the click. MDN Web Docs define it as:

    The

    HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the element.

    You can use this disclosure widget simply like so:

    <details>
    <summary>Details</summary>
    This is the additional description hidden from the view.
</details>

    Hope you will find some of them useful. Thanks for reading, stay safe and productive. Cheers!

    Comments (0)