HTML Tag's that can make your life easy

Hi, this is Rittik a newbie to the web-development world.Like all of the rest I started my journey into the world of web-dev with HTML or commonly known as the skeleton of the web-dev world. So, before diving into the HTML tags that you might find useful I would like to highlight somethings about this HTML language. One of the most important thing being "you cannot hack NASA or any system for that matter using HTML!" and why is that ??

It is because it is the standard markup language for documents designed to be displayed in a web browser. Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document. HTML elements are the building blocks of HTML pages. Hence, it is indeed the skeleton of the websites upon which we use various other things like CSS,JS etc. to make it more beautiful and functional.

All of the details above seems exhausting but it has one of the most useful clue hidden inside it and that is it is a Semantic language. It means that there are many tags that exists in HTML that help the browser understand it's meaning and hence, makes your site function exactly as you intend to (Also too some extend the more you use the correct semantic tags the less you have to worry about the site's responsiveness).Hence, I present to you few HTML tags that will help you (I guess!!).

The first few tags mentioned will help you make great form's.

1. fieldset tag <fieldset></fieldset>
   This tag helps you to group together a set of input elements that go together. It also adds a nice little box around the input elements that are grouped inside it.

2. legend tag <legend></legend>
   This tag once included into the fieldset tags to get a nice looking label inside the border surrounding the input tags.

3. datalist tag <datalist></datalist>
   The tag specifies a list of pre-defined options for an element and makes it a searchable drop-down(Normally we would have gone for some custom JS but it's arleady existing in HTML).The tag is used to provide an "autocomplete" feature for elements. Users will see a drop-down list of pre-defined options as they input data. The element's id attribute must be equal to the element's list attribute (this binds them together).

Code might look like this:-

<fieldset>
<div>
<legend>Favorites</legend>
</div>
<div>
<input list="fruit-list" type="text">
<datalist id="fruit-list">
  <option value="Banana">
  <option value="Apple">
  <option value="Orange">
  <option value="Grapes">
  <option value="Watermeleon">
</datalist>
</div>
</fieldset>

1. Some input types that can inculcated to the forms:

a) <input type="color"> - This tag will help you create a
color picker as an input. (Isn't it great!!).

b) <input type="time"> - You can actually store time as an
input.

Apart from these there are many tags in HTML that help you make you website really great like *<navbar>,<article>,<section> *etc. Hope this article make your forms better.