HTML TAGS

The Hyper Text Markup Language is one of the most important language involved in building websites along with Cascading Style Sheet and Javascript which are often called the basic foundation of the web developer journey. By convention the entire HTML document is to be written using Lower Case

In HTML everything is called elements made up of Tags probably in this format mentioned below:

<opening tag> content </closing tag>

but not all tags are like this, Some tags are of self-closing in nature called as self-closing tags and let's see some examples for them both.

Self-Closing Tags

<img src="" alt=""/>
<!-- break tag -- >
<br/>

some tags which do not provide any contextual content meaning usually are self closing.

Opening and Closing Tags

<h1>Hello World</h1>

Most tags that have text content in them use this kind of tag to mark the start and end of their content to provide a valuable meaning

Heading Tags (h1 to h6)

The h1 through h6 heading elements are used to signify the importance of content below them. The lower the number, the higher the importance, so h2 elements have less importance than h1 elements.We usually use only use one h1 element per page and place lower importance headings below higher importance headings.

The <p>paragraph</p> Tag

There is no such thing called p1, p2... just p with an opening and a closing tag to make all the paragraphs in the webpage.

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati cumque molestias ex architecto. Ipsa cupiditate quod consequuntur dolorem reiciendis sed error unde praesentium, dolore minima corrupti corporis, repudiandae vero dignissimos!</p>

Lorem Ipsum

Since we came to this let's explore what this above text called lorem ipsum is !! This text Lorem Ipsum is simply a dummy text of the printing and typesetting industry. It has roots in a piece of classical Latin literature from 45 BC.

<img>Image Tag

Take any document online these days a document without any images or pictures is considered as blunt/unfinished work being published and does not engage the reader well and will eventually bore the hell out of them so my point here is we have to include images in a webpage using the HTML tag called<img> which has two main attributes within, Those are "src" and "alt" src being source and alt being alternative text used for accessibility reasons where the image is not being displayed by the browser due to some technical issues by any chance.

<a></a>Anchor Tag

This is the actual link tag in HTML but do not confuse this with the <link> tag which is used to link HTML and External CSS pages this anchor tag links multiple websites together via making a hyperlink and hence the language is called Hypertext Markup Language.

This example has two attributes namely href and target the first one takes the url of the website to be linked and the target attribute takes how the link should be displayed.

Lists tags

There are mainly two lists generally used to build webpages they are ordered list and unordered list

ORDERED list

The ordered list tag is denoted by <ol><li>content</li></ol> and the <li> tag denotes List Item. The ordered list has a number prefixed at the list of items automatically.

UNordered list

The name itself denotes what it is without the numbering prefix Eg:

Description List

The <dl> HTML element represents a description list.These are not used very often, Only when there is a peculiar use case.The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

HTML TABLE

The <table></table> tag is used to create the table which is used to represent data in a tabular format but in earlier days of web dev it was used to make layouts.(before flex and grid) The table consists of several nested tags like <tr>,<th>,<td> to create a full-fledged table.

The <tr>,<th> & <td>

The <tr> tag is used to create a table row with an opening and a closing tag. It creates a row of data on the horizontal axis. The <th>tag(Table Heading) is used inside the <tr> tag to make a heading (in bold) that forms the column in the HTML table. The <td> tag means table data which specifies what comes after the table heading.

HTML FORM

The HTML form is one of the very important elements of the language as it is one of the key elements to obtaining input data from the end user.

Eg:

HTML FORM INPUT ELEMENTS

TEXT

<input
        type="text"
        name="name"
        id="name"
        class="form-control"
        placeholder="Enter your name"
        required
      />

This input tag is probably the most used one as every form must contain some text fields on it(mandatorily).

NUMBER

<input
        type="number"
        name="age"
        id="number"
        min="10"
        max="99"
        class="form-control"
        placeholder="Age"
      />

The number input tag is used to collect all sorts of numerical data like age, phone, etc.

E-MAIL

In this new age era, no adult is without an email address and even kids have them lol!, Also every business tends to collect email id's to send people cold emails to convert them into paying customers hence this input field is also considered very essential under a <form>tag.

<input
        type="email"
        name="email"
        id="email"
        class="form-control"
        placeholder="Enter your Email"
        required
      />

PASSWORD

Every login/signup form needs a password input field and setting the type attribute to "password" the input element not only becomes a password field but also masks the words typed without any external help from css or javascript. Even just with pure HTML password fields can be created.

<label for="pass">Password (8 characters minimum):</label>
    <input type="password" id="pass" name="password"
           minlength="8" required />

CHECKBOX

A check box is a small box allowing single values to be selected/deselected which is usually given under a form element where certain questions/statements which have multiple options and answers and this is used to get the user-preferred inputs. The only important aspect here is multiple checkboxes can be selected(by default) for a given set of data under the same question.

<input
          name="prefer"
          value="data-visualization"
          type="checkbox"
          class="input-checkbox"
      />

RADIO BUTTONS

A radio button is a small rounded button-like thing that does the same work as the checkbox but the only difference is only one radio button is to be selected among the various choices given in the form element.

<input
          name="user-recommend"
          value="not-sure"
          type="radio"
          class="input-radio"
        />

COLOR PICKER (INPUT ELEMENT)

Sometimes we require a color input from the user on a certain scenario and that is done by this input tag attribute called

<input type="color" />

DATE PICKER

A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day.

<input type="date" />

FILE SELECTOR

A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.

<input type="file" />

Reference

MDN Web Docs