20 Days of HTML(Learn 20 amazing things about HTML) Part 2
Tags: html, beginners, webdev, codenewbie
Published: 2020-03-06 13:29:01


# <b> 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.

```html
<p draggable="true">
  Drag and Drop me on the other side!
</p>
```
{% jsfiddle https://jsfiddle.net/km4444/ed5vzhjg/5 result,html %}

# <b> 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.

```html
<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>
```
{% jsfiddle https://jsfiddle.net/km4444/e5hgnw4s/4 result,html %}

# <b> 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.

```html
<audio controls src="dope_music.mp3">
  Your browser does not support the audio element.
</audio>
```
{% jsfiddle https://jsfiddle.net/km4444/afb7zL8e/2 result,html %}

# <b> 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.

```html
<p>Go to a
  <del>movie</del>
  <ins>conference</ins>
  this weekend.
</p>
```
{% jsfiddle https://jsfiddle.net/km4444/Lbqe21az/9 result,html %}

# <b> 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.

```html
<p>This is a lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggg<wbr>word.</p>
```
{% jsfiddle https://jsfiddle.net/km4444/1n9mgtp0/2 result,html %}

# <b> Day 16- Best Practices 
A great place to find the HTML best practices to write maintainable and scalable code.

[HTML best practices](https://github.com/hail2u/html-best-practices)

# <b> 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.⁣

```html
<label>Choose Color:
</label>
<input type="color" value="#ffffff" />
```
{% jsfiddle https://jsfiddle.net/km4444/2yrzhLkq/2 result,html %}

# <b> 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`

# <b> 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.

```html
<label for="country">Country:
</label>
<input type="text" name="country" value="India" readonly>
```
{% jsfiddle https://jsfiddle.net/km4444/xfwk8mpc/ result,html %}

# <b> 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 &#x2764;

[Twitter](https://twitter.com/indiancodinggrl)
[Instagram](https://www.instagram.com/theindiancodinggirl)