Loading...
Please wait.
Join LetsLearnLights for expert coding and programming guidance. Study popular languages like Java, Python and JavaScript. Improve your skills today

Important Advance HTML Tags: Mastering Essential HTML Markup

Mnzr chauhanMnzr chauhan January 19, 2022
Advance HTML Tags, Important tags of HTML.

Description:

In Previous post, I've already told about HTM clearly. Today we will learn about all important tag of html. If you're here for first time, You should read previous posts before reading this post. However, in short I cleared it that we have divide our HTML course in 3 to 4 lessons. In previous post I explained, intro of HTML, basic tags of HTML and construction of HTML in details. If your all done, Lets start...
The Table of content is given below
  1.  Introduction 
  2.  Explain in Details 
  3.  Final Lines 

Headlines.

HTML Advances or Important tags mean tags that are used for more flexible explanations.
Imagine tables, containers, input / output fields, code area (text area), progress bar, and related items.

Advertise...

Explain in Details.

Lets see a list of Important tags and their details.

  • <article>

The <article> tag define independent, self-contained content. it is mostly used for a form post or a blog post.

  • <aside>
The <aside> tag describe some of the content in addition to the content it contains. Often we use it for specific content as tip or as sidebar for a documents.

  • <base>
The <base> tag Specifies the basic URL and / or target for all relevant URLs in a document. It is always placed inside the head section and only one base URL can be used in the document. 

<!-- as if -->
<img src="https://www.blogger.com/anyweb/123.png">
<img src="https://www.blogger.com/anyweb/124.png">
<img src="https://www.blogger.com/anyweb/125.png">
  
  
  
  <!-- After using base url -->
  <head>
  <base href="https://www.blogger.com/anyweb/">
  </head>
  
<img src="123.png">
<img src="124.png">
<img src="125.png">
Not Available!
  • <bdo>
The <bdo> tag is used to override the direction of the existing text. By default this will shows Left to Right direction of text but change direction we used  dir  attribute to define direction. 
<bdo dir="ltr"> 12345 </bdo>
<br />
<bdo dir="rtl"> 12345 </bdo>
12345
54321
Attribute "ltr" mean Left to Right and "rtl" mean Right to Left ( l: Left, t: to, r: Right ).
  • <blockquote>
The <blockquote> tag is used to display a specific section  of content that is quoted from another source.
For example, when writing a post, we refer to another website and write some phrases as points. Which are taken from that website. Quoted content looks indicative / special.
  • <button>
As far as the name of the tag <button> , it is not difficult to understand that the button tag is used to create the button. 
<button>I'm a Button</button>
  • <code>
As far as the name of the tag <code> , it is used to display code in a post or blog. The <code> tag is used to describe a piece of computer code. Inside content appears in the browser's default monospace font. 
<p>The <code>h2</code> is used to display heading while <code>h1</code> is used to display Major heading</p>

The h2 is used to display heading while h1 is used to display Major heading

Note that h2 and h1 which are inside the code tag are shown in preview in coding format.
  • <datalist >
The <datalist> tag lists the default options for the <input> element. It can only be used for the pre-defined list in the input element. The dropdown menu that appears in the input element for the user to displays defined list. 

<input placeholder="Choose your Name from the list" list="browsers" style="width: -webkit-fill-available;">

<datalist id="browsers">
  <option value="Ali">
  <option value="Bruss">
  <option value="Cotangel">
  <option value="Dean">
  <option value="Eizer">
</datalist>
Here we use some other tags as  <input>  &  <option>  and some Attributes. We will briefly explain attributes incoming posts. Now  <input>  tag is used to make a input field for user. Input field means a section where the user can provide the required information such as username, email 📧 and comments etc. The  <option>  tag is used to specify data list options.
  • <dl>, <dt> & <dd>
The <dl>, <dt> and <dd> tags are used to display a description list with a description term. "dl" means data list, "dt" means data terms and "dd" means data description. 

<dl>
  <dt>HTML</dt>
  <dd>All about HTML</dd>
  <dt>CSS</dt>
  <dd>All about CSS</dd>
  <dt>JS</dt>
  <dd>All about Javascript</dd>
</dl>
HTML
All about HTML
CSS
All about CSS
JS
All about Javascript
  • <details>
The <details> tag is used to creates a detailed menu for a brief summary. The <details> tag specifies additional details that the user can open and close upon request.
The tag is often used to create an interactive widget that the user can open and close. By default, the widget is off. When opened, it expands, and reveals the contents. Any type of content can be placed inside the tag. The tag <summary> is used to show the heading of the detail. The content inside the tag <summary> is visible while the rest of the content is not visible. Details appear when the user clicks on the summary. 

<details>
  <summary>This is short summary of Post</summary>
  <p>
  This is the description of the post. When you click on Summary, the full post will appear. Clicking again will hide the details.
  </p>
</details>
This is short summary of Post

This is the description of the post. When you click on Summary, the full post will appear. Clicking again will hide the details.

  • <div>
