DEV Community

Cover image for 21 HTML Tips You Must Know About

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

Collapse
 
smx7d profile image
Sloomy

damn man , nice and sweet article.

Collapse
 
devshefali profile image
Shefali

Thank you so much!

Collapse
 
skipperhoa profile image
Hòa Nguyễn Coder

Thanks you

Collapse
 
devshefali profile image
Shefali

My pleasure :)

Collapse
 
hosseinyazdi profile image
Hossein Yazdi

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.

Collapse
 
devshefali profile image
Shefali

I'm glad you liked it:)

Thanks for sharing about DevSamples.

Collapse
 
wraptile profile image
Bernardas Ališauskas

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

Collapse
 
devshefali profile image
Shefali

Thanks for adding. I appreciate it:)

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
 
faraid profile image
Farouk Ado Salihi

Very informative, thanks for sharing.

Collapse
 
devshefali profile image
Shefali

Thanks for checking out:)

Collapse
 
faraid profile image
Farouk Ado Salihi

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

Collapse
 
fever905 profile image
Fever905

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.

Collapse
 
devshefali profile image
Shefali

So sorry to hear that. Thanks for your feedback!

I'll keep that in mind.

Collapse
 
uzeyir-yariz profile image
uzeyir-yariz

I like it thanks

Collapse
 
devshefali profile image
Shefali

I'm happy you liked it!

Collapse
 
mdnafeed profile image
Md Nafeed Razy Akram

Awesome collection

Collapse
 
devshefali profile image
Shefali

Thanks for checking out!

Collapse
 
yeasin2002 profile image
Md Kawsar Islam Yeasin

Thanks dear dev 💛

Collapse
 
devshefali profile image
Shefali

My pleasure:)

Collapse
 
77pintu profile image
77pintu

Thanks for the great post!!!!

Collapse
 
devshefali profile image
Shefali

Thanks for checking out 🙌🏻

Collapse
 
sardiusjay profile image
SardiusJay

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

Collapse
 
devshefali profile image
Shefali

I'm glad you found something new here.

Thanks for your feedback!

Collapse
 
nyangweso profile image
Rodgers Nyangweso

great

Collapse
 
devshefali profile image
Shefali

Thanks a lot:)

Collapse
 
77pintu profile image
77pintu

"Thank you for the excellent post!"

Collapse
 
devshefali profile image
Shefali

My pleasure!

Collapse
 
ganeshpulsars profile image
Ganesh

Wonderful collection. Thanks for sharing

Collapse
 
devshefali profile image
Shefali

I'm glad you liked it:)

Collapse
 
crowleymark profile image
Mark Crowley

A great list of:

  • new things to try
  • things I had forgotten

:-)

Collapse
 
devshefali profile image
Shefali

Thanks for checking out, Mark!

Collapse
 
akashj2342 profile image
Akash

Great collection Shefali 🙌
Thank you!

Collapse
 
devshefali profile image
Shefali

Thanks for checking out, Akash!

Collapse
 
javinpaul profile image
javinpaul

great tips,

Collapse
 
devshefali profile image
Shefali

Thanks for your feedback!

Collapse
 
bisrategebriel profile image
Bisrategebriel Fisseha

Interesting collections!!

Collapse
 
devshefali profile image
Shefali

Thanks for checking out 🙌

Collapse
 
somadevtoo profile image
Soma

Nice tips, thanks for sharing

Collapse
 
devshefali profile image
Shefali

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

Collapse
 
pekachu17 profile image
AADARSH B.K.

i was preparing for interview .it helped me a lot

Collapse
 
devshefali profile image
Shefali

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

Collapse
 
razielrodrigues profile image
Raziel Rodrigues

Amazing tips

Collapse
 
devshefali profile image
Shefali

Thanks for your feedback!

Collapse
 
brainbrix profile image
Heiko Spindler

Nice article, thanks.

Collapse
 
devshefali profile image
Shefali

I'm glad you liked it:)

Collapse
 
templatesjungle profile image
TemplatesJungle

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

Collapse
 
devshefali profile image
Shefali

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

Collapse
 
madhusaini22 profile image
Madhu Saini

Wow, these tips are so useful, Shefali!!

Thank you so much for sharing quality content <3

Collapse
 
devshefali profile image
Shefali

Thanks a lot for checking out, Madhu!

Collapse
 
raghuaryan profile image
Raghu Aryan

Very useful article @devshefali

Collapse
 
devshefali profile image
Shefali

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

Collapse
 
rohanmistry231 profile image
Rohan Mistry

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

Collapse
 
devshefali profile image
Shefali

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

Collapse
 
zahidnazir profile image
Khan Zahid Nazir

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

Collapse
 
devshefali profile image
Shefali

Thanks for your feedback :)

Collapse
 
qwqq profile image
Qwqq

Thanks for sharing!

Collapse
 
devshefali profile image
Shefali

Thanks for checking out!

Collapse
 
yakipey profile image
Yeimir E. Peinado

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

Collapse
 
devshefali profile image
Shefali

Thank you so much 🙏

Collapse
 
louaiboumediene profile image
Louai Boumediene

Impressive 🤯

Collapse
 
devshefali profile image
Shefali

Thank you so much!

Collapse
 
epicurus1 profile image
epicurus

Great html tutorial

Collapse
 
devshefali profile image
Shefali

Thanks for checking out!

Collapse
 
helio609 profile image
Helio

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

Collapse
 
devshefali profile image
Shefali

Glad to know that😁

Collapse
 
philsav2017 profile image
Philip • Edited

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

great tips tho