HTML
TIPS & TRiCKS
The hidden Gems
DENIC MARKO
Preface
HTML, CSS, and JavaScript are foundational
pillars of web development.
Today, there are a lot of HTML documentation
resources. For example, the Mozilla Developers
Network (MDN), which I use and highly
recommend to everyone.
Just like other resources, HTML documentation
can be very detailed. Therefore, it's easy to miss
out on some very useful features.
This book is focused on those hidden HTML gems.
I want to give special credit to my friend George
Moller ( @_georgemoller) who made this book
possible. He has amazing presentation skills, and I
strongly recommend you to follow his work.
TABLE OF
contents
The loading lazy attribute 01
The <datalist> element 02
The Email, call, and SMS links 03
The start attribute to order lists 04
The type reset attribute 05
The <meter> element 06
window.opener 07
The base element 08
Favicon cache busting
09
Native HTML sliders 10
TABLE OF
contents
The HTML Accordion 11
The <mark> element 12
The type=`search` attribute 13
The `download` attribute 14
The .webp image format 15
The `poster` attribute 16
The `spellcheck` attribute 17
The `<optgroup>` element 18
The `<fieldset>` element 19
The `<abbr>` element 20
1.0
The loading=`lazy` attribute
You can use the `loading=lazy` attribute to
defer the loading of the image until the user
scrolls to them.
how to use it?
EXAMPLE
User's visible area Non visible area
Non visible area User's visible area
image with lazy=`loading`
attribute
Request is not sent to Request is sent to the
the server to download server to download
image yet. image.
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
Performance/Lazy_loading
2.0
The <datalist> element
The <datalist> tag is used to provide an
"autocomplete" feature for <input>
elements.
how to use it?
EXAMPLE
Link to codepen
https://codepen.io/denic/pen/WNQbvbo
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/datalist
3.0
The Email, call, and SMS links
You can create an email, call and sms link
by adding the `mailto:`, `tel:` and `sms:`
prefix to an anchor element.
how to use it?
EXAMPLE
Send us an email
Call us
Send us a message
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/a
4.0
The start attribute to order lists
You can use the `start` attribute to change
the starting point for your ordered lists.
how to use it?
EXAMPLE
Link to codepen
https://codepen.io/denic/pen/ExXgrew
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/ol#attr-start
5.0
The type reset attribute
You can use `<input type="reset">` to create
a clear button for your forms.
how to use it?
EXAMPLE
User clicks on reset button
2. Inputs get cleared
Link to codepen
https://codepen.io/denic/pen/poRVXoB
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/input/reset
6.0
The <meter> element
You can use the `<meter>` element to
display quantities.
No JavaScript/CSS is needed.
how to use it?
value: the current numeric value. This must be between the minimum and
maximum values (min attribute and max attribute) if they are specified.
min: the lower numeric bound of the measured range. This must be less
than the maximum value (max attribute), if specified. If unspecified, the
minimum value is 0.
max: the upper numeric bound of the measured range. This must be greater
than the minimum value (min attribute), if specified. If unspecified, the
maximum value is 1.
low: the upper numeric bound of the low end of the measured range. This
must be greater than the minimum value (min attribute), and it also must be
less than the high value and maximum value.
high: the lower numeric bound of the high end of the measured range. This
must be less than the maximum value (max attribute), and it also must be
greater than the low value and minimum value
optimum: this attribute indicates the optimal numeric value. It must be
within the range (as defined by the min attribute and max attribute).
EXAMPLE
Link to codepen
https://codepen.io/denic/pen/MWbJRXe
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/meter
7.0
window.opener
Pages opened with `target="_blank"` allow the new
page to access the original’s `window.opener`. This
can have security and performance implications.
Include `rel="noopener"` or `rel="noreferrer"` to
prevent this.
how to use it?
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Link_types/noopener
8.0
The base element
If you want to open all links in the
document in a new tab, you can use <base>
element:
how to use it?
EXAMPLE
Link to codepen
https://codepen.io/denic/full/yLYYwJp
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/base
9.0
Favicon cache busting
To refresh your website’s favicon you can
force browsers to download a new version
by adding ?v=2 to the filename.
how to use it?
10
Native HTML sliders
You can use `<input type="range">` to
create native HTML sliders.
how to use it?
EXAMPLE
Link to codepen
https://codepen.io/denic/pen/bGBrLRz
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/input/range
11
HTML Accordion
The <details> tag specifies additional
details that the user can open and close on
demand.
how to use it?
EXAMPLE
Link to codepen
https://codepen.io/denic/pen/PozobRO
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/details
12
The <mark> element
You can use the `<mark>` element to
highlight text.
how to use it?
EXAMPLE
Link to codepen
https://codepen.io/denic/pen/NWwmjoZ
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/mark
13
the type search attribute
Use the `type="search"` for your search
inputs and you get the "clear" button for
free.
how to use it?
EXAMPLE
Clears the search
Link to codepen
https://codepen.io/denic/pen/vYxOgLv
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/input/search
14
the download attribute
You can use the `download` attribute in
your links to download the file instead of
navigating to it.
how to use it?
EXAMPLE
filename.${extension}
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/a#attr-download
15
the .webp image format
Use the `.webp` image format to make
images smaller and boost the performance
of your website.
how to use it?
current support
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
Media/Formats/Image_types#webp_image
16
the poster attribute
Use the `poster` attribute to specify an
image to be shown while the video is
downloading, or until the user hits the play
button.
how to use it?
example
nOTHING TO SHOW WHILE
DOWNLOADING THE VIDEO.
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/video#attr-poster
17
the spellcheck attribute
Use the spellcheck attribute to define
whether the element may be checked for
spelling errors.
how to use it?
example
Highlights the error in the word.
Link to codepen
https://codepen.io/denic/pen/NWboEgO
Link to Documentation
https://developer.mozilla.org/en-US/docs/
Web/HTML/Global_attributes/spellcheck
18
the optgroup element
Use the `<optgroup>` element to create a
grouping of options within a `<select>`
element.
how to use it?
example
Link to codepen
https://codepen.io/denic/pen/PomKzVW
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/optgroup
19
the fieldset element
You can use the `<fieldset>` element to
group several controls as well as labels
(`<label>`) within a web form.
how to use it?
example
Border surrounding legend and inputs due
to fieldset element.
Link to codepen
https://codepen.io/denic/pen/BaNXWNj
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/fieldset
20
the abbr element
Use the `<abbr>` element to represent an
abbreviation or acronym.
how to use it?
example
Link to codepen
https://codepen.io/denic/pen/PomKzVW
Link to Documentation
https://developer.mozilla.org/en-US/docs/Web/
HTML/Element/optgroup
I hope you enjoyed reading.
If you have any questions, you can contact me
here:
http://markodenic.com/contact
- Denic Marko
