theindiancodinggirl💙

⁣

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

⁣

⁣

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

⁣

⁣

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⁣

⁣

<input> elements with the attribute of type="color" provide a interface of color picker else the user can also enter the color in hexadecimal format.⁣

⁣

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

<ins> element indicates text that has been added to the document.⁣⁣

<del> is used for the text that has been deleted from the document.⁣⁣

⁣⁣

Though both the elements look the same, the difference is in semantics.⁣⁣

⁣⁣

𝘛𝘩𝘦 𝘏𝘛𝘔𝘓 <𝘱𝘳𝘰𝘨𝘳𝘦𝘴𝘴> 𝘦𝘭𝘦𝘮𝘦𝘯𝘵 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.⁣⁣

⁣⁣

𝘛𝘩𝘦 𝘏𝘛𝘔𝘓 <𝘮𝘦𝘵𝘦𝘳> 𝘦𝘭𝘦𝘮𝘦𝘯𝘵 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).⁣⁣

⁣

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

⁣

⁣

Ever wanted to have highlighted text on your page??⁣

You can do it with just HTML, use <mark> tag to highlight parts of the text which needs extra attention.⁣

⁣

Mostly used with quotations which are from other sources to determine which text is more relevant according to you. ⁣

⁣

Don't use it only for decoration purpose.⁣

⁣

Difference between <mark> and <strong> :⁣

⁣

Quotations are an important part of content writing.⁣

There are few elements which can be used according to their semantic meanings to display quotations on your page.

⁣

𝟷.𝘛𝘩𝘦 <𝘣𝘭𝘰𝘤𝘬𝘲𝘶𝘰𝘵𝘦> 𝘦𝘭𝘦𝘮𝘦𝘯𝘵:⁣

-Provides a section that defines quotations from another source.⁣

-Used for indicating long quotations.⁣

-Cite attribute is used to provide the URL of the source of the quotation.⁣

⁣

𝟸.𝘛𝘩𝘦 <𝘲> 𝘦𝘭𝘦𝘮𝘦𝘯𝘵- ⁣

-Provides an inline quote in a block of text. ⁣

-Used for indicating short quotations.⁣

-Inserts quotation marks around the enclosed text.⁣

⁣

𝟹.𝘛𝘩𝘦 <𝘤𝘪𝘵𝘦> 𝘦𝘭𝘦𝘮𝘦𝘯𝘵-⁣

-Provides the title of the source of work(e.g. book, album, song, poem, essay, etc.)⁣

-According to HTML5 Spec,⁣

a person's name is not the title of a work.⁣

⁣

Do mention in comments if you use any of these ✌️

⁣

There exists a periodic table for HTML elements. ⁣

A great tool to find all the elements with their descriptions in a single place.⁣

To make an image responsive means to switch between different versions of the image so that they are being displayed according to their respective device sizes and resolutions.⁣

srcset, an attribute of img element is used to give urls of different versions of the image and a descriptor so that the browser can display the most appropriate one in a given situation.⁣

Here, descriptor x represents device-pixel-ratio i.e a device with 2x resolution will only display the image associated with 2x. ⁣

Used with the summary tag which specifies the title that can be clicked to expand or collapse the details.

Details tag is used to make collapsible sections when it is required to provide extra information about a subject that a user can hide or view by their choice.

By default, the details are hidden, the open attribute can be used to change the default behavior.

The Html5 <datalist> tag is used to provide autocomplete feature in the input field of the form.⁣

⁣It specifies the set of predefined options for the user to input.⁣

⁣To bind it to the input, it is usually used with the <input> element's "list" attribute whose value matches the datalist id.⁣

⁣It works with all types of inputs like data, range, and color.⁣

⁣

Usually, when the user clicks on a link to media files, it will be opened in the browser. If you want to give users the option to save that file on their computer, download attribute can be used.

The download attribute to <a> elements makes the linked URL a download link rather than a navigational meaning users can save the link rather than navigating to it.

The text of the webpage can be made editable using the “contenteditable” attribute.