10 Useful Tags and Attributes in HTML with Example (HTML)

HTML attribute provides a lot more complex tasks directly on your HTML file, You better know that HTML is a building block of the web (If not please check out Introduction of HTML which provides a lot of features that can you get help creating a good website. Here, you learn the 10 Useful Tags and Attributes in HTML, for creating a webpage. It’s very useful for new ones. Without taking much time, we start knowing.

10 Useful Tags and Attributes in HTML

Multiple

This attribute provides a function that allows them to user enter multiple values. <input> tags and <select> tags with this you use these multiple attributes.

Using multiple Attribute With <select> Tag

<label for="language">Select languages:</label>
<select name="language" id="language" multiple>
   <option value="C++">C++</option>
   <option value="Python">Python</option>
   <option value="JavaScript">JavaScript</option>
   <option value="Java">Java</option>
</select>

Using multiple Attribute for File Input

By using the multiple attributes for file input, you can select multiple files.

<input type="file" multiple>

Using multiple Attribute for Email Input

While using the email attribute multiple the email is spread by comma and the all-white space email is removed from it

<input type="email" multiple>

Content-editable

You can make the HTML content by using the content-editable attribute. it is common in all HTML elements. And this attribute is used globally.

    <p contenteditable="true">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima animi
      quae atque illo, consectetur sint voluptatum aut repellat natus ut
      corporis quidem, modi magni commodi deleniti recusandae amet ullam vero
      maiores voluptate deserunt quo! Doloribus.
    </p>

Spellcheck

The spellcheck attribute checks whether the element having for spelling errors or not. You can check the spellcheck text in the <textarea> elements, Text is the editable elements or input elements {except password}.

  <p contenteditable="true" spellcheck="true">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima animi
    quae atque illo, consectetur sint voluptatum aut repellat natus ut
    corporis quidem, modi magni commodi deleniti recusandae amet ullam vero
    maiores voluptate deserunt quo! Doloribus.
  </p>

Download

You can also download the resource with the help of the download attribute. The download attribute tells to browser to download the specific URL. You can use the download attribute with the <a> tag and the <area> tag.

<a href="xyz.png" download="myImage">Download</a>

Accept

The accept attribute helps to specify to the user which data want in this for upload.

Accepting an Audio File

<input type="file" id="audioFile" accept="audio/*">

Accepting a Video File

<input type="file" id="videoFile" accept="video/*">

Accepting an Image File

<input type="file" id="imageFile" accept="image/*">

Accepting a Microsoft Word File

<input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

Accepting PNG or JPEG Files

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

Accepting a PDF File

<input type="file" id="pdfFile" accept=".pdf">

Translate

The translate attribute tells to browser whether the element should be translated or not. It can have 2 values: “yes” or “no”.

  <body>
      <p translate="no">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos fugit
        corporis vel modi rerum asperiores inventore aperiam dolore, tempore sint
        aut eius dolores, aspernatur ducimus harum qui accusantium debitis in
        repellat neque. Ducimus, quia. Labore qui neque quasi.
      </p>
    </body>

Poster

The poster attribute is used that time when your video is downloading, and that time the poster attribute shows the image.

<video controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" poster="posterImage.png"></video>

Result:

Pattern

The pattern attribute of the <input> element is used to specify the element by its value, like a restriction. You can use the pattern attribute with various input types like text, date, search, URL, tel, email, and password.

<form>
   <input name="username" id="username" pattern="[A-Za-z0-9]+"> 
</form>

Autocomplete

The autocomplete attribute tells to browser to fill automatically with the help of the browser database. You can use the autocomplete attribute with various types like text, search, URL, tel, email, password, date pickers, range, and color. You can use this attribute with the <input> elements or <form> elements.

<input name="credit-card-number" id="credit-card-number" autocomplete="off">

Autofocus

The autofocus attribute is a Boolean attribute that indicates the element is focused when the page is loaded. You can use the autofocus attribute with <button>, <input>, <keygen>, <select>, or <textarea> elements.

<input type="text" autofocus>

Using autofocus Attribute With select Element

<select name="languages" id="languages">
       <option value="C++">C++ </option>
       <option value="Python">Python</option>
       <option value="JavaScript">JavaScript</option>
       <option value="Java">Java</option>
</select>

Using autofocus Attribute With textarea Element

<textarea autofocus>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</textarea>

Make Easy Way With JavaScript One-Liners

One-liner code helps to achieve more features with less code. You can use several JavaScript one-liners to code like a pro. This is the ending line of our post on 10 Useful Tags and Attributes in HTML, hope you learn something from it, if you like please share your thought.

10 Useful Tags and Attributes in HTML You Must Know