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 ...
For further actions, you may consider blocking this person and/or reporting abuse
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 emptyalt
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. Thetitle
attribute then provides the full expansion of the term.Thank you so much for your feedback, Luke!
I appreciate it:)
Thank you for writing this great article! I wanted to call out two caveats concerning the
base
element:It is important to be aware that the above will impact all other elements on the page which has either an
href
ortarget
attribute. Therefore, the following will try to load the CSS file from the base domain:Also, if you have a
form
element with atarget
attribute, it will be affected by thetarget
on thebase
element as well. Concerning the first example where it will impact thelink
element. Thebase
element only impacts elements that come after it in source order so the following will avoid the problem: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?
Hey! So when you have the following in the head of your HTML document:
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:What the browser will do is add the base
href
to the above: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 thelink
element is before thebase
element in the HTML Source order so:And not:
If you have an anchor element the same thing will apply:
This will become:
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:Will become:
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!
okay nice. I get it now. Thanks for making it clear.
You are very welcome.
Thank you so much for mentioning. I appreciate it 🙌
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: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:Thanks for mentioning. I appreciate it:)
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.Thanks a lot for your feedback!
Yes, definitely. Doing research and understanding the practicality and use cases is mandatory.
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.
Thanks for your feedback!
Awesome tips collection. Thank you for sharing them in this easy to understand format
Thank you so much for checking out, Lucian!
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.
Thank you so much for checking out!
damn man , nice and sweet article.
Thank you so much!
Thanks you
My pleasure :)
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.
I'm glad you liked it:)
Thanks for sharing about DevSamples.
Another addition - for abbreviations the element can be used like:
<abbr title="World Health Organization">WHO</abbr>
Thanks for adding. I appreciate it:)
WOW! Thank you so much for this! This is immensely helpful! 🔥
I'm really happy you found it helpful. Thanks for checking out, Anita!
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!
Thank you so much for that.
I really appreciate it:)
Very informative, thanks for sharing.
Thanks for checking out:)
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
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.
So sorry to hear that. Thanks for your feedback!
I'll keep that in mind.
I like it thanks
I'm happy you liked it!
Awesome collection
Thanks for checking out!
Thanks dear dev 💛
My pleasure:)
Thanks for the great post!!!!
Thanks for checking out 🙌🏻
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
I'm glad you found something new here.
Thanks for your feedback!
great
Thanks a lot:)
"Thank you for the excellent post!"
My pleasure!
Wonderful collection. Thanks for sharing
I'm glad you liked it:)
A great list of:
:-)
Thanks for checking out, Mark!
Great collection Shefali 🙌
Thank you!
Thanks for checking out, Akash!
great tips,
Thanks for your feedback!
Interesting collections!!
Thanks for checking out 🙌
Nice tips, thanks for sharing
I'm glad you liked it. Thanks for checking out 🙌
i was preparing for interview .it helped me a lot
I'm really glad you found it helpful. Thanks for checking out!
Amazing tips
Thanks for your feedback!
Nice article, thanks.
I'm glad you liked it:)
15 years in web development and still didn't know some of these utilities. Thanks :)
I'm glad you learned something new here. Thanks for checking out:)
Wow, these tips are so useful, Shefali!!
Thank you so much for sharing quality content <3
Thanks a lot for checking out, Madhu!
Very useful article @devshefali
I'm glad you found it useful. Thanks for checking out!
Thank you for your amazing efforts it means a lot for beginners.
I'm really happy to hear that. Thank you so much!
Thanks for sharing. The use of semantic HTML must be promoted in every modern day web development. It also paves way for assistive technologies.
Thanks for your feedback :)
Thanks for sharing!
Thanks for checking out!
Wow!.. Alucinante o Gracias pretty!! Por los tip.. Bleessings!!
Aprendiendo de todos un poquito más!.. May GOD always bless you it all..
Thank you so much 🙏
Impressive 🤯
Thank you so much!
Great html tutorial
Thanks for checking out!
Thanks for the article, now I'm super strong in writing html😄
Glad to know that😁
is base necessary as b default the base url will be the site domain?
great tips tho