Scribd
Upload
13 views

HTML Tags

Uploaded by

Puthin Dungala
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

HTML Tags

Uploaded by

Puthin Dungala
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

HTML Tags

HTML tags are like keywords which defines that how web browser will format and
display the content. With the help of tags, a web browser can distinguish between an
HTML content and a simple content. HTML tags contain three main parts: opening tag,
content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, 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 tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate
between a simple text and HTML text. You can use as many tags you want as per your
code requirement.

o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag>
(except some tags)

Syntax
<tag> content </tag>

HTML Tag Examples


Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given
below:

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>


<b> Bold Tag </b>

<i> Italic Tag </i>

<u> Underline Tag</u>


TUnclosed HTML Tags
Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the
webpage.

HTML Meta Tags


DOCTYPE, title, link, meta and style

HTML Text Tags


<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>,
<address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>,
<kbd>, <pre>, <samp>, <var> and <br>

HTML Link Tags


<a> and <base>

HTML Image and Object Tags


<img>, <area>, <map>, <param> and <object>

HTML List Tags


<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags


table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags


form, input, textarea, select, option, optgroup, button, label, fieldset and legend

HTML Scripting Tags


script and noscript

Note: We will see examples using these tags in later charters.

HTML Tags List


Following is the complete list of HTML tags with the description which are arranged
alphabetically.

Note: Here represents newly added Elements in HTML5.

HTML Tags by Alphabets

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Tag name Description

<!-- --> This tag is used to apply comment in an HTML document.

<!DOCTYPE> This tag is used to specify the version of HTML

<a> It is termed as anchor tag and it creates a hyperlink or link.

<abbr> It defines an abbreviation for a phrase or longer word.

<acronym> It defines acronym for a word. (Not supported in HTML5)

<address> It defines the author's contact information of the HTML article

<applet> It defines an embedded Java applet. (Not supported in HTML5)

<area> It defines the area of an image map.

<article> It defines the self-contained content.

<aside> It defines content aside from main content. Mainly represented as sidebar.

<audio> It is used to embed sound content in HTML document.

<b> It is used to make a text bold.

<base> This tag defines the base URL for all relative URL within the document.
<basefont> This tag is used to set default font, size and color for all elements of
document. (Not supported in HTML5)

<bdi> This tag is used to provide isolation for that part of text which may be formatted
in different directions from its surrounding text.

<bdo> It is used to override the current text direction.

<big> This tag is used to make font size one level larger than its surrounding
content. (Not supported in HTML5)

<blockquote> It is used to define a content which is taken from another source.

<body> It is used to define the body section of an HTML document.

<br> It is used to apply single line break.

<button> It is used to represent a clickable button

C
<canvas> It is used to provide a graphics space within a web document.

<caption> It is used to define a caption for a table.

<center> It is used to align the content in center. (Not supported in HTML5)

<cite> It is used to define the title of the work, book, website, etc.

<code> It is used to display a part of programming code in an HTML document.

<col> It defines a column within a table which represent common properties of


columns and used with the <colgroup> element.

<colgroup> It is used to define group of columns in a table.

D
<data> It is used to link the content with the machine-readable translation.

<datalist> It is used to provide a predefined list for input option.

<dd> It is used to provide definition/description of a term in description list.

<del> It defines a text which has been deleted from the document.
<details> It defines additional details which user can either view or hide.

<dfn> It is used to indicate a term which is defined within a sentence/phrase.

<dialog> It defines a dialog box or other interactive components.

<dir> It is used as container for directory list of files. (Not supported in HTML5)

<div> It defines a division or section within HTML document.

<dl> It is sued to define a description list.

<dt> It is used to define a term in description list.

E
<em> It is used to emphasis the content applied within this element.

<embed> It is used as embedded container for external file/application/media, etc.

F
<fieldset> It is used to group related elements/labels within a web form.

<figcaption> It is used to add a caption or explanation for the <figure> element.

<figure> It is used to define the self-contained content, and s mostly refer as single unit.

<font> It defines the font, size, color, and face for the content. (Not supported in
HTML5)

<footer> It defines the footer section of a webpage.

<form> It is used to define an HTML form.

<frame> It defines a particular area of webpage which can contain another HTML
file. (Not supported in HTML5)

<frameset> It defines group of Frames. (Not supported in HTML5)

H
<h1> to <h6> It defines headings for an HTML document from level 1 to level 6.
<head> It defines the head section of an HTML document.

<header> It defines the header of a section or webpage.

<hr> It is used to apply thematic break between paragraph-level elements.

<html> It represents root of an HTML document.

I
<i> It is used to represent a text in some different voice.

<iframe> It defines an inline frame which can embed other content.

<img> It is used to insert an image within an HTML document.

<input> It defines an input field within an HTML form.

<ins> It represent text that has been inserted within an HTML document.

<isindex> It is used to display search string for current document. (Not supported in
HTML5)

K
<kbd> It is used to define keyboard input.

L
<label> It defines a text label for the input field of form.

<legend> It defines a caption for content of <fieldset>

<li> It is used to represent items in list.

<link> It represents a relationship between current document and an external resource.

M
<main> It represents the main content of an HTML document.

<map> It defines an image map with active areas.

<mark> It represents a highlighted text.


<marquee> It is used to insert the scrolling text or an image either horizontally or
vertically. (Not supported in HTML5)

<menu> It is used for creating a menu list of commands.

<meta> It defines metadata of an HTML document.

<meter> It defines scalar measurement with known range or fractional value.

N
<nav> It represents section of page to represent navigation links.

<noframes> It provides alternate content to represent in browser which does not support
the <frame> elements. (Not supported in HTML5)

<noscript> It provides an alternative content if a script type is not supported in browser.

O
<object> It is used to embed an object in HTML file.

<ol> It defines an ordered list of items.

<optgroup> It is used to group the options of a drop-down list.

<option> It is used to define options or items in a drop-down list.

<output> It is used as container element which can show result of a calculation.

P
<p> It represents a paragraph in an HTML document.

<param> It defines parameter for an <object> element

<picture> It defines more than one source element and one image element.

<pre> It defines preformatted text in an HTML document.

<progress> It defines the progress of a task within HTML document.

Q
<q> It defines short inline quotation.
R
<rp> It defines an alternative content if browser does not supports ruby annotations.

<rt> It defines explanations and pronunciations in ruby annotations.

<ruby> It is used to represent ruby annotations.

S
<s> It render text which is no longer correct or relevant.

<samp> It is used to represent sample output of a computer program.

<script> It is used to declare the JavaScript within HTML document.

<section> It defines a generic section for a document.

<select> It represents a control which provides a menu of options.

<small> It is used to make text font one size smaller than document?s base font size.

<source>> It defines multiple media recourses for different media element such as
<picture>, <video>, and <audio> element.

<span> It is used for styling and grouping inline.

<strike> It is used to render strike through the text. (Not supported in HTML5)

<strong> It is used to define important text.

<style> It is used to contain style information for an HTML document.

<sub> It defines a text which displays as a subscript text.

<summary> It defines summary which can be used with <details> tag.

<sup> It defines a text which represent as superscript text.

<svg> It is used as container of SVG (Scalable Vector Graphics).

T
<table> It is used to present data in tabular form or to create a table within HTML
document.
<tbody> It represents the body content of an HTML table and used along with <thead>
and <tfoot>.

<td> It is used to define cells of an HTML table which contains table data

<template> It is used to contain the client side content which will not display at time of page
load and may render later using JavaScript.

<textarea> It is used to define multiple line input, such as comment, feedback, and review,
etc.

<tfoot> It defines the footer content of an HTML table.

<th> It defines the head cell of an HTML table.

<thead> It defines the header of an HTML table. It is used along with <tbody> and
<tfoot> tags.

<time> It is used to define data/time within an HTML document.

<title> It defines the title or name of an HTML document.

