HTML Tags: Most Beginner does not know (Part 3)

In process of learning HTML basics, every beginner knows dev tag, h1 to h6 tags, p tags and few more, but most of the beginner does not know about details tags, table tags and many more like this because he/she thinks its high-level things but its not. Believe me its that easy as h1 and p tags. Let break down these tags...

1) Base tag:

Use:

It is use when you add some assets in your site from same site again and again then the basic URL is placed in base tag and remaining part of that URL is placed where required.
let me show how and what I meant by that:

Without Base tag 👇

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <img src="https://cutt.ly/XXvfnhj" alt="Smoke-image">
    <img src="https://cutt.ly/wXvfO3U" alt="Red leaves on Floor">
    <img src="https://cutt.ly/VXvfZNl" alt="Sky with Stars">
    <img src="https://cutt.ly/vXvgeBw" alt="A paint">
</body>
</html>

If you notice I have place 4 images from same site and I am repeatedly using that site. So why not to common this "https://cutt.ly" site, like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://cutt.ly" target="_blank">
</head>
<body>
    <img src="/XXvfnhj" alt="">
    <img src="/wXvfO3U" alt="">
    <img src="/VXvfZNl" alt="">
    <img src="/vXvgeBw" alt="Jungle">
</body>
</html>

And its not only limit to img tags, it can be use anywhere that is in anchor tags, as links, refences etc. That's it.
Let’s jump to the Table tag.

2) Table tag:

Table tag is answer to this question-> How to make tables on web using HTML? So, with table tags we can basically make tables.

Basic Syntax:

    <table>
        <caption></caption>
        <tr> 
            <th>Colum 1 title</th>
            <th>Colum 2 title</th>
        </tr>
        <tr>
            <td>Colum 1 data</td>
            <td>Colum 2 title</td>
        </tr>        
    </table>

Bear with me I am going to explain everything. let’s break down its syntax:

table tag-> define that it is a table
caption tag-> define the main title of the table.
tr tag -> mean Table Row.
th tag -> mean table header, actually table column header.
td tag -> table data.

Keep these short words in mind it will work for you.

Now let’s understand it with an example.

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
        table{
            width: 500px;
            text-align: center;
        }
    </style>
</head>

<body>

    <table> <!-- Table  -->
        <caption>This main title of the table</caption> <!-- Table Title-->
        <tr> <!-- Table Row -->
            <th>Items</th> <!-- Table header -->
            <th>Price</th>
        </tr>
        <tr> 
            <td>Jacket</td> <!-- Table data-->
            <td>$100</td>
        </tr>
        <tr>
            <td>Suit</td>
            <td>$80</td>
        </tr>
        <tr>
            <td>Trouser</td>
            <td>$45</td>
        </tr>
    </table>

</body>
</html>

Output:

if you don't understand, copy the code, paste it in VS code and open it with live server. Change some values and you will understand what is going on.

3) Datalist Tag:

Use: Datalist tag use where a user has to choose some options for input field. OR developer want to provide some pre-set data for the user to choose.

Basic Syntax:

  <datalist>
    <option value="data 1">
    <option value="data 2">
  </datalist>

Datalist tag contains some options to provide and all those options remains in whole datalist tag. I have provided an example below I tried to shortened as much as I can.

Example:

<!DOCTYPE html>
<html lang="en">
<body>  
    <h3>Choose what you like the most</h3>
  <input list="connect-with-datalist"> 
  <datalist id="connect-with-datalist"> <!-- list and Id should be same to connect them both -->
    <option value="HTML">
    <option value="CSS">
    <option value="Javascript">
    <option value="React Js">
     <option value="All"></option>
  </datalist>

  <button>Submit</button>
</body>
</html>

Output:

OMG you have learn a lot today. I will say start using it in you HTML.

Learn Little but Better!

If you have found this helpful please give a like and comment.

Thanks

Blog

HTML Tags: Most Beginner does not know (Part 3)

Waqas Khan

1) Base tag:

Use:

2) Table tag:

Basic Syntax:

Output:

3) Datalist Tag:

Basic Syntax:

Example:

Output:

Join Our Newsletter. No Spam, Only the good stuff.

Related