Skip to main content

Basic tag syntax explained in HTML


HTML is using tags for its syntax. A tag is made up of special characters: <,> and /.
They are interpreted by software to compose an HTML element.

Basic tag syntax explained in HTML
(Image Source - Google Images)

HTML elements generally come in pairs of tags.

To open a simple element with a start tag
  • It starts with <
  • Then a list of characters without space, the tag name (or element)
  • Ends usually with a >.

Then close the simple element with a final tag
  • It starts with </
  • Then the same list of characters without space, the tag name (or element)
  • Ends usually with a >.

If the tag name is "body", you get

<body> </body>

HTML Example
Let's create the first example

<!DOCTYPE html>

<html>
<head>
<title>Page Title</title>

</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>


</body>
</html>

Save this file as Test.html
Output: This is a Headline
            This is a paragraph.

Explanation of HTML Example :

<!DOCTYPE> - Define the document type or instruct the browser on the HTML version.

<html> - This tag informs the browser that it is an HTML document. The text between the HTML tag describes the web document. It is a container for all other HTML elements.

<head> - It must be the first element within the element, which contains the metadata (information about the document). It must be closed before the body tag opens.

<title> - As its name suggests, it is used to add the title of that HTML page that appears at the top of the browser window. It should be placed inside the head tag and closed immediately. (Optional)

<body> - The text between the body tag describes the content of the page body that is visible to the end-user. This tag contains the main content of the HTML document.

<h1> - The text between the <h1> tag describes the first level header of the web page.

<p> - The text between the <p> tag describes the paragraph on the web page.

Features of HTML
A list of the most important features of HTML language is given below :

  • It is a very easy and simple language. It can be easily understood and modified.
  • It is very easy to make an effective presentation with HTML because it has many formatting tags.
  • It is a markup language, so it provides a flexible way of designing web pages alongside text.
  • It makes it easier for programmers to add a link to web pages (by Html anchor tag), thereby increasing the interest of user navigation.
  • It is platform-independent because it can be displayed on any platform such as Windows, Linux, etc.
  • It makes it easier for the developer to add graphics, videos, and sound to web pages, making it more attractive and interactive.
  • HTML is a case-insensitive language, which means that we can use lowercase or uppercase tags.

Comments

Popular posts from this blog

WhatsApp to Start Offering Health Insurance, Micro-Pension Products in India Soon.

WhatsApp to Start Offering Health Insurance, Micro-Pension Products in India Soon. By the end of the year, WhatsApp plans to start offering affordable health insurance coverage from SBI General. (Image Source - Google Images) WhatsApp plans to start rolling out health insurance and micro-pension offers in India. India chief Abhijit Bose revealed WhatsApp's roadmap to deliver "critical livelihoods and financial services" to the country's mobile users at the Facebook Fuel for India event. The Facebook-owned company is working with SBI General to launch health insurance products, while HDFC Pension and Singapore-based firm PinBox Solutions are on board to offer micro-pension products. The new developments come alongside WhatsApp's digital payments company: WhatsApp Pay. By the end of the year, WhatsApp will begin offering affordable health insurance coverage from SBI General, Bose said during his presentation at the virtual event.  The executive also announced Whats...

How to disable WhatsApp message preview on lock screen

While iOS users have the option in the WhatsApp app to disable the preview option, Android users need to turn it off from the phone's settings section. (Image Source - Google Images) Have you ever given your phone to family members and worried that they might read a personal message on the notification panel or on the lock screen? If by chance you have experienced this, then there is a way to prevent accidents from happening. You can make sure this doesn't happen by simply disabling the WhatsApp notification or the preview message option. Note that when iOS users disable the preview option, WhatsApp only displays the sender's name and the notification text will be "Message". But this will not be the case for Android users as they will disable the WhatsApp notifications option in the phone settings. Keep reading to know more. (Image Source - Google Images) Android : How to disable WhatsApp message preview on lock screen Step 1 : Go to the Phone’s settings sectio...

Responsive Google Maps

Create Responsive Google Maps on Any Website. (Image Source - Google Images) Google Maps makes it easy to insert/embed a map into your own website. However, by default, Google Maps does not provide responsive support. In my Blog, I will show you how to make your maps responsive, using just a few lines of CSS. This technique will work on any website platform. 1. Get the embed code from Google Maps Go to Google Maps. Find the area of the map you want to use on your website. Click on the "Share" link. (Image Source - Google Images) Choose "Embed map". Select the iframe code. Right-click and copy the embed code. (Image Source - Google Images) 2. Use the Google Maps Embed Code Paste the embed code on your website. It will look similar to this: <iframe src="/" width="600" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> 2.1.Modify the Embed Code Add a div tag around the embed code. Use th...