Html Meta And Link Tags

Photo by Jackson So on Unsplash

Html Meta And Link Tags

·

4 min read

Table of contents

No heading

No headings in the article.

All tags in HTML are very useful in different ways whereby there are tags you can't but just make use of these tags. One cannot adapt to HTML without getting familiar with these tags and knowing about each tag's functionality when building a web page.

SOME OF THESE TAGS ARE;

DOCTYPE (Document type declaration)

HTML is an evolving language and gets updated regularly hence the various version of HTML, every version with its specification but here we are dealing with HTML5. This element is therefore written at the top of your document.

  • This tag gives an overall structure to your page, every HTML document must have this tag included.

  • This is more of an instruction than a tag because it tells the browser which version of HTML you are making use of in your document.

  • It is written before any other tag and it is directly followed by the "HTML" tag.

Example:

<!DOCTYPE html>

Example of the structure of an HTML document:

 <!DOCTYPE html>
  <html>
  <head>
  <title> My school </title>
  </head>
  <body>
   I am a student
  </body>
  </html>

TITLE TAG

This tag is used to identify or indicate the title of your document or webpage and it only identifies text.

  • This tag has a closing and opening tag and identifies only with the text written within it.

  • This tag is always nested within the "head" tag as seen in the example of the structure of an HTML document.

Example:

  <title> My school </title>

LINK TAG

This tag helps to define the relationship between an external source and the current document.

  • This element or tag is mostly used to link stylesheets(css) as well as external icons.

Example:

<link href="/media/examples/link-element-example.css" rel="stylesheet">

META TAG

This is an HTML tag that is used to specify or add metadata to your document.

  • Metadata is an additional important piece of information about the document.
  • The meta element is nested in the "head" element and is used to specify information such as keywords, author of the document, document description, viewport, refresh document, etc.
  • The meta tag doesn't have a closing tag because it is an empty element.

Example:

<head>
  <meta name="description" content="HTML meta and list tags">
  <meta name="keywords" content="HTML">
  <meta name="author" content="Esosa Otu">
  <meta name="viewport" content="width=device-width, initial-scale=2.0">
  <meta http-equiv="refresh" content="20">
</head>

LINK TAGS

The Anchor tag

  • This tag helps to define hyperlink that links one page to another. The hyperlink is like a word or button that leads to another location. Hyperlinks are used to navigate online content, once you click on it the link will take you to the targeted location either a webpage, document, etc.
  • The anchor element is used with the "href" attribute which indicates the destination of the link. The href consists of the URL which is the actual link and the anchor text which is the clickable text.

NOTE: There are three (3) appearances of HTML anchor tag:

  • The unvisited link is displayed underlined and blue.
  • The visited link is displayed underlined and purple.
  • The active link is displayed underlined and red.

Example:

<a href="https://esosa.hashnode.dev/"> Visit my blog!</a>

The Base tag

  • This tag is used to specify or identify the base URL or URI to use for all relative links in the HTML document.
  • In an HTML document, there can only be one base element that is nested in the head element.
  • The base element must either have an href or target attribute or both present. Whereby the "target attribute" can either contain elements such as; _blank, _parent, _self, and _top.

Example:

<head>
<base href="https://esosa.hashnode.dev/"  target="_blank"> 
</head>

CONCLUSION

Tags are what make up an HTML document and without them, you can't build a webpage as they are instructions that tell the browser what to do. If you go through my blog "esosa.hashnode.dev" I have written a broken down series of the different HTML tags and their functionality making it easy to understand better how one can make use of these tags correctly.

Documenting my learning journey has been a push for me to keep learning and writing more, giving me the ability to break down technical concepts into easier and straightforward concepts to aid faster understanding by the readers and beginners in tech.

Did you find this article valuable?

Support Esosa otu by becoming a sponsor. Any amount is appreciated!