Cosimo Galluzzi
Acquired Stardust
Love Begins
KIROKAZE
❣ Chile in a Photography ❣
Andulka
#extradirty
2025 on Tumblr: Trends That Defined the Year
dirt enthusiast
Product Placement
Game of Thrones Daily
titsay
hello vonnie
Kaledo Art
Xuebing Du
tannertan36
Sweet Seals For You, Always
pixel skylines
styofa doing anything
Jules of Nature
seen from France
seen from United Kingdom
seen from United Kingdom
seen from United States
seen from Italy
seen from Türkiye
seen from Iraq
seen from United States
seen from United Kingdom
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
seen from United Kingdom
seen from Malaysia
seen from United Kingdom
seen from United States
seen from United States
@theindiancodinggirl
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.
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 disabled.
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 17 - Adding color picker and date picker into the form
<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.
<input> elements with the attribute of type="date" create a date picker or let the user enter a date.
Day 16 - Best Practices
A great place to find all the HTML best practices to write maintainable and scalable code.
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> element 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.
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 accesibility concerns which can be overcome by using, before and after pseudo-elements with the CSS content property.
Day 12 - Progress and Meter Elements
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).
-Has the following attributes: max, min, high, low, optimum.
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.
Day 10 - Highlight It!
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> :
<mark> denotes relevance of the content, while <strong> indicates importance.
Day 9 - All about Quotations
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 ✌️
Day 8 - Html Periodic Table
There exists a periodic table for HTML elements.
A great tool to find all the elements with their descriptions in a single place.
It's like a cheat sheet which comes very handy as who remembers all the tags.
Day 7 - Responsive Images with srcset
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.
The src attribute is present for browsers that don't understand srcset.
Day 6 - Collapsible Sections with Html5
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.
Day 5 - Define options with datalist tag
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.
Have you ever used this tag in your projects?
Day 4 - Implement a Download Button with Html5
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 download attribute can be used with or without value. To rename the default name, a value can be given which becomes the name of the file.
Day 3 - Make any Content on your page editable by users
The text of the webpage can be made editable using the “contenteditable” attribute.
Just set the contenteditable to true on any of the element you want to make editable. Can be helpful in making of a simple text editor.