DEV Community

AidanMargo
AidanMargo

Posted on

3 Html Tags You Need to Know About

Every webpage is built off of HTML. Even if it's appended to the DOM, without this code, we've got nothing to show on our page. Every developer needs to understand HTML, at least at a basic level. Yet, most of us aren't utilizing all of the tools available to us.

"But Aidan, how much else could there be to learn? This is such a basic language!"

Well, sort of. If you've worked with HTML in the past, you know of the basic tag types:

  • Headers (h1, h2, etc.)
  • Paragraphs
  • Divs
  • Inputs and so on. There are some other amazing options we have too, though, to make our lives so much easier. Let's take a look at them.
  • 3 HTML Tags You Need to Know about

    Details

    We're gonna start out with my personal favorite. If you're looking for a real quick way to hide and show some information throw the tag in there and watch the magic happen!
    Closed Details
    Then...
    Open Details

    Tip: Use in conjunction with the tag for some extra customization.

    Different Input Types

    Need to let the user pick a color for their profile? How about set a date-time, or from a range of numbers? You can use the "type" attribute to give your user a bunch of different options.

    Input Types

    Datalist & Option

    A great way to give your user some autocompleted options is by using the and tags in conjunction with your input! Here's an example using some common icecream flavors:

    Datalist

    Autocompleting datalist

    One thing to note here is that you will need to make sure that your datalist id matches the "list" attribute of your input, so the types sync up. Here's the code used for the above example:

 <label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

Discussion (0)