Linking and Listing Tag

What are the Linking and Listing tag in HTML?

Linking Tags:-

  • <a> - The <a> tag is an anchor tag used to create hyperlink in HTML document. It links one page or document to another.
    • USAGE:-
      • <a href="https://www.codenow.online">Visit codenow.online!</a>
  • <link> - The <link> tag is used to link an external resource to a document. Link tag is used to link exnternal style sheet. It is defined inside <head> tag.
    • USAGE:-
      • <head>
          <link rel="stylesheet" type="text/css" href="style.css">
        </head>
  • <nav> - The <nav> tag is used to define a set of navigation links. This tag used only in those area of document where navigation links will be displayed, like menus navigation link, sidebar navigation link, footer navigation link, etc.
    • USAGE:-
      • <nav>
          <a href="/html/">HTML</a> |
          <a href="/css/">CSS</a> |
           <a href="/javascript/">JavaScript</a>
        </nav>

 


Listing Tag:-

  • <ul> - The <ul> tag is used to create unordered list, such as bulleted list. You can see we used in current document the black circle before the <ul> tag. To creat undorderd list we use <li> tag within <ul> tag.
    • USAGE:-
      • <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ul>
  • <ol> - This one is used to ordered list (Numbered list or Alphabetical list). Here also <li> tag is used to create item list.
    • USAGE:-
      • <ol>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ol>
  • <li> - The <li> tag deifnes a list item in document. It is used within <ul>, <ol>, and other listing tags to creeate item list.
    • USAGE:-
      • <ul>
          <li>HTML</li>
          </ul>
      • <ol>
           <li>JavaScript</li>
        </ol>
  • <dir> - The <dir> tag defines directory titles list in HTML document.
    • Note:- It is not supported by HTML5.
    • USAGE:-
      • <dir>
          <li>web designing</li>
          <li>php</li>
          <li>java</li>
        </dir>
  • <dl> - The <dl> tag is a description list and used to create list with description of item.
    • USAGE:-
      • <dl>
          <dt>HTML</dt>
          <dd>A Markup Language to create web page</dd>
          <dt>CSS</dt>
          <dd>A styling language to make web page look better</dd>
        </dl>
  • <dt> - In descript list the <dt> tag defines a term or name for item.
    • USAGE:-
      • <dl>
        <dt>HTML</dt>
          <dd>A Markup Language to create web page</dd>
          <dt>CSS</dt>
          <dd>A styling language to make web page look better</dd>
        </dl>
  • <dd> - The <dd> tag is used to define description of a term or name in description list.
    • USAGE:-
      • <dl>
        <dt>HTML</dt>
          <dd>A Markup Language to create web page</dd>
          <dt>CSS</dt>
          <dd>A styling language to make web page look better</dd>
        </dl>

Sample for Linking tag:-

<!DOCTYPE html>
<html>
<head>
<title>Sample for Linking tag</title>
  <link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<nav width="960">
  <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a>
</nav>
<h2>HTML Links</h2>
<p><a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

</body>
</html>

 

Sample for Listing Tag:

<!DOCTYPE html>
<html>
<head>
<title>Sample for Listing tag</title>
</head>
<body>
<p><strong>Undordered List:</strong></p>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
<br><br>
<p><strong>Ordered list:</strong></p>
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
<br><br>
<p><strong>Directory list:</strong></p>
<dir>
  <li>web designing</li>
  <li>php</li>
  <li>java</li>
</dir>
<br><br>
<p><strong>Description List:</strong></p>
<dl>
  <dt>HTML</dt>
  <dd>A Markup Language to create web page</dd>
  <dt>CSS</dt>
  <dd>A styling language to make web page look better</dd>
</dl>

</body>
</html>

 

More you may like to read