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!




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Applying TailwindCSS On Vue 2 Project: Covid-19 Update

A Practical Guide To Become a Senior Frontend Developer

Why TypeScript?

TypeScript — NRG NOMAD

How to create your very own file transfer program in node.js

Handling number values in HTML inputs

Create an Ansible Roles for Webserver and Haproxy…

Gotta Fetch ’Em All: Pokemon API Project

Integrating Firestore with web application

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
David Lago

David Lago

More from Medium

HTML forms creation of form, a small case study to create HTML pages using all the above-learned…

html form

How I started learning html.

ParseHub beginners: see why knowledge in XPath, CSS and HTML makes a difference

ParseHub beginners: see why knowledge in XPath, CSS and HTML makes a difference