HTML tags are like keywords that define that how web browsers will format and display the content. With the help of tags, a web browser can distinguish between HTML content and simple content. HTML tags contain three main parts: an opening tag, content, and closing tag. But some HTML tags are unclosed tags e.g. br and hr tag. If you planning to get yourself prepared for HTML Interview Questions, a question about HTML tags is very well expected.
When a web browser reads an HTML document, the browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tag has different properties. An HTML file must have some essential tags so that the web browser can differentiate between simple text and HTML text. You can use as many tags as you want as per your code requirement.
Tag Syntax
All HTML tags must be enclosed within < > these brackets. Every tag in HTML performs different tasks. If you have used an open tag, then you must use a close tag </> (except some tags like br and hr)
HTML Basic Tags
The html tag represents the root of an HTML document. The html tag is the container for all other HTML elements (except for the tag). Format :
Body Tag The body tag defines the document's body. The body element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello world!</h1>
<p>This is the Body of the Document.</p>
</body>
</html>
Note: There can only be one body element in an HTML Document.
Heading Tags
Any document starts with a heading. You can use different sizes for your headings.
View Website
View Website
View Website
HTML also has six levels of headings, which use the elements <h1> , <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, the browser adds one line before and one line after that heading.
<h1> defines the most important heading. <h6> defines the least important heading.
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Browsers automatically add a single blank line before and after each <p> element.
Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example −
HTML Code
<!DOCTYPE html>
<html>
<body>
<p>This is text in paragraph without styles applied.</p>
<p style="text-align:right">This is some text in a paragraph.</p>
</body>
</html>
Note: When we write some content in paragraphs in separate lines, the browser prints the text in space-separated format only.
Line Break Tag
Whenever you use the <br/> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.
Above we discussed the problem with Paragraph tags, that they don't print line separated content in separate lines.
Here, <br/> tag is used to solve that problem
Code:
<!DOCTYPE html>
<html>
<body>
<p>This is Line1.<br/>
This is Line2.
</p>
</body>
</html>
Horizontal Lines Tag
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.
Code
<!DOCTYPE html>
<html>
<body>
<p>A normal horizontal line.</p>
<hr>
</body>
</html>
HTML Meta Tags
HTML lets you specify metadata - additional important information about a document in a variety of ways. The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author, etc.
The <meta> tag is used to provide such additional information. This tag is an empty element and so does not have a closing tag but it carries information within its attributes.
Uses of Meta Tags
Document Revision Date
You can use the <meta> tag to give information about when last time the document was updated. This information can be used by various web browsers while refreshing your webpage.
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "IB, 26/02/2021" />
Document Refreshing
A <meta> tag can be used to specify a duration after which your web page will keep refreshing automatically.
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "IB, 26/02/2021" />
<meta http-equiv = "refresh" content = "5" />
Page Redirection
You can use the <meta> tag to redirect your page to any other webpage. You can also specify a duration if you want to redirect the page after a certain number of seconds.
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "IB, 26/02/2021" />
<meta http-equiv = "refresh" content = "5; url = http://www.interviewbit.com" />
Setting Author Name
You can set an author name in a web page using meta tag.
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Ashish Kumar" />
HTML Text Formatting Tags
HTML contains several elements for defining text with a special meaning.
Formatting elements were designed to display special types of text :
HTML <b> and <strong> Elements
The HTML <b> element defines the bold text, without any extra importance.
Code
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.
Code
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><strong>This text is important!</strong></p>
</body>
</html>
<i> and <em>
HTML <i> and Elements
The HTML <i> element defines a part of the text in an alternate voice or mood. The content inside is typically displayed in italic.
Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.
Code
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body>
</html>
<em>
The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.
Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
Code
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body>
</html>
HTML <mark> Element
The HTML <mark> element defines the text that should be marked or highlighted:
Code
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
HTML <del> Element
The HTML <del> element defines the text that has been deleted from a document. Browsers will usually strike a line through deleted text:
Code
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
HTML <sub> Element
The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:
Code
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>
###HTML sup Element### The HTML sup element defines superscript text. Superscript text appears half a character above the normal line and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like W[1]:
Code
<!DOCTYPE html>
<html>
<body>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
HTML <ins> Element
The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text:
Code
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
</body>
</html>
HTML Tags List
For commenting out sections of HTML or placing comments within HTML. Anything between won't be rendered as text when the page loads in a web browser, but will still be visible if looking at the plain 'ol HTML file in a text editor.
Basically tells the browser what kind of document we're loading, in this case good 'ol HTML. This guy likes to be the first element in the document, even before the opening
<a>
a for anchor, also known as a hyperlink, or simply a link. To make an actual link using the <a> tag.
<abbr>
Abbr is an abbreviation for abbreviation. Use it with the title attribute to define abbreviations. <abbr title="Cascading Style Sheets''>CSS. Safari 12.0 hovering the mouse over CSS brings up a little tooltip generated by the abbreviation tag.
<address>
Contact information for the author. Alternatively, this could be general contact information for the website.
<area>
Establishes areas in an image map. <area> is always used inside of <map>.
<article>
The <article> tag is new in HTML5. This tag can be used to contain blog entries, forum posts, etc.
<aside>
New in HTML5. The <aside> element is for making sidebars that are placed next to the main content.
<b> For bolding or otherwise styling text without conveying any additional meaning such as with and and etc.
<bdi> Short for bidirectional isolation. Useful for working with languages that use the right to left text.
<bdo> Short for Bidirectional Override. Use this to override the current direction of the text. Useful for languages that use the right to left text.
<blockquote> For quoting from an external source. Typically rendered as indented text.
<body> Establishes the body of an HTML document.
<br> Single line break. Think of br as short for a break.
<button> Specifies button that can be clicked. Commonly used with forms.
<code> For code examples. A little bit like
<samp> and <kbd>, but specifically for code
<col> Specify properties of a <col> within a <colgroup>
<colgroup> Essentially a group of columns
<data> Used for script-friendly data.
<del> Mark text as deleted without actually deleting it. This will typically be rendered as a strikethrough.
<dialog> Dialog box.
<div> A divider or a kind of generic container.
<em> Emphasis, which I believe often defaults to italics. For something stronger, use <strong>.
<embed> New in HTML5. A container for external content.
<figure> Define self-contained content such as photos or diagrams.
<footer> The footer of a document, below the main content.
<form> Forms for user input.
<h1> Level 1 heading, the headline or title of a page.
<h2> Level 2 heading, the subtitles of a page.
<h3> Level 3 heading.
<h4> Level 4 heading.
<h5> Level 5 heading.
<h6> Level 6 heading.
<head> The head section. Used mostly for metadata.
<header> Not to be confused with <head>, <header> typically contains introductory content and layout that goes above the body.
<hr> This can be used for separating text within a paragraph. Typically renders as a horizontal line running across the page.
<img> For displaying images on a webpage. Example: 
<input> Input is used with various attributes to create form input elements.
<ins> Useful for denoting text that has been added to an HTML file since the original version. Updates to a blog post for example. This is typically rendered as underlined text, although this can really be rendered just about any way you want with a stylesheet.
<label> For assigning labels to interface elements such as forms.
<li> This represents a list item with an <ol> (ordered list) or <ul> (unordered list).
<link> Used for linking to external resources. Typically seen in <head> referring to an external style sheet. Different from the <a> (anchor) tag.
<main> New to HTML5. These tags enclose the main content of an HTML document.
<map> Used when defining an image map.
<mark> This is essentially used for highlighting. Of course, whether or not highlighting is actually involved depends on the involved stylesheet.
<menu> Used for creating various kinds of menus.
<menuitem> Specify actions that can be taken with a menu.
<meta> Used for specifying various meta-information about the document. Meta tags are used within the document <head>.
<nav> Used for specifying a navigational region within a document.
<object> For embedding objects within a document.
<option> Used within the
<output> Displays the output of an action, such as from a script or form.
<pre> For preformatted text. This can be useful for demonstrating code, especially if there are multiple lines.
<script> Scripts inside of an HTML document are enclosed in the script tags.
<section> A nonspecific means of breaking up content within a webpage into sections.
<source> Used with <audio> and <video> for specifying media source.
<span> Useful for applying styles to or around text, especially inline.
<strong> The enclosed text is of strong importance.
<style> For declaring style sheets within a document.
<sub> For displaying subscript. Useful for math, especially in conjunction with <sup> (superscript).
<table> For making tables on an HTML page.
<template> Declares HTML snippets that can be used later.
<tfoot> Table footer.
<th> Table header cell.
<thead> Table header row.
<time> Specifies the date/time within a document.
<title> The title of an HTML document.
<tr> A row within a table.
<u> Useful for annotating text for various reasons. No longer specifically for underlining, although you can of course still do that with CSS.
Comments (0)