DEV Community

Cover image for 20 Days of HTML(Learn 20 amazing things about HTML) Part 2
theindiancodinggirl
theindiancodinggirl

Posted on

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>

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>

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>

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>

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>

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" />

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>

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 ❤

Twitter
Instagram

Top comments (10)

Collapse
 
ghost profile image
Ghost • Edited

Datepicker!, how long have I hated JS datepickers and the day calendars where invented. I think a big part of my general dislike of JS and jQuery are datepickers.

Thanks a lot, I'm more of a backend guy but is good to know that, the day JS becomes unnecessary in the front-end for me, is getting closer.

I will sleep better tonight, many thanks :)

(you just got my unicorn of the week)

Collapse
 
theindiancodinggrl profile image
theindiancodinggirl

Aww..always happy to help😊

Collapse
 
sleeplessyogi profile image
Sleepless Yogi

Please continue this awesome series.

Collapse
 
theindiancodinggrl profile image
theindiancodinggirl

Sure😊

Collapse
 
nulf profile image
nulf

Great stuff! Love learning new things about HTML. For me who have been using a lot of js/jquery in the past it's easy to miss some of the new features in HTML5.

Collapse
 
theindiancodinggrl profile image
theindiancodinggirl

Thanks😊

Collapse
 
danjbos profile image
Dan Boswell

This is a really handy guide, thank you for compiling it! :)

Collapse
 
theindiancodinggrl profile image
theindiancodinggirl

Glad you liked it 😊

Collapse
 
mensdarko profile image
Darko Mens

Good write up. Have learnt a lot.
Thanks for sharing.

Collapse
 
theindiancodinggrl profile image
theindiancodinggirl

😊