Basic HTML tags

Here are some important basic HTML tags that every web developer should know. Even if you are a beginner or professional developer you should know these basic HTML tags.

Document Outline

TagName
<!DOCTYPE>Version of HTML
<html>HTML document
<head>Page Information
<body>Page Content

<!DOCTYPE> (Document Type Definition)

The <!DOCTYPE> tag specifies the document type definition corresponding to the document. There are no attributes or events associated with this element.

The <!DOCTYPE> statement should be used as the first line of all documents

Syntax

<!DOCTYPE "DTD IDENTIFIER">

<html> (HTML Document)

<html> tag identifies an HTML or XHTML document.

<html> tag is also called as root element of an HTML document.

The <html> tag is the first tag in a document. Except for comments, the only tags it directly contains are <head> followed by <body>.

We should always specify the lang attribute inside the <html> tag, to declare the language of the Web page. It helps search engines and browsers to identify the language of the web page.
e.g <html lang="en">


<head> (Document Head)

<head> tag is used to define a head section of HTML document, It contains information about the HTML document as well as other information, such as style rules or scripts.

We can define following elements inside the head element:

  • <title (required)
  • <style>
  • <base>
  • <link>
  • <meta>
  • <script>
  • <noscript>

<body> (Document Body)

The <body> tag defines the body section of the document. It defines the main content of a HTML document.

The <body> element contains all the contents of a HTML document, including paragraphs, headings, hyperlinks, images, tables, lists, etc.

We can use only one <body> tag in a HTML document.

Syntax

<body> Place your Content here........</body>  

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Basic HTML Tags</title>
</head>
<body>

<h1>Welcome to Classic Programmer</h1>
<p>This paragraph is written inside the body tag</p> 

</body>
</html>

Output

HTML Basic Tag

This example include all the documented related tags such as <!DOCTYPE>, <html>, <head> and <body>.


Comment

<!– Comment Text –>Comment

Comments are just text written by developer that gives explanation about the code. It is ignored by browser and not visible to the user.

Comments make code easy to understand and increase readability of the code.

Anything written between these tags will be ignored by the browser, so comments will not be visible on the webpage.

You can add comments in your HTML code using <!– This is comment –> tag. So if you write anything inside these comment tag then it will be treated as a comment and the browser will not display it.

Syntax

<!-- Enter Your Comment -->  

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Basic HTML Tags</title>
</head>
<body>

<h1>Welcome to Classic Programmer</h1>   <!-- This is Heading(H1) tag -->  
<p>This paragraph is written inside the body tag</p> <!-- This is Paragraph tag -->

</body>
</html>

In the above example, text written inside <!-- --> the tag will be treated as a comment and the browser will not display it. It will show the same output as we have seen in the first example.


Page Information

<base>Base URL
<meta>Meta Data
<title>Title
<link>Relevant resource
<style>Style recource
<script>Script resource

<base> (Base URL)

The <base> tag specifies the base URL to be used for all relative URLs contained within a document.

The <base> tag must have either a target attribute or a href present, or both.

We can not use more than one <base> tag in a document, This element should only occur within the <head> element

Syntax

<base href="url"> 

Example

<head>
    <base href="https://www.classicprogrammer.tech"> 
</head>

<meta> (Meta-Information)

The <meta> tag specifies general information about a document that can be used in document indexing.

We can define <meta> tag only inside the <head> tag. It can be defined multiple times.

A common use of the <meta> tag is to set information for indexing tools, such as search engines. Common values for the name attribute when performing this function include description, author, and keywords; other attributes also can be included.

Browser does not displays metadata on page.

Syntax

<meta attribute="value">

Example

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Classic Programmer">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<title> (Document Title)

The <title> tag is used to display title of the webpage. The title must be in text format, and it is shown in the page’s tab or browser’s title bar.

The <title> tag is required in HTML documents.

The <title> tag must be defined inside the <head> tag.

The title is very important for SEO (search engine optimization). Search engine algorithms use title to decide the order when listing pages in search results.

Syntax

<title>Title of Your Site</title>  

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Basic HTML Tags</title>
</head>
<body>

<h1>Welcome to Classic Programmer</h1>
<p>This paragraph is written inside the body tag</p> 

</body>
</html>

This is the same example as we seen before.


<link> (Link to External Files or Set Relationships)

<link> tag specifies relationships between the current document and other documents or external source.

<link> tag is used to defining a relational framework for navigation and to link the external style sheet to a document. It is an empty element, which contains only attributes.

<link> tag can be defined inside the <head> tag.

Example

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Here, rel specifies relationships between the current document and other documents.


<style> (Style Information)

<style> is used to modify or add the style on existing HTML elements. We can add style information to HTML elements such as color, background, margin, padding, etc.

Style information also can be specified in external style sheets as defined by a <link> tag.

Style can be associated with a particular element using the style attribute.

Example

<html>
<head>
<style>
	h1 {
  	color:red;
  }
    p {
  	color:blue;
  	font-size: 20px;
  }
</style>
</head>
<body>

<h1>Welcome to Classic Programmer</h2>
<p>A paragraph.</p>

</body>
</html>

Output

HTML Style Tag

Style rules are often comment masked within a <style> tag to avoid interpretation by nonconforming browsers.

<style type="text/css">
   <!--
    body {background-color: red;}
    -->
</style>

<script>

Document Structure

<h1> To <h6>Heading
<div>Page section
<span>Inline section
<p>Paragraph
<br />Line break
<hr />Horizontal Rule

Links

<a href=””>Page link
<a href=”mailto:”>Email link

Text Markup

<strong>Strong emphasis
<em>Emphasis
<blockquote>Long quotation
<q>Short quotation
<abbr>Abbreviation
<address>Acronym
<pre>Pre-formatted text
<dfn>Defination
<code>Code
<cite>Citation
<del>Deleted text
<ins>Inserted text
<sub>Subscript
<sup>Superscript
<bdo>Text direction

List

<ol>Ordered list
<ul>Unordered list
<li>List item
<dl>Definition list
<dt>Definition term
<dd>Term description

Forms

<form>Form
<fieldset>Collection of fields
<legend>Form legend
<input />Form input
<label>Input label
<select>Drop-down box
<option>Drop-down option
<optgroup>Group of options
<textarea>Large text input
<button>Button

Tables

<table>Table
<caption>Caption
<thead>Table header
<tbody>Table body
<colgroup>Column group
<tfoot>Table footer
<col />Column
<tr>Table row
<th>Header cell
<td>Table cell

Images and Image Maps

<img />Image
<map>Image map
<area />Area of image map

Objects

<object>Object
<param />Parameter


What do you think? Is there anything that I missed? Share your thoughts in the comments.

nv-author-image

Kalpesh Khairnar

Hello Everyone, I'm Kalpesh. Energetic and passionate college student with the ability to work with open-source technologies. I spend most of my time in programming, blogging and helping other programming geeks.

Leave a Reply

Your email address will not be published. Required fields are marked *