DEV Community

Cover image for 20 Days of HTML(Learn 20 amazing things about HTML) Part 2
Km-js
Km-js

Posted on

2 1 1 1 1

20 Days of HTML(Learn 20 amazing things about HTML) Part 2

Day 11- Drag and Drop

Any HTML element can be dragged and dropped irrespective of its native behavior.⁣
⁣It is done by using the global attribute draggable i.e setting its value to true.⁣

Events like ondragstart, ondragover, etc. are used to make elements more functional.⁣
⁣Images and links are by default draggable.

<p draggable="true">
  Drag and Drop me on the other side!
</p>
Enter fullscreen mode Exit fullscreen mode

Day 12- Progress and Meter Elements

  1. <progress> element:
    • Displays a progress bar showing the completion progress of a task.⁣⁣
    • It has two attributes max and value.⁣⁣
    • No min attribute, the minimum value is always 0.⁣⁣ ⁣⁣
  2. <meter> element:
    • Displays either a fractional value or a value within a range.⁣⁣
    • It is not only to show the progress(high), it can also fluctuate(high or low).⁣⁣
    • Has the following attributes: max, min, high, low, optimum.
<label for="download">Download Progress</label>
<progress id="download" max="100" value="50">
</progress>
<br />
<label for="temp">Temperature Meter:</label>
<meter id="temp" min="0" max="100" low="30" high="60" optimum="80" value="10">
</meter>
Enter fullscreen mode Exit fullscreen mode

Day 13- Play some Music

<audio> element provides a way to add audio resources to a web page without the need to use any other plugin.⁣
Just include a path to the media inside the src attribute.⁣

A fallback text is enclosed within the tag to be shown to browsers that don't support the element.⁣

By default, the browser does not show any controls. ⁣
To add the ability for users to play, pause, adjust volume, etc. 'controls' attribute can be used.

<audio controls src="dope_music.mp3">
  Your browser does not support the audio element.
</audio>
Enter fullscreen mode Exit fullscreen mode

Day 14- Show Insertion and Deletion

<ins> element indicates text that has been added to the document.⁣⁣
<del> is used for the text that has been deleted from the document.⁣⁣

So far, both of these have accessibility concerns which can be overcome by using, before and after pseudo-elements with the CSS content property.

<p>Go to a
  <del>movie</del>
  <ins>conference</ins>
  this weekend.
</p>
Enter fullscreen mode Exit fullscreen mode

Day 15- Word Break Opportunity

⁣When a word is too long, and you don't want the browser to break it at the random place, <wbr> helps to break the word where you want.⁣

The <wbr> element specifies a position within text where it would be appropriate to add a line-break.

<p>This is a lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggg<wbr>word.</p>
Enter fullscreen mode Exit fullscreen mode

Day 16- Best Practices

A great place to find the HTML best practices to write maintainable and scalable code.

HTML best practices

Day 17- Adding Color picker and Date picker into the forms

<input> element with the attribute of type="color" provides an interface of color picker or the user can also enter the color in hexadecimal format.⁣

<input> element with the attribute of type="date" creates a date picker or lets the user enter a date.⁣

<label>Choose Color:
</label>
<input type="color" value="#ffffff" />
Enter fullscreen mode Exit fullscreen mode

Day 18- Setting Shortcut Keys

⁣The accesskey is a global attribute that specifies a shortcut key to activate an element.⁣

Shortcut keys can be accessed in number of ways according to the browser such as:⁣
ctrl + alt + accesskey⁣
OR⁣
alt + accesskey
OR⁣
alt + shift + accesskey

Day 19- Make Input fields readonly

⁣The readonly attribute prevents the editing on an input field by the user i.e. it makes the elements immutable.⁣

These readonly elements can be styled by :read-only and :read-write pseudo classes.⁣

It is different from the disabled attribute as the elements with readonly attribute are focusable whereas this isn't the case with the disabled.

<label for="country">Country:
</label>
<input type="text" name="country" value="India" readonly>
Enter fullscreen mode Exit fullscreen mode

Day 20- Ways to improve Accessibility

  1. Use semantic elements.⁣ ⁣
  2. A label should be associated with every form control.⁣ ⁣
  3. Alternative text should be included for images.⁣ ⁣
  4. Use tabindex="0" to add an element that does not normally receive focus, such as <div> or <span>.⁣ ⁣
  5. Use ARIA roles and attributes to provide additional meaning.For example, role="search" for search functionality.

Thanks for reading ❤

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay