In my very last article I shared some JavaScript tips and tricks In this article I will be covering HTML tips and tricks ✨.
The start attribute
Start attribute allows you to specify starting number for your list items.
<ol start="20">
<li>Pineapple🍍</li>
<li>Apple🍎</li>
<li>Greenapple 🍏</li>
</ol>
The contenteditable attribute
Set contenteditable attribute to true and your content will be editable.
<p contenteditable="true">It Can be something about you.</p>
The required attribute
Set required attribute on input fields that are mandatory to be filled.
<input type="password" required>
The mark tag
Use mark instead of styling spans to highlight text.
<p>This is <mark>important</mark> </p>
The lazy loading attribute
Add lazy loading attribute on media elements this will enhance page performance by defer the loading of media elements until the user scrolls to them.
<img src='image.jpg' loading='lazy' alt='Alternative text'>
The kbd tag
Use kbd tag when presenting keyboard inputs.
<p>Press <kbd>alt</kbd> & <kbd>tab</kbd> to change window</p>
The Details & Summary tag
You can craft nice looking accordions using details and summary elements this has built built in keyboard accessibility features.
<details>
<summary>Can i save and love ❤️ this article?</summary>
<p>Follow on twitter for more stuff.</p>
<p>Save for updates.</p>
</details>
The accept attribute
Accept attributes allows us to specify which types of files user can upload.
<input type="file" accept=".jpg, .pdf">
The favicon
Set link rel to icon to define favicon
<link rel="icon" href="logo.webp">
The picture tag
Picture tag allows you to present images of different aspect ratios based on screen sizes picture tag is awesome for implementing reponsive web design.
<picture>
<source srcset="large.webp" media="(min-width: 1200px)">
<source srcset="medium.webp" media="(min-width: 800px)">
<img src="regular.jpg" />
</picture>
The dir attribute
You can set your text direction from right to left or left to right using direction set dir to auto this will automatically change text direction based on language.
<p dir="rtl">Awesome!</p>
The spellcheck attribute
Use spellcheck attribute to check for spelling errors.
<input type="email" spellcheck="true">
The meta description
Add meta descriptions in the head of your Html to have an indirect impact on search engine optimization meta description represents the text that appears beneath the site name on search engine result page.
<meta name="description" content="Gitpod streamlines developer workflows by providing prebuilt, collaborative developer environments in your browser - powered by VS Code.">
The abbr tag
Abbreviate your content using abbr tag.
<abbr title="National Aeronautics and Space Administration">NASA 🚀</abbr>
The disabled attribute
Use disabled attribute for options element to disable a item from dropdown.
<select>
<option>HTML</option>
<option>CSS</option>
<option disabled>REACT</option>
</select>
The poster attribute
Poster attributes allows you to specify a image to be displayed while the video is downloading or until the user hits the play button.
<video src="video.mp4" poster="flowers.jpg"></video>
The reversed attribute
Using reversed attribute you can reverse the order of list numbers.
<ol reversed>
<li>Pineapple🍍</li>
<li>Apple🍎</li>
<li>Greenapple 🍏</li>
</ol>
Hope you enjoyed reading this article! if you have something to say or have any questions feel 💯 free to comment below.
Happy Coding ✨❤️
Top comments (15)
awesome
Always good to refresh on some HTML attributes/tags! 🤠 Thanks for sharing this with us Syed! 😊
Good coverage of HTML specifics . Really liked it.
Vanilla JavaScript lolzz
I am getting goosebumps by reading the post. Very informative post.
Thank Syed.
Some HTML nuggets I had forgotten about.
A great share.
Nice.. Thanks for sharing.
Glad to learn something new today.
Many thanks!
Loved it. It's unusual for me to find an HTML post with most of the content that is new to me.
Thanks for this. Not everything is new, but it is still good to read again about some useful tags!
Amazing blog 🔥
Really enjoyed! There were some that I knew but had forgotten how to use. And others totally new to me, thank you very much!😊
thank u, nice refresher.
Great list! A lot of these I've never heard of, and they're actually useful, it seems. Thanks!
Woah this is nice!