The <div> tag is very important tag in HTML. It is block which can fully styled with CSS. We will learn CSS in detail after covering this Class. Almost all tags can be used inside  <div>  tag.
  • <embed>
The <embed> tag is used to define a container for any external resources in a web-document, such as a webpage, media (video, audio or image) or a plugin. 

<embed type="video/webm" src="video.mp4" width="400" height="300">
Not Available!
"type" is an attribute where we define the type of external source. "src" is another attribute where we specify the source of the external target. "Width" and "height" are style decorative features. We will learn all about attributes and types of attributes in the future. The use of the <embed> tag is not recommended as it is no longer supported in modern browsers as the <embed> tag is replaced by other more flexible tags, such as iframe, objects. Video, audio and img etc.
  • <fieldset>
The <fieldset> tag is used to make submit form. The  <fieldset>  tag is used to group the relevant elements in the form. The  <fieldset>  tag draws a box around the relevant elements. 

<fieldset>
  <legend>Sign up</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="Submit">
</fieldset>
Sign up







The  <legend>  tag is used to show the caption for  <fieldset> .
  • <figure> & <figcaption>
The <figure> & <figcaption> tags are used to define a figure with caption. 

<figure>
  <img src="https://cdn.pixabay.com/photo/2022/01/23/13/04/sparrow-6960807_960_720.jpg" style="width:100%">
  <figcaption>This Photo is grabed from Pixabay</figcaption>
</figure>
This Photo is grabbed from Pixabay
  • <input>
The <input> tag is a input-field for user where user can provide required information. The  <input>  element is the most important form element. The <input> element can be expressed in a number of ways, depending on the type of attribute. Consider the example below. 

<div style="display:flex;flex-wrap: wrap;justify-content: space-between;">
   <input type="button">
   <input type="checkbox">
   <input type="color">
   <input type="time">
   <input type="datetime-local">
   <input type="date">
   <input type="week">
   <input type="month">
   <input type="email">
   <input type="file">
   <input type="image">
   <input type="number">
   <input type="password">
   <input type="radio">
   <input type="range">
   <input type="reset">
   <input type="search">
   <input type="submit">
   <input type="tel">
   <input type="text">
   <input type="url">
   <input type="hidden">
</div>
"type" is an attribute that describes the type of input. It is therefore recommended to specify the type during coding.
  • <ol> , <ul> & <li>
The <ol> , <ul>& <li> tags are used to define a list 📃 with ordered-list and unordered-list. "ol" stands for ordered-list (Numeric), "ul" stands for unordered-list (Doted) and "li" for list's Items. 

<h3> Ordered List </h3>
<ol>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
</ol>

<h3> unordered List </h3>

<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
</ul>

Ordered List

  1. Item #1
  2. Item #2
  3. Item #3

unordered List

  • Item #1
  • Item #2
  • Item #3
 <li>  tags placed inside  <ol>  or  <ul>  tags.
  • <link>
The <link> tag is used to link external resources to the current document. The  <link>  tag describes the relationship between the current document and external resources. The  <link>  tag is often used to link to external style sheets or to add favicon to your website. The  <link>  element is an empty element, containing only attributes.
  • <meta>
The <meta> tag is used to define metadata for the document while metadata mean data (information). Document (website) description, keywords (SEO - Search engine optimization), document author name or visibility of document defined in  <meta>  tag. This is a blank tag and usually contains two attributes. The first attribute "name" is the name of the metadata and the second attribute is the content, the content of the metadata. 

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Letslearnlights - Hacking and Developing">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="chauhan">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Not Available!
  • <meter>
The <meter> tag is used to measure data within a given range. The  <meter>  tag specifies a scalar measurement, or a partial value, within a known range. 

<h3>Rang by Percentage Value</h3>
<meter value="0.7" style="border-radius: 5px;box-shadow: 0px 0px 5px black;padding: 0px 5px;width: -webkit-fill-available;"></meter>
<br>
<h3>Rang by Max-Min Value</h3>
<meter value="4" min="0" max="10" style="border-radius: 5px;box-shadow: 0px 0px 5px black;padding: 0px 5px;width: -webkit-fill-available;"></meter>

<p><b>Note:</b>Value represents the range in meters. When we add value to numbers, we have to specify the maximum value number. But when we add a value to a percentage, we do not need to specify the maximum value because the system knows that the percentage means out of 100.</p>

Rang by Percentage Value


Rang by Max-Min Value

Note:Value represents the range in meters. When we add value to numbers, we have to specify the maximum value number. But when we add a value to a percentage, we do not need to specify the maximum value because the system knows that the percentage means out of 100.

We do not directly add a percentage value to the percentage (x%). As you can see, we add 0.7 which means 70% {0.7 * 100%}.
  • <nav>
The <nav> tag is used to create navigation menu or navigation bar in document. 

<nav>
  <a href="/search?q=html/">HTML</a> |
  <a href="/search?q=css/">CSS</a> |
  <a href="/search?q=JavaScript/">JavaScript</a>
</nav>
The  <nav>  tag specifies the set of navigation links. Note that not all links in a document should be within the  <nav>  element. The  <nav>  element is intended only for large blocks of navigation links.
  • <noscript>
