HTML Tags! (Pt. 1)

With creating a menu for my job that I currently work at being Rooster’s Wings and Brew, I have been using more and more HTML that I will later be using JavaScript along with it. Let’s get into it! More HTML tags that I will be using and that you should too!

So speaking on menus, something that’ll be helpful to keep things tidy and neat, especially for menus, this would be the most ideal. So what does field set even do? Field set tag is used to group related elements in a form along with drawing a box around the related elements. Using a legend tag within the field set it helps name something! The demo below will show exactly what I mean.

Looks great! Doesn’t it? This is without any CSS! This is the most basic way to write a bit of a menu with HTML only, no CSS, no JavaScript. With that being said, I will be now showing another HTML tag that can be proven to be useful for anyone!

Next one we’ll be looking into is Datalist HTML tag. What is Datalist? Well its the HTML version of a dropdown/auto complete. What does this do to help? Well like YouTube or Google when using their search bar, when you type something similar to what your’e looking for, Google will try to autocomplete your sentence and see what exactly the user wants to see! The code for this is a little unique.

W3 School’s Example

So here we have what W3 schools example of Datalist is. They used browsers and then created an id of browsers in order to help autocomplete what a user would be looking for within the option list they provided! This is what the UI would look like.

Simple enough right? Well that’s all I’ll be talking about today while I go back to finish my Rooster’s menu for my job! Thank you so much for reading and have a wonderful day! Remember the code everyday!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store