Acme Blog
Nov 28, 2021

4 less known HTML tags

Group Options

The <optgroup> tag is used to group related options in a <select> element (drop-down list).

<select><option value="">Select your favourite movie</option><optgroup label="Action"><option value="">Avengers</option><option value="">Die Hard</option><option value="">Fast & Furious</option><option value="">The Dark Knight</option><option value="">The Karate Kid</option></optgroup><optgroup label="Animation"><option value="">Despicable Me</option><option value="">Ice Age</option><option value="">Kung Fu Panda</option><option value="">Madagascar</option><option value="">The Lion King</option></optgroup><optgroup label="Horror"><option value="">Mirrors</option><option value="">Scream</option><option value="">The Final Destination</option><option value="">The Grudge</option><option value="">The Ring</option></optgroup><optgroup label="Sci-fi"><option value="">Inception</option><option value="">Frankenstein </option><option value="">The Matrix</option><option value="">Interstellar</option><option value="">Back to the Future </option></optgroup></select>

If you have a long list of options, groups of related options are easier to handle for a user.

KBD

The <kbd> tag is used to define keyboard input.

<section><p class="margin">Close this window by pressing <kbd>Esc</kbd></p><p class="margin">Copy to clipboard (Windows) <kbd>Ctrl</kbd> <kbd>c</kbd></p><p class="margin">Copy to clipboard (Mac OS) <kbd>Cmd</kbd> <kbd>c</kbd> </p></section> 

Highlight text

The <mark> tag defines the text that should be marked or highlighted

<section><h2 class="h2">World War II</h2><p class="p"> World War II (WWII or WW2), also known as the Second World War (after the recent Great War), was a global war that lasted <mark>from 1939 to 1945</mark>, though related conflicts began earlier. It involved the vast majority of the world's nations—including all of the great powers—eventually forming two opposing military alliances: the Allies and the Axis. It was the most widespread war in history, and directly involved more than <mark>100 million people from over 30 countries</mark>. In a state of "total war", the major participants threw their entire economic, industrial, and scientific capabilities behind the war effort, erasing the distinction between civilian and military resources. Marked by mass deaths of civilians, including the <mark>Holocaust</mark> (during which approximately 11 million people were killed) and the strategic bombing of industrial and population centres (during which approximately one million people were killed, including the use of two nuclear weapons in combat), it resulted in an estimated 50 million to 85 million fatalities. These made World War II the deadliest conflict in human history. </p></section> 

Small quotes

The <q> tag defines a short quotation.

<section><p class="p">Chambray vegan echo park kinfolk, coloring book church-key retro. Quinoa lomo poutine, man bun cold-pressed typewriter portland tumeric polaroid sartorial 3 wolf moon coloring book. Vegan offal franzen, affogato keffiyeh tumeric <q class="quote">I'm a teene tiny quote 😊!</q>DIY venmo shaman stumptown lo-fi adaptogen. Irony blue bottle scenester, lomo bespoke coloring book DIY blog synth ramps drinking vinegar tumblr hashtag tote bag. Keytar glossier blog chambray truffaut pug seitan art party marfa kogi pitchfork slow-carb. 90's vaporware glossier echo park, bushwick authentic blue bottle poke cardigan trust fund. Chia selvage man braid mustache migas cardigan.<qclass="quote">We take seeds and grow jungles!! - Codegrain😅</q>Heirloom +1 umami brooklyn neutra microdosing. Mustache brooklyn vinyl, green juice freegan chambray poutine listicle 90's vexillologist organic. Celiac tousled vexillologist fingerstache kale chips raclette man bun YOLO keytar raw denim viral kinfolk vice. Blue bottle raclette flexitarian glossier. Vice VHS meggings coloring book, air plant deep v cloud bread. Glossier retro VHS deep v.</p></section>

Browsers normally insert quotation marks around the quotation.

Jay
Jay

Aspiring UI Designer & Frontend Developer 🚀

Leave a Reply

Related Posts

Categories