The <noscript> tag is only used to show a message to the user when the user's browser does not support JavaScript (JavaScript) or when JavaScript is disabled in the user's browser. 

<p>Browser disabling JavaScript will display text inside the NoScript element ("Hello User!" Will not be displayed).</p>

<script>
document.write("Hello User!");
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

Browser disabling JavaScript will display text inside the NoScript element ("Hello User!" Will not be displayed).

Hello User!
  • <select>, <optgroup> & <option>
The <select>, <optgroup> & <option> tags are used to make a drop-down menu for a large number of options.  <select>  make a drop-down menu (selector),  <optgroup>  make a group of related options while  <option>  tag print the options. 

<select id="menu">
  <optgroup label="HTML">
    <option>HTML Basic</option>
    <option>HTML Moderate</option>
    <option>HTML Advance</option>
  </optgroup>
  <optgroup label="CSS">
    <option>CSS Basic</option>
    <option>CSS Moderate</option>
    <option>CSS Advance</option>
  </optgroup>
  <optgroup label="JavaScript">
    <option>JavaScript Basic</option>
    <option>JavaScript Moderate</option>
    <option>JavaScript Advance</option>
  </optgroup>
</select>
"label" attribute in "optgroup" tag shows the name of group.
  • <output>
The <output> tag is used to indicate the output of any action. In other words, The  <output>  tag is used to represent the result of the calculation (as is done through the script). 

    <input oninput="showoutput()" type="range" value="0" id="rangbar">
    <br>
    <span>Output - </span>
    <output id="outputbox">0</output>
    <span> - Increase or decrease the Range to show value here!</span>

    <script>
        function showoutput() {
            let rang = document.querySelector('#rangbar');
            let output = document.querySelector('#outputbox');
            output.value = parseInt(rang.value);
        }
    </script>

Output - 0 - Increase or decrease the Range to show value here!
The area where the value between 0 - 100 appearing is called the output field. Here we have used "CSS" and JavaScript. We will learn about CSS and JavaScript later.
Consider the output tag, when we decrease or increase the value of the input the result is found in the output field. "id" is an attribute in the output tag, which helps to target the output field.
  • <progress>
The <progress> tag is used to shows the progress in a bar. 

<h3>45% (45 out of 100)</h3>
<progress value="45" max="100"></progress>

45% (45 out of 100)

In the <progress> tag we represent the specific value of progress and the maximum value in the attribute "max". The <progress> tag is used in conjunction with JavaScript to indicate the progress of a task.
  • <span>
The <span> tag is used to style any part of text, it is one of the very important tag of html. Span tags do not affect the normal view of an element, we can style a single digit of a word. Span tags do not add any space or new lines. 

<h2>Hello</h2>

<h2>
<span style="color: red;">H</span><span style="color: black;">e</span><span style="color: green;">l</span><span style="color: blue;">l</span><span style="color: chocolate;">l</span>
</h2>

Hello

Hello

Above, we code the minor heading twice as "hello", once with the normal and then with the span tag, and styling each digit with a different color.
  • <table>
The <table> tag is used to create tables in a document. We'll learn all about HTML table incoming posts, but here we are just showing what a table is. 

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>18</td>
    <td>$500</td>
  </tr>
  <tr>
    <td>John</td>
    <td>28</td>
    <td>$400</td>
  </tr>
</table>
Name Age Salary
Ali 18 $500
John 28 $400
 <th>  ,  <tr>  &  <td>  are table basic tags. Table cannot be completed without its basic tags. "th" stands for table heading, "tr" stand for table row and "td" stands for table data, "td" tags are cells where data of table is placed. In the future, we will talk about tables in detail after getting CSS training.
  • <textarea>
The <textarea> tag is used to define text code. It is mostly used as a message box in form or fields as a comment box for the user. 

<textarea style="width: -webkit-fill-available;height: 80px;">
<h1>Welcome to Mod Letslearnlights.</h1>
Welcome to Mod Letslearnlights.
    X   Y
      Z
</textarea>
The content inside this tag appears as coded with the original place in the preview and the original next line.
  • <u>
The <u> tag is used to underline a text. 

<p>This is an <u>underline</u> text.</p>
This is an underline text.

Final Lines.

If you have read our previous post and now completed it, that mean you have learn almost  50 to 60%  HTML. When you complete our Basic tags, advance tags and HTML elements lessons, I hope you will able to create your own website like Pro.


Posted by Mnzr chauhan
««« Thanks again for reading our blog. If you have any questions, feel free to ask. Your support is enough for us to share this post with your friends. And a good comment for our hard work. »»»
Thank you ツ
Mnzr chauhan

Posted by Mnzr chauhan

Post a Comment

3 Comments

Unknown said…
Very described article, thank you so much.
February 7, 2022 at 1:35 AM
Mnzr_chauhan said…
This comment has been removed by a blog administrator.
February 8, 2022 at 11:09 AM
Mnzr_chauhan said…
This comment has been removed by a blog administrator.
February 8, 2022 at 11:09 AM
Post a Comment