HTML Tags - Part:1 - What are HTML Basic Tags, Meta Tags and Programming Tags?

HTML Tags Part I

What are HTML Basic Tags, Meta Tags and Programming Tags?

As we already discussed about HTML Tags earlier. Now we are going to discuss each of Tags step by step in details with practical.

Here you can check the format of HTML code which looks likes:

Format of Code:

<!DOCUMENT HTML>
<html>
<head>
<title></title>
</head>
<body>
----rest document code----
</body>
</html>

In this HTML Tags Part I we are going to discuss about few basics but very important HTML tags. Without these tags it’s not possible to design and run a Web Page. So let’s start.

In this post we will describe 3 types of HTML tags:

HTML Basic Tags
HTML Meta Tags
HTML Programming Tags

HTML BASIC TAGS

Tag	Tag Name	Description
<!DOCTYPE>	Document Type	Define the type of document
<html>	HTML Main	Define the HTML page
<body>	HTML Page Body	Define the content of the page
<h1> to <h6>	Heading	Heading style 1 to 6
<p>	Paragraph	Paragraph
<br>	Break Row	Row to Next line
<hr>	Horizontal Row	Make a line
<!--..-->	Comments	Comment any content.

Important Notes and Tips:

The basic tags are necessary for start with new HTML document.
For formatting, earlier we were using inline text formatting, which comes under your tags but now we are using CSS to design our page more attractive. CSS we will study after completing HTML course.

Lets Checkout this example:

Code:

Result:

Explanation of code:

You can check below explanation for above code and result.

HTML Meta Tags

The metadata will not be displayed on the page, but will be machine parable. The <meta> tag provides metadata about the HTML document. Its elements are typically used to specify page description, keywords, author of the document, last modified and other metadata.

Tag	Tag Name	Description
<head>	Head Tag	Head tag define information about the document.
<meta>	Meta Info Tag	Meta info defines metadata about the document.
<base>	Base URL tag	Base tag specifies the base URL/Target for all relative URLs in a document.

Important Notes and Tips:

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
The following tags can go inside the <head> element:
- <title> Require for every html page.
- <style>
- <base>
- <link>
- <meta>
- <script>
- <noscript>
The title of your document under “<title> Title tag” can be big but not more than 50 lines, it will help you to grab your page to search engine like Google.
<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
There can only be one single <base> element in a document, and it must be inside the <head> element.

Code:

Result:

Code Explain:

As you can see the information is stored to back-end but not visible to page that's the magic of Meta information tag.

The main root directory URL you have mentioned over <head> => <base> tag, then you no need to mention full path every time inside your document code, you have to just mention file name as shown in code it will gives you same result.

HTML Programming Tags

HTML programming tags indicates the scripts or embedded objects to your HTML document. It helps you to make your HTML document more dynamic and attractive. These tags can be use under <head> tags or inside the <body> as per requirement of the projects. Let’s start:

Tag	Tag Name	Description
<script>	Script Tag	Its used to define client-side scripts which can be written in Java/VB/Python etc
<noscript>	NoScript Tag	Its used if user do not support client-side script.
<embed>	Embed Tag	Defines a container for an external (non-HTML) application
<object>	Object Tag	Defines an embedded object
<param>	Param Tag	Defines a parameter for an object

Important Notes and Tips:

The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
The <noscript> element can be used in both <head> and <body>. When used inside <head>, the <noscript> element could only contain <link>, <style>, and <meta> elements.
The <embed> tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.
The <object> tag defines a container for an external resource.
The external resource can be a web page, a picture, a media player, or a plug-in application.
To embed a picture, it is better to use the <img> tag.
To embed HTML, it is better to use the <iframe> tag.
To embed video or audio, it is better to use the <video> and <audio> tags.
The<param> tag is used to define parameters for an <object> element.

Code:

Result:

Code Explain:

As you can see here we given script tag under document and output comes “Hello Programmers!” from script this out put is not written in HTML.even we can make this script in different file and source can provide under <head> tag, result will be the same.
Assume we did not have any script unable on your system or JavaScript is disable on your system then you will not get “Hello Programmers!” word on your document. What you can see is the text present under <noscript> tag.
As a example we embed an another HTML document or website inside your HTML document.
As you can see there is a MP3/Video player as well, which is output from a <object> tag.

Request you to try by your own to understand much better if you have any query or you phase with problem some where, feel free to leave your comments.

Hope you understood about basic tags if any doubt please leave a comment. In next article we will discuss about more tags.

References:

https://www.w3schools.com/tags/