I know I think a lot about HTML, but honestly, I have to say it's an incredible markup language to get accustomed to programming. Even though it doesn't follow many standards like a semicolon at the end, it's still a good intro that teaches you about proper syntax and logic. If you don't know how HTML works, then why are you here? But to put it simply: if we think of a web page like a human being, HTML would be the skeleton that holds everything together. JavaScript would be the organs that make the body work, and CSS would be like the hair, eye color, and the clothes that it's wearing. Elements are HTML's way of telling it what to do. For example, if I want a heading, I'd put an H1 or an H2 for a subheading. If I wanted a paragraph here, I'd put a p element. If I wanted to combine all of these together, I'd wrap them in a div element, and so on and so forth. H1 H2 p div We can see that there are more specific tags than just text. The div tag, for example, creates a sort of box. Other tags, such as strong and em, not only alter the look of the text but also tell the website that they mean something—either they should be emphasized or have bigger importance than the rest of the text. However, there are some HTML tags that not many people know. Which ones are they? Well, let's find out. div strong em 1. The abbr Tag abbr Also called the abbreviation tag, this is used for when you want to display the meaning of an acronym or abbreviation. To use it, simply wrap the word or acronym in the abbr tag and add a title attribute to it. abbr title The <abbr> tag wraps the acronym "WHO."
The title attribute specifies what "WHO" stands for: "World Health Organization."
When you hover over "WHO" with your cursor, the full meaning ("World Health Organization") is displayed as a tooltip. The <abbr> tag wraps the acronym "WHO." <abbr> The title attribute specifies what "WHO" stands for: "World Health Organization." title When you hover over "WHO" with your cursor, the full meaning ("World Health Organization") is displayed as a tooltip. The title attribute works with every element, but in this case, type what the acronym or abbreviation stands for. Now, when you hover your cursor over that abbreviation, it shows you the title you set. This is great for buttons or icons for further accessibility. However, be careful with mobile users—they can’t hover over objects. title 2. The code Tag code This is extremely useful for transmitting code blocks to users. You could use CSS and a normal p element to make it look like a code block, but why do that when the code tag is made for this exact purpose? p code Wrap the string you want to transform in the code tag, and the browser will automatically display it in a monospace font. You can then use CSS to make it prettier. 3. The kbd Tag kbd Also known as the keyboard tag, this is much like the code tag. Wrap designated keyboard keys in the kbd tag, and the browser will automatically display them in a monospace font. Use CSS to make it look like keyboard buttons. code kbd 4. The datalist + option Tags datalist option These are super useful for displaying recommendations or an option menu. It’s easier than you think! Create an input element with the input tag where users can write.
Add the list attribute to it and give it a name.
Create your datalist element with the datalist tag and set its id attribute equal to the list attribute’s name.
Inside the datalist, add option tags for recommendations. Use the value attribute for the options. Create an input element with the input tag where users can write. input Add the list attribute to it and give it a name. list Create your datalist element with the datalist tag and set its id attribute equal to the list attribute’s name. datalist datalist id Inside the datalist, add option tags for recommendations. Use the value attribute for the options. datalist option value Now, when users start typing, options pop up based on the letters typed. 5. The dialog Tag dialog This tag is a quick and easy way to create a pop-up or modal. Simply create your dialog box with the dialog tag and add content inside it. When you add the open attribute, the dialog box will show. You can use simple JavaScript to control it further. dialog open 6. The details + summary Tags details summary These are perfect for creating native dropdown menus without CSS or JavaScript. Use the details tag to create the container.
Add a summary tag inside it for the clickable title.
Place any content inside the details tag, and it will toggle visibility when clicked. Use the details tag to create the container. details Add a summary tag inside it for the clickable title. summary Place any content inside the details tag, and it will toggle visibility when clicked. details This is especially useful for FAQ sections. 7. The time Tag time Though it doesn’t visually do much, this tag allows browsers and search engines to read time values. Wrap time values in the time tag to improve SEO. time 8. The ruby + rt + rp Tags ruby rt rp These are used for Ruby notation, commonly in Asian typographies. They display small text above a word or character. Wrap your text in the ruby tag.
Use the rt tag for the smaller text.
Add rp tags for browsers that don’t support Ruby notation. Wrap your text in the ruby tag. ruby Use the rt tag for the smaller text. rt Add rp tags for browsers that don’t support Ruby notation. rp 9. The progress Tag progress This tag creates a progress bar without CSS. progress Use the progress tag.
Add the max attribute for the maximum value.
Use the value attribute for the current value. Use the progress tag. progress Add the max attribute for the maximum value. max Use the value attribute for the current value. value The bar adjusts automatically. 10. The meter Tag meter Similar to the progress tag, the meter tag represents a scale. progress meter Add min, max, and value attributes for the range and current value.
Use the low, high, and optimum attributes for thresholds that change the bar's color. Add min, max, and value attributes for the range and current value. min max Use the low, high, and optimum attributes for thresholds that change the bar's color. low high optimum 11. The fieldset + legend Tags fieldset legend These tags create a box to group objects. Use the fieldset tag to create the container.
Add a title with the legend tag. The legend automatically positions itself in the margins of the box. Use the fieldset tag to create the container. fieldset Add a title with the legend tag. The legend automatically positions itself in the margins of the box. legend Outro If you learned something new today, let me know by absolutely destroying that like button! If you enjoy this type of content, consider subscribing. I post videos on programming, web development, and my journey of learning how to code. That’s all for today’s list of hidden HTML tags. Thank you so much for reading to the end, and I’ll see you in the next one. Bye-bye!

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The Data Infrastructure Behind Every Successful AI Startup

My 10+ Favorite UI & Web Design Resources That You Should Bookmark

11 Overlooked HTML Tags That Can Make Your Pages Pop

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 Sales Objections Every Web Strategist Faces (And How to Flip Them)

100 Stories To Learn About Html5

10 Frontend Projects to Take Your Coding Skills to the Next Level

10 CSS Tips To Make Your Site Faster

10 Cool Data Table Libraries with Advanced Features

10 Best UI/UX Project Ideas to Improve Your Frontend Skills 🎨🧙‍♂️

5 Sales Objections Every Web Strategist Faces (And How to Flip Them)

100 Stories To Learn About Html5

10 Frontend Projects to Take Your Coding Skills to the Next Level

10 CSS Tips To Make Your Site Faster

10 Cool Data Table Libraries with Advanced Features

10 Best UI/UX Project Ideas to Improve Your Frontend Skills 🎨🧙‍♂️

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps