Hidden HTML Tags

Click to open Html Code Editor

---

1. <abbr> Tag -

The <abbr> element is an abbreviation element used to describe acronyms.

Example:

<abbr title="Hyper Text Markup Language">HTML</abbr>

Output (Hover on it)

HTML

2. <mark> Tag -

The <mark> element marks or highlights specific text.

Example:

<p>I am <mark>Karthik Surya</mark></p>

Output:

I am Karthik Surya

3. <details> & <summary> Tag -

The <details> element creates a disclosure widget from which the user can obtain additional information.

Example:

<details>
    <summary>More Information</summary>
    <p>This is additional information that is hidden by default.</p>
</details>

Output:

More Information

This is additional information that is hidden by default.

4. <marquee> Tag -

The <marquee> element is used to create a scrolling effect for text or images within a web page.

Example with behavior="scroll" and direction="left":

<marquee behavior="scroll" direction="left">
    More Information (Scrolling left)
</marquee>

Output:

More Information (Scrolling left)

Example with behavior="scroll" and direction="right":

<marquee behavior="scroll" direction="right">
    More Information (Scrolling right)
</marquee>

Output:

More Information (Scrolling right)

Example with behavior="alternate" and direction="right":

<marquee behavior="alternate" direction="right">
    More Information (Alternating right)
</marquee>

Output:

More Information (Alternating right)

Example with behavior="alternate" and direction="left":

<marquee behavior="alternate" direction="left">
    More Information (Alternating left)
</marquee>

Output:

More Information (Alternating left)

5.<meter> Tag

The <meter> element is used to represent a scalar measurement within a known range.

Example:

<meter value="0.6" min="0" max="1">
    60%
</meter>

Output:

60%

6.<progress> Tag

The <progress> element is used to represent the completion progress of a task.

Example:

<progress value="50" max="100">
</progress>

Output:

7.<optgroup> Tag

The <optgroup> element is used to group related options within a select dropdown.

Example:

<select>
    <optgroup label="Fruits">
        <option>Apple</option>
        <option>Orange</option>
        <option>Banana</option>
    </optgroup>
    <optgroup label="Vegetables">
        <option>Carrot</option>
        <option>Spinach</option>
        <option>Tomato</option>
    </optgroup>
</select>

Output:

Apple Orange Banana Carrot Spinach Tomato

8. contenteditable-

The contenteditable attribute allows the user to edit the content on the frontend if set to true.

Example:

<div contenteditable="true">
    <p>Add your own content here</p>
</div>

Output:

Write your own content

9.spell checking -

The spell checking attribute checks if an element should have its spelling and grammar checked or not.

Example:

<div contenteditable="true"spellcheck="true">
    <p>Add your own content here</p>
</div>

Output:

give wrong spellings

10.Specify file type to be uploaded-

You can specify the file types users are permitted to upload in the input tag using the "accept" attribute

Example:

<input type="file"accept=".jpg,.png">

Output:(it accepts only .jpg,.png files)

11.Creating a poster(thumbnail) for your videos-

With the "poster" attribute, you can create an image which is displayed while the video is downloading,or until the user hits the play button.if this is not included,the first frame of the video will be used instead

Example:

<video poster="https://qph.cf2.quoracdn.net/main-qimg-68dac967e9926b73f9457ecbf6c7c830-pjlq"width="320" height="240" controls>

  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>

Output: