DEV Community

21 HTML Tips You Must Know About

Shefali on April 06, 2024

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 ...

Read full post

Luke Inglis • Apr 6

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.

Shefali • Apr 7

Thank you so much for your feedback, Luke!

I appreciate it:)

Schalk Neethling • Apr 8

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" />

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" />

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" />

shalomkerry • Apr 10

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?

Schalk Neethling • Apr 10

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

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

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" />

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" />

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" />

And not:

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

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

<a href="/portfolio.html">View my portfolio</a>

This will become:

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

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>

Will become:

<form name="contact" action="/contact" method ="post" target="_blank">
....
</form>

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!

shalomkerry • Apr 10

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

Schalk Neethling • Apr 10

You are very welcome.

Shefali • Apr 8

Thank you so much for mentioning. I appreciate it 🙌

Nikunj Bhatt • Apr 10 • 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>

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>

Shefali • Apr 11

Thanks for mentioning. I appreciate it:)

Henry Woody • Apr 7

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.

Shefali • Apr 8

Thanks a lot for your feedback!

Bisrategebriel Fisseha • Apr 11

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

francoisaudic • Apr 10

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.

Shefali • Apr 11

Thanks for your feedback!

Devluc • Apr 6

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

Shefali • Apr 7

Thank you so much for checking out, Lucian!

Bernardas Ališauskas • Apr 7

Another addition - for abbreviations the element can be used like:
<abbr title="World Health Organization">WHO</abbr>

Shefali • Apr 7

Thanks for adding. I appreciate it:)

Hòa Nguyễn Coder • Apr 6

Thanks you

Shefali • Apr 7

My pleasure :)

Sloomy • Apr 6

damn man , nice and sweet article.

Shefali • Apr 7

Thank you so much!

Hossein Yazdi • Apr 10

This is insane, bookmarked it! Many thanks for the share.

For those who're interested in more stuff like this: DevSamples, is a good similar resource - it provides a list of code samples for you to copy and paste into your projects as needed.

Shefali • Apr 11

I'm glad you liked it:)

Thanks for sharing about DevSamples.

naveedseo110 • Apr 6 • 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.

Shefali • Apr 7

Thank you so much for checking out!

Gad Iradufasha • Apr 9

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!

Shefali • Apr 11

Thank you so much for that.

I really appreciate it:)

Anita Olsen*°•.☆ • Apr 6 • Edited

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

Shefali • Apr 7

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

Farouk Ado Salihi • Apr 7

Very informative, thanks for sharing.

Shefali • Apr 8

Thanks for checking out:)

Farouk Ado Salihi • Apr 8

Hi Shefali I have read about your profile and am very impressive, I am new to software development and I really wanna switch from IT Networking and Help Desk Support to Development, currently I am learning Drupal CMS and like I need to master HTML, CSS, PHP but I somehow get stuck along the way, is there any suggestion or guidance I can get from you?
Thanks

Fever905 • Apr 10

This article would be useful if it had live examples rather than just posting code. If I want to see any of these in action I have to create my own code.. and if I don't have the images it becomes a lot of work. Missed opportunity here. I stopped reading at the 5th one.

Shefali • Apr 11

So sorry to hear that. Thanks for your feedback!

I'll keep that in mind.

Md Nafeed Razy Akram • Apr 6

Awesome collection

Shefali • Apr 7

Thanks for checking out!

Md Kawsar Islam Yeasin • Apr 6

Thanks dear dev 💛

Shefali • Apr 7

My pleasure:)

SardiusJay • Apr 10

This is awesome and very helpful...

Discover some new elements in HTML for the first time, but for the editing by the user, after edit it will not affect the one in the codebase

Shefali • Apr 11

I'm glad you found something new here.

Thanks for your feedback!

Rodgers Nyangweso • Apr 10

great

Shefali • Apr 11

Thanks a lot:)

77pintu • Apr 10

"Thank you for the excellent post!"

Shefali • Apr 11

My pleasure!

Ganesh • Apr 10

Wonderful collection. Thanks for sharing

Shefali • Apr 11

I'm glad you liked it:)

Mark Crowley • May 2

A great list of:

new things to try
things I had forgotten

:-)

Shefali • May 12

Thanks for checking out, Mark!

Akash • Apr 15

Great collection Shefali 🙌
Thank you!

Shefali • Apr 18

Thanks for checking out, Akash!

javinpaul • Apr 9

great tips,

Shefali • Apr 11

Thanks for your feedback!

uzeyir-yariz • Apr 15

I like it thanks

Shefali • Apr 18

I'm happy you liked it!

Bisrategebriel Fisseha • Apr 11

Interesting collections!!

Shefali • Apr 13

Thanks for checking out 🙌

Soma • Apr 8

Nice tips, thanks for sharing

Shefali • Apr 8

I'm glad you liked it. Thanks for checking out 🙌

AADARSH B.K. • Apr 7

i was preparing for interview .it helped me a lot

Shefali • Apr 8

I'm really glad you found it helpful. Thanks for checking out!

Raziel Rodrigues • Apr 7

Amazing tips

Shefali • Apr 8

Thanks for your feedback!

Heiko Spindler • Apr 7

Nice article, thanks.

Shefali • Apr 7

I'm glad you liked it:)

TemplatesJungle • Apr 7

15 years in web development and still didn't know some of these utilities. Thanks :)

Shefali • Apr 7

I'm glad you learned something new here. Thanks for checking out:)

Madhu Saini • Apr 7

Wow, these tips are so useful, Shefali!!

Thank you so much for sharing quality content <3

Shefali • Apr 7

Thanks a lot for checking out, Madhu!

Raghu Aryan • Apr 7

Very useful article @devshefali

Shefali • Apr 7

I'm glad you found it useful. Thanks for checking out!

Rohan Mistry • Apr 28

Thank you for your amazing efforts it means a lot for beginners.

Shefali • May 2

I'm really happy to hear that. Thank you so much!

Khan Zahid Nazir • Apr 16

Thanks for sharing. The use of semantic HTML must be promoted in every modern day web development. It also paves way for assistive technologies.

Shefali • Apr 18

Thanks for your feedback :)

Qwqq • Apr 12

Thanks for sharing!

Shefali • Apr 18

Thanks for checking out!

Yeimir E. Peinado • Apr 11

Wow!.. Alucinante o Gracias pretty!! Por los tip.. Bleessings!!
Aprendiendo de todos un poquito más!.. May GOD always bless you it all..

Shefali • Apr 13

Thank you so much 🙏

Louai Boumediene • Apr 9

Impressive 🤯

Shefali • Apr 11

Thank you so much!

epicurus • Apr 8

Great html tutorial

Shefali • Apr 11

Thanks for checking out!

Helio • Apr 7

Thanks for the article, now I'm super strong in writing html😄

Shefali • Apr 7

Glad to know that😁

Philip • Apr 11 • Edited

is base necessary as b default the base url will be the site domain?

great tips tho