DEV Community

Cover image for 21 HTML Tips You Must Know About
Shefali
Shefali

Posted on • Originally published at shefali.dev

21 HTML Tips You Must Know About

#webdev #beginners #html #programming

In this post, I’ll share 21 HTML Tips with code snippets that can boost your coding skills.

Let’s jump right into it.🚀

Creating Contact Links

Create clickable email, phone call, and SMS links using HTML:

<!-- Email link -->
<a href="mailto:name@example.com"> Send Email </a>

<!-- Phone call link -->
<a href="tel:+1234567890"> Call Us </a>

<!-- SMS link -->
<a href="sms:+1234567890"> Send SMS </a>
Enter fullscreen mode Exit fullscreen mode

Creating Collapsible Content

You can use the <details> and <summary> tags, when you want to include collapsible content on your web page.

The <details> tag creates a container for hidden content, while the <summary> tag provides a clickable label to toggle the visibility of that content.

<details>
  <summary>Click to expand</summary>
  <p>This content can be expanded or collapsed.</p>
</details>
Enter fullscreen mode Exit fullscreen mode

Utilizing Semantic Elements

Choose semantic elements over non-semantic elements for your websites. They make your code meaningful and improve structure, accessibility, and SEO.

HTML semantic and non-semantic elements

Grouping Form Elements

Use the <fieldset> tag to group related elements in a form and the <legend> tag with <fieldset> to define a title for the <fieldset> tag.

This is useful for creating more efficient and accessible forms.

<form>
   <fieldset>
      <legend>Personal details</legend>
      <label for="firstname">First name:</label>
      <input type="text" id="firstname" name="firstname" />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <label for="contact">Contact:</label>
      <input type="text" id="contact" name="contact" />
      <input type="button" value="Submit" />
   </fieldset>
</form>
Enter fullscreen mode Exit fullscreen mode

Enhancing Dropdown Menus

You can use the <optgroup> tag to group related options in a <select> HTML tag.

This can be used when you are working with large dropdown menus or a long list of options.

<select>
   <optgroup label="Fruits">
      <option>Apple</option>
      <option>Banana</option>
      <option>Mango</option>
   </optgroup>
   <optgroup label="Vegetables">
      <option>Tomato</option>
      <option>Broccoli</option>
      <option>Carrot</option>
   </optgroup>
</select>
Enter fullscreen mode Exit fullscreen mode

Improving Video Presentation

The poster attribute can be used with the <video> element to display an image until the user plays the video.

<video controls poster="image.png" width="500">
  <source src="video.mp4" type="video/mp4 />
</video>
Enter fullscreen mode Exit fullscreen mode

Supporting Multiple Selections

You can use the multiple attribute with the <input> and <select> elements to allow users to select/enter multiple values at once.

<input type="file" multiple />
<select multiple>
    <option value="java">Java</option>
    <option value="javascript">JavaScript</option>
    <option value="typescript">TypeScript</option>
    <option value="rust">Rust</option>
</select>
Enter fullscreen mode Exit fullscreen mode

Display Text as Subscript and Superscript

The <sub> and <sup> elements can be used to display the text as subscript and superscript respectively.

HTML <sub> and <sup> elements

Creating Download Links

You can use the download attribute with the <a> element to specify that when a user clicks the link, the linked resource should be downloaded rather than navigated to.

<a href="document.pdf" download="document.pdf"> Download PDF </a>
Enter fullscreen mode Exit fullscreen mode

Defining Base URL for Relative Links

You can use the <base> tag to define the base URL for all relative URLs in a web page.

This is handy when you want to create a shared starting point for all relative URLs on a web page, making it easier to navigate and load resources.

<head>
   <base href="https://shefali.dev" target="_blank" />
</head>
<body>
   <a href="/blog">Blogs</a>
   <a href="/get-in-touch">Contact</a>
</body>
Enter fullscreen mode Exit fullscreen mode

Control Image Loading

The loading attribute with the <img> element can be used to control how the browser loads the image. It has three values: “eager”, “lazy”, and “auto”.

<img src="picture.jpg" loading="lazy">
Enter fullscreen mode Exit fullscreen mode

Managing Translation Features

You can use the translate attribute to specify whether the content of an element should be translated by the browser’s translation features.

<p translate="no">
  This text should not be translated.
</p>
Enter fullscreen mode Exit fullscreen mode

Setting Maximum Input Length

By using the maxlength attribute, you can set the maximum number of characters entered by the user in an input field.

<input type="text" maxlength="4">
Enter fullscreen mode Exit fullscreen mode

Setting Minimum Input Length

By using the minlength attribute, you can set the minimum number of characters entered by the user in an input field.

<input type="text" minlength="3">
Enter fullscreen mode Exit fullscreen mode

Enabling Content Editing

Use the contenteditable attribute to specify whether the element’s content is editable or not.

It allows users to modify the content within the element.

<div contenteditable="true">
   You can edit this content.
</div>
Enter fullscreen mode Exit fullscreen mode

Controlling Spell Checking

You can use the spellcheck attribute with <input> elements, content-editable elements, and <textarea> elements to enable or disable spell-checking by the browser.

<input type="text" spellcheck="true"/>
Enter fullscreen mode Exit fullscreen mode

Ensuring Accessibility

The alt attribute specifies an alternate text for an image if the image cannot be displayed.

Always include descriptive alt attributes for images to improve accessibility and SEO.

<img src="picture.jpg" alt="Description for the image">
Enter fullscreen mode Exit fullscreen mode

Defining Target Behavior for Links

You can use the target attribute to specify where a linked resource will be displayed when clicked.

<!-- Opens in the same frame -->
<a href="https://shefali.dev" target="_self">Open</a>

<!-- Opens in a new window or tab -->
<a href="https://shefali.dev" target="_blank">Open</a>

<!-- Opens in the parent frame -->
<a href="https://shefali.dev" target="_parent">Open</a>

<!-- Opens in the full body of the window -->
<a href="https://shefali.dev" target="_top">Open</a>

<!-- Opens in the named frame -->
<a href="https://shefali.dev" target="framename">Open</a>
Enter fullscreen mode Exit fullscreen mode

Providing Additional Information

The title attribute can be used to provide additional information about an element when a user hovers over it.

<p title="World Health Organization">WHO</p>
Enter fullscreen mode Exit fullscreen mode

Accepting Specific File Types

You can use the accept attribute to specify the types of files accepted by the server (only for file type). This is used with the <input> element.

<input type="file" accept="image/png, image/jpeg" />
Enter fullscreen mode Exit fullscreen mode

Optimizing Video Loading

You can make video files load faster for smoother playback by using the preload attribute with <video> element.

<video src="video.mp4" preload="auto">
   Your browser does not support the video tag.
</video>
Enter fullscreen mode Exit fullscreen mode

That’s all for today.

I hope it was helpful.

Thanks for reading.

For more content like this, click here.

You can also follow me on X(Twitter) to get daily tips on web development.

Keep Coding!!
Buy Me A Coffee

Top comments (92)

Collapse
 
ludamillion profile image
Luke Inglis •

Awesome list. A lot of lists like this include elements that are obsolete or of limited and specific use. These are all great.

Two little additions.

In terms of accessibility it is important to note that you shouldn’t add alt text for an image just to have it there. If the image is meaningful to the information being presented then yes it’s necessary. However, if the image is purely decorative then you should have an empty alt attribute. This will mark the image as presentational and it will be ignored by screen readers.

In the example use case you use for the title attribute you could also use the abbr element which indicates that the contents of the element are an abbreviation. The title attribute then provides the full expansion of the term.

Collapse
 
devshefali profile image
Shefali •

Thank you so much for your feedback, Luke!

I appreciate it:)

Collapse
 
schalkneethling profile image
Schalk Neethling •

Thank you for writing this great article! I wanted to call out two caveats concerning the base element:

<base href="https://shefali.dev" target="_blank" />
Enter fullscreen mode Exit fullscreen mode

It is important to be aware that the above will impact all other elements on the page which has either an href or target attribute. Therefore, the following will try to load the CSS file from the base domain:

<link rel="stylesheet" type="text/css" href="css/pink.css" media="screen" />
Enter fullscreen mode Exit fullscreen mode

Also, if you have a form element with a target attribute, it will be affected by the target on the base element as well. Concerning the first example where it will impact the link element. The base element only impacts elements that come after it in source order so the following will avoid the problem:

<base href="https://shefali.dev" target="_blank" />

<link rel="stylesheet" type="text/css" href="css/pink.css" media="screen" />
Enter fullscreen mode Exit fullscreen mode
Collapse
 
shalomkerry profile image
shalomkerry •

hey there, I couldn't quite understand what you tried to say here. Can you explain what you have to do to avoid the problem?

Collapse
 
schalkneethling profile image
Schalk Neethling •

Hey! So when you have the following in the head of your HTML document:

<base href="https://shefali.dev" target="_blank" />
Enter fullscreen mode Exit fullscreen mode

It means that all other elements that come after the above in the HTML document and have a href attribute with a relative URL will be affected by the above. For example, let's say you are including a stylesheet as follows:

<link rel="stylesheet" type="text/css" href="/css/pink.css" media="screen" />
Enter fullscreen mode Exit fullscreen mode

What the browser will do is add the base href to the above:

<link rel="stylesheet" type="text/css" href="https://shefali.dev/css/pink.css" media="screen" />
Enter fullscreen mode Exit fullscreen mode

This might be exactly what you wanted, but it might also not be. To avoid impacting the link element you would need to ensure that the link element is before the base element in the HTML Source order so:

<link rel="stylesheet" type="text/css" href="/css/pink.css" media="screen" />
<base href="https://shefali.dev" target="_blank" />
Enter fullscreen mode Exit fullscreen mode

