What is HTML?

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in Web browsers. It can be aided by technologies such as cascading style sheets (CSS) and scripting languages such as JavaScript.

1. loading=lazyattribute

Performance optimization. You can use the Loading =lazy property to delay loading of images until the user scrolls to them.

<img src='image.jpg' loading='lazy' alt='Alternative Text'>           
Copy the code

2. Email, phone and text links:

<a href="mailto:{email}? subject={subject}&body={content}">
    Send us an email
</a>

<a href="tel:{phone}">
    Call us
</a>

<a href="sms:{phone}? body={content}">
    Send us a message
</a>         
Copy the code

3. Ordered listsstartProperties.

Use the start property to change the starting point of the ordered list.

<ol start="11">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Python</li>
    <li>Go</li>
</ol>
Copy the code

4. meterThe element

You can use this element to display quantities. No JavaScript/CSS required.

<label for="value1">Low</label>
<meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter>

<label for="value2">Medium</label>
<meter id="value2" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter>

<label for="value3">High</label>
<meter id="value3" min="0" max="100" low="30" high="75" optimum="80" value="80"></meter>
Copy the code

5. HTML 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>
Copy the code

6. Field set elements

You can use this

element to group multiple controls and labels () in the

<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>
Copy the code

7. Window.opener

Opening the target=”_blank” page allows the new page to access the original page window.opener. This can have an impact on security and performance. Including rel=”noopener” or rel=”noreferrer” can prevent this from happening.

<a href="https://markodenic.com/" target="_blank" rel="noopener">
    Marko's website
</a>           
Copy the code

8. Basics

To open all links in a document in a new TAB, use 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>

    <p>
        Read more: <br>
        <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base">
            MDN Documentation
        </a>
    </p>
</div>
Copy the code

9. The Favicon cache is broken

To refresh your site icon, you can add? V =2 to the file name to force the browser to download the new version.

This is particularly useful in production to ensure that users get new releases.

<link rel="icon" href="/favicon.ico? v=2" />           
    
Copy the code

10.Spell checkattribute

Use the Spellcheck attribute to define whether the element is checked for spelling errors.

<label for="input1">spellcheck="true"</label>
<input type="text" id="input1" spellcheck="true">

<label for="input2">spellcheck="false"</label>
<input type="text" id="input2" spellcheck="false">
Copy the code

11. Native HTML sliders

You can use it to create the slider.

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

<label for="result">Your choice: </label>
<input type="number" id="result" name="result">
Copy the code

12. HTML accordion

You can use this Details element to create an HTML accordion.

<div class="wrapper">
    <details>
        <summary>
            Click me to see more details
        </summary>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas  illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis.</p>
    </details>
</div>
Copy the code

13.markThe label

You can use the tag to highlight the text.

14.downloadattribute

Instead of navigating to the file, you can use the properties in the Download link to download the file.

<a href='path/to/file' download>
    Download
</a>           
Copy the code

15. Performance prompt

Use the.webp image format to shrink images and improve site performance.

<picture>
    <! -- load .webp image if supported -->
    <source srcset="logo.webp" type="image/webp">
  
    <! -- Fallback if `.webp` images or <picture> tag not supported by the browser. -->
    <img src="logo.png" alt="logo">
</picture>           
    
Copy the code

16. Video thumbnails

Use the Poster property to specify the image to be displayed when the video is downloaded or before the user clicks the play button.

<video poster="path/to/image">           
Copy the code

17. The inputtype="search"

Use type=”search” for your search input and you will skip the “clear” button.

<form>
    <label for="text">Input Type Text</label>
    <input type="text" id="text" name="text">
    
    <label for="search">Input Type Search</label>
    <input type="search" id="search" name="search">
</form>           
Copy the code

Related to recommend

  • Little-known JavaScript tips 🔥
  • Unknown CSS tips 🔥

Refer to the article

  • HTML Tips