DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for HTML tips and tricks.
Syed Mohsin Raza
Syed Mohsin Raza

Posted on • Updated on

HTML tips and tricks.

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>
Enter fullscreen mode Exit fullscreen mode

3 items of fruits starting from 20 20 is specified using the start attribute3 items of fruits

The contenteditable attribute

Set contenteditable attribute to true and your content will be editable.

 <p contenteditable="true">It Can be something about you.</p> 
Enter fullscreen mode Exit fullscreen mode

illustration of editable paragraph achived using contenteditable attribute

The required attribute

Set required attribute on input fields that are mandatory to be filled.

<input type="password" required>
Enter fullscreen mode Exit fullscreen mode

The mark tag

Use mark instead of styling spans to highlight text.

 <p>This is <mark>important</mark> </p>
Enter fullscreen mode Exit fullscreen mode

highlighted text achieved with mark tag

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'>
Enter fullscreen mode Exit fullscreen mode

The kbd tag

Use kbd tag when presenting keyboard inputs.

<p>Press <kbd>alt</kbd> & <kbd>tab</kbd> to change window</p>
Enter fullscreen mode Exit fullscreen mode

illustration for kbd tag

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>
Enter fullscreen mode Exit fullscreen mode

accordion with question and answer

The accept attribute

Accept attributes allows us to specify which types of files user can upload.

<input type="file" accept=".jpg, .pdf">
Enter fullscreen mode Exit fullscreen mode

The favicon

Set link rel to icon to define favicon

<link rel="icon" href="logo.webp">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

some text written from right to left

The spellcheck attribute

Use spellcheck attribute to check for spelling errors.

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

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.">
Enter fullscreen mode Exit fullscreen mode

Gitpod.io url with output of meta description

The abbr tag

Abbreviate your content using abbr tag.

<abbr title="National Aeronautics and Space Administration">NASA πŸš€</abbr>
Enter fullscreen mode Exit fullscreen mode

Abbreviation of word showing on hover over the word

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>
Enter fullscreen mode Exit fullscreen mode

Unable to select a option from list because of disabled attribute

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

list numbers starting in reversed order starting from 3 and ending at 1 instead of 1 to 3

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 (14)

Collapse
pierre profile image
Pierre-Henry Soria ✨ • Edited on

Always good to refresh on some HTML attributes/tags! 🀠 Thanks for sharing this with us Syed! 😊

Collapse
terenze profile image
Terenze

Thank Syed.
Some HTML nuggets I had forgotten about.
A great share.

Collapse
jfbrennan profile image
Jordan Brennan

Nice! I love to see vanilla HTML posts

Collapse
styletheandriod profile image
Stylestheandriod

Vanilla JavaScript lolzz

Collapse
dhanush9952 profile image
Dhanush

Nice.. Thanks for sharing.

Collapse
musadarj profile image
Sammy B.

Glad to learn something new today.
Many thanks!

Collapse
coderlifeisawesome profile image
lifeascoder

I am getting goosebumps by reading the post. Very informative post.

Collapse
cboles profile image
Chris Boles

Loved it. It's unusual for me to find an HTML post with most of the content that is new to me.

Collapse
curiousdev profile image
CuriousDev

Thanks for this. Not everything is new, but it is still good to read again about some useful tags!

Collapse
hyperloop profile image
Hyperloop007

Amazing blog πŸ”₯

Collapse
graciellesampaio profile image
Gracielle Sampaio

Really enjoyed! There were some that I knew but had forgotten how to use. And others totally new to me, thank you very much!😊

Collapse
mat3uszkek profile image
Mateusz SkrobiΕ›

thank u, nice refresher.

Collapse
risclover profile image
Sara (Risclover)

Great list! A lot of these I've never heard of, and they're actually useful, it seems. Thanks!

Collapse
vulcanwm profile image
Medea

Woah this is nice!

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.