And not:

<base href="https://shefali.dev" target="_blank" />
<link rel="stylesheet" type="text/css" href="/css/pink.css" media="screen" />
Enter fullscreen mode Exit fullscreen mode

If you have an anchor element the same thing will apply:

<a href="/portfolio.html">View my portfolio</a>
Enter fullscreen mode Exit fullscreen mode

This will become:

<a href="https://shefali.dev/portfolio.html">View my portfolio</a>
Enter fullscreen mode Exit fullscreen mode

Again this might be totally fine. The other thing is the target attribute will also impact the above so all anchor links on the page will open in a new tab/window. But also, any form on the page will also be impacted. In other words:

<form name="contact" action="/contact" method ="post">
....
</form>
Enter fullscreen mode Exit fullscreen mode

Will become:

<form name="contact" action="/contact" method ="post" target="_blank">
....
</form>
Enter fullscreen mode Exit fullscreen mode

Things can also get trickier when you consider the complete URL parsing algorithm that is used. You can read more about that here: schalkneethling.github.io/html-com...

I hope this helps, but should you have any more questions, let me know. Happy coding!

Thread Thread
 
shalomkerry profile image
shalomkerry •

okay nice. I get it now. Thanks for making it clear.

Thread Thread
 
schalkneethling profile image
Schalk Neethling •

You are very welcome.

Collapse
 
devshefali profile image
Shefali •

Thank you so much for mentioning. I appreciate it 🙌

Collapse
 
henrywoody profile image
Henry Woody •

Good list, I had never heard of the <base> element before so I did some research. You should definitely understand the need for and effect of using the <base> element on your site before you add it. I found this StackOverflow question helpful here.

Collapse
 
devshefali profile image
Shefali •

Thanks a lot for your feedback!

Collapse
 
bisrategebriel profile image
Bisrategebriel Fisseha •

Yes, definitely. Doing research and understanding the practicality and use cases is mandatory.

Collapse
 
nikunjbhatt profile image
Nikunj Bhatt • • Edited

One tip for download link. We can specify a different name of the file to download instead on its actual name using the download attribute as following:

<a href="document.pdf" download="My Document.pdf"> Download PDF </a>
Enter fullscreen mode Exit fullscreen mode

With the above code, the linked PDF file will be saved as "My Document.pdf" by default instead of "document.pdf".

And, to correct your tip, we just need to write the download attribute without the value to allow downloading the file. So the following is valid to allow download of the file without changing the file name:

<a href="document.pdf" download> Download PDF </a>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
devshefali profile image
Shefali •

Thanks for mentioning. I appreciate it:)

Collapse
 
devluc profile image
Devluc •

Awesome tips collection. Thank you for sharing them in this easy to understand format

Collapse
 
devshefali profile image
Shefali •

Thank you so much for checking out, Lucian!

Collapse
 
francoisaudic profile image
francoisaudic •

Warning for accessibility, not every single image need an alternative, because some are purely decorative, not transmitting any kind of useful information for the user.
For decorative image, "alt" attribute need to be there, but be left empty.
If you put a non-empty "alt" attribute on a decorative image, you have to hide it to assistive technologies with an aria-hidden="true" attribute.

Collapse
 
devshefali profile image
Shefali •

Thanks for your feedback!

Collapse
 
anitaolsen profile image
Anita Olsen • • Edited

WOW! Thank you so much for this! This is immensely helpful! 🔥

Collapse
 
devshefali profile image
Shefali •

I'm really happy you found it helpful. Thanks for checking out, Anita!

Collapse
 
gadrawingz profile image
Gad Iradufasha •

Thanks for sharing essential information like this.

This is for those people who still don't keep the web accessibility concept in mind when they are designing their web pages using HTML5!

Thank you again!
I am not broke at the moment, I could be buying you a cup of coffee!

Collapse
 
devshefali profile image
Shefali •

Thank you so much for that.

I really appreciate it:)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
devshefali profile image
Shefali •

I'm glad you liked it:)

Thanks for sharing about DevSamples.

Collapse
 
naveedseo110 profile image
naveedseo110 • • Edited

Thank you for sharing the 21 HTML tips Your insights have provided valuable guidance and inspiration for enhancing our HTML skills. Your willingness to share knowledge is greatly appreciated, and we're excited to implement these tips in our coding journey. Here's to continuous learning and growth in the world of web development.

Collapse
 
devshefali profile image
Shefali •

Thank you so much for checking out!

View full discussion (92 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Read next

empiree profile image

How to Become a Successful Software Developer in 2024

Oleg Dubovoi -

manashjb profile image

Stop Trying to Learn Everything -Focus on These 5 Key Skills Every Developer Needs

Manash Jyoti Baruah -

hanzla-baig profile image

Update Front-end Dev.to Challenge

Hanzla Baig -

lorebrada00 profile image

Mastering software architecture patterns PART 2

Lorenzo Bradanini -