HTML Basic Tags

/

HTML has a lot of tags that we can use to create simple to a very complex web page. Before going deep into the ocean of HTML tags, we should learn HTML basic tags first.

First of all lets have an overview of what those HTML basic tas are.

<html> – The main container for HTML pages

<head> – The container for page header information

<title> – The title of the page

<body> – The main body of the page

Now we have a basic idea of what are the names and a basic overview of HTML basic tags. Let’s now dig into some more explanations for these tags.

1. The <HTML> Tag – HTML Basic Tags

Any web page on the internet starts with the HTML tag. In our previous tutorial, we explained that every tag in the HTML has an opening tag and a closing tag. This is true for the HTML tags as well. So the opening tag for HTML will be <HTML> and closing tag for HTML is </html>

Apart from this, some experts say HTML tags have child tags which are given below:

  • <head>
  • <body>

2. The <Head> Tag – HTML Basic Tags

The <head> element is just a container for all other header elements. It should be the first thing to appear after the opening <html> tag.
Each <head> element should contain an <title> element indicating the title of the document, although it may also contain any combination of the following elements, in any order:

  • The <base> tag is used to create a “base” URL for all links on the page. Check HTML Base tag.
  • The <object> tag is designed to include images, JavaScript objects, Flash animations, MP3 files, QuickTime movies, and other components of a page. Check HTML Object tag.
  • The <link> tag is used to link to an external file, such as a style sheet or JavaScript file. Check HTML Link tag.
  • The <style> tag is used to include CSS rules inside the document. Check HTML Style tag.
  • The <script> tag is used to include JAVAScript or VBScript inside the document. Check HTML Script tag.
  • The <meta> tag includes information about the document such as keywords and a description, which are particularly helpful for search applications. Check HTML Meta tag.

 3. The <title> Tag – HTML Basic Tags

You should specify a title for every page that you write inside the <title> element. This element is a child of the <head> element). It is used in several ways:

  • It displays at the very top of a browser window.
  • It is used as the default name for a bookmark in browsers such as IE and Netscape.
  • It is used by search engines that use its content to help index pages.

Therefore it is important to use a title that really describes the content of your site. The <title> element should contain only the text for the title and it may not contain any other elements.

4. The <BODY> Tag – HTML Basic Tags

The <body> element appears after the <head> element and contains the part of the Web page that you actually see in the main browser window, which is sometimes referred to as body content.
An <body> element may contain anything from a couple of paragraphs under a heading to more complicated layouts containing forms and tables.
Most of what you will be learning in this and the following five chapters will be written between the opening <body> tag and closing </body> tag.

Putting all Together:

Try it

<html>
<head>
<title>This is title</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod, nibh sit amet vulputate molestie, dolor ante efficitur lectus, quis porta est sapien lacinia erat. Curabitur lobortis nisl felis, id ornare arcu vehicula at. Quisque aliquam venenatis interdum. Vivamus pharetra, massa nec finibus porta, felis dolor venenatis ligula, scelerisque varius odio ipsum ut augue. Morbi eget lacus lectus. Curabitur mollis tortor ipsum, eu mollis ligula venenatis eu. Nunc id urna porta, feugiat tellus vitae, pharetra erat. Morbi egestas justo sit amet nibh congue, ac lobortis enim varius. Morbi condimentum ligula augue, vel ullamcorper dolor mollis nec. Donec laoreet ultrices eros, sit amet volutpat leo consectetur eget. Integer tortor tellus, egestas vel augue eget, ornare mollis urna. Aenean at rutrum orci. Nulla molestie urna ac finibus commodo. Donec dictum nibh in est congue iaculis.
</body>
</html>