<tr> It defines the row cells in an HTML table

<track> It is used to define text tracks for <audio> and <video> elements.

<tt> It is used to define teletype text. (Not supported in HTML5)

U
<u> It is used to render enclosed text with an underline.

<ul> It defines unordered list of items.

V
<var> It defines variable name used in mathematical or programming context.

<video> It is used to embed a video content with an HTML document

W
<wbr> It defines a position within text where break line is possible.
HTML Attribute
o HTML attributes are special words which provide additional information about
the elements or attributes are the modifier of the HTML element.
o Each element or tag can have attributes, which defines the behaviour of that
element.
o Attributes should always be applied with start tag.
o The Attribute should always be applied with its name and value pair.
o The Attributes name and values are case sensitive, and it is recommended by
W3C that it should be written in Lowercase only.
o You can add multiple attributes in one HTML element, but need to give space
between two attributes.

Syntax
1. <element attribute_name="value">content</element>

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h1> This is Style attribute</h1>
7. <p style="height: 50px; color: blue">It will add style property in element</p
>
8. <p style="color: red">It will change the color of content</p>
9. </body>
10. </html>
HTML Elements
An HTML file is made of elements. These elements are responsible for creating web
pages and define content in that webpage. An element in HTML usually consist of a
start tag <tag name>, close tag </tag name> and content inserted between
them. Technically, an element is a collection of start tag, attributes, end tag,
content between them.

Note: Some elements does not have end tag and content, these elements are termed as
empty elements or self-closing element or void elements.

Such as:

1. <p> Hello world!!! </p>

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>WebPage</title>
5. </head>
6. <body>
7. <h1>This is my first web page</h1>
8. <h2> How it looks?</h2>
9. <p>It looks Nice!!!!!</p>
10. </body>
11. </html>

o All the content written between body elements are visible on web page.

Void element: All the elements in HTML do not require to have start tag and end tag,
some elements does not have content and end tag such elements are known as Void
elements or empty elements. These elements are also called as unpaired tag.
Some Void elements are <br> (represents a line break) , <hr>(represents a
horizontal line), etc.

Nested HTML Elements: HTML can be nested, which means an element can contain
another element.

Block-level and Inline HTML elements


For the default display and styling purpose in HTML, all the elements are divided into
two categories:

o Block-level element
o Inline element

Block-level element:
o These are the elements, which structure main part of web page, by dividing a
page into coherent blocks.
o A block-level element always start with new line and takes the full width of web
page, from left to right.
o These elements can contain block-level as well as inline elements.

Following are the block-level elements in HTML.

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>,


<fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>,
<li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>,
<tfoot>, <ul> and <video>.

Note: All these elements are described in later chapters.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <div style="background-color: lightblue">This is first div</div>
7. <div style="background-color: lightgreen">This is second div</div>
8. <p style="background-color: pink">This is a block level element</p>
9. </body>
10. </html>
Test it Now

Output:

In the above example we have used

tag, which defines a section in a web page, and takes full width of page.

We have used style attribute which is used to styling the HTML content, and the
background color are showing that it's a block level element.

Inline elements:
o Inline elements are those elements, which differentiate the part of a given text
and provide it a particular function.
o These elements does not start with new line and take width as per requirement.
o The Inline elements are mostly used with other elements.

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>,
<dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>,
<samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>,
<time>, <tt>, <var>.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <a href="https://www.javatpoint.com/html-tutorial">Click on link</a>
7. <span style="background-color: lightblue">this is inline element</span>
8. <p>This will take width of text only</p>
9. </body>
10. </html>

Output:

Following is the list of the some main elements used in HTML:

Start tag Content End tag Description

<h1> ...... These are headings </h1>??..</h6> These elements are used to provide the
<h6> of HTML headings of page.

<p> This is the paragraph </p> This element is used to display a content
in form of paragraph.

<div> This is div section </div> This element is used to provide a section
in web page.

<br> This element is used to provide a line


break. ( void element)

You might also like