Scribd
Upload
40 views11 pages

Overview of Essential HTML Tags

The document provides a comprehensive overview of various HTML tags, including their descriptions, syntax, and examples. It covers essential tags such as <html>, <head>, <body>, <title>, and others, detailing their purposes and usage in web development. This serves as a practical guide for understanding and utilizing HTML effectively in web technologies.

Uploaded by

manojkumar.2201128
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views11 pages

Overview of Essential HTML Tags

The document provides a comprehensive overview of various HTML tags, including their descriptions, syntax, and examples. It covers essential tags such as <html>, <head>, <body>, <title>, and others, detailing their purposes and usage in web development. This serves as a practical guide for understanding and utilizing HTML effectively in web technologies.

Uploaded by

manojkumar.2201128
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr.

Gr]/CSE

EX.NO: 1
Study on HTML tags
DATE:

AIM:
To study and demonstrate the purpose of HTML tags.

TAGS:
1. Comment tag
Description:
• The comment tag is used to insert comments in the source code.
• Comments are not displayed in the browsers.
• You can use comments to explain your code, which can help you when you edit the
source code at a later date.
• This is especially useful if you have a lot of code.
Syntax:
<!-- statements -->
Eg:
<!-- function display "Hello World!" //-->

2. <!DOCTYPE> tag
Description:
• All HTML documents must start with a <!DOCTYPE> declaration.
• The declaration is not an HTML tag. It is an "information" to the browser about what
document type to expect.
Syntax:
<!DOCTYPE html>
Eg:
<!DOCTYPE html>
<html>
<head>
<title>Study on HTML tags</title>
</head>
<body>
<p> The villagers are very simple-hearted people. They know no cunning.
They are pure in their thoughts and actions. </p>
</body>
</html>

HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE

3. <html> tag
Description:
• The <html> tag represents the root of an HTML document.
• The <html> tag is the container for all other HTML elements (except for
the <!DOCTYPE> tag).
Syntax:
<html> … </html>
Eg:
<!DOCTYPE html>
<html lang="en">
<head>
<title> HTML tag tutorial </title>
</head>
<body>
<p> The villagers are very simple-hearted people. They know no cunning.
They are pure in their thoughts and actions. </p>
</body>
</html>

4. <head> tag
Description:
• The <head> element is a container for metadata (data about data) and is placed between
the <html> tag and the <body> tag.
• Metadata is data about the HTML document.
• Metadata is not displayed.
• Metadata typically define the document title, character set, styles, scripts, and other
meta information.
Syntax:
<head> … </head>
Eg:
<head> <title> HTML tag tutorial </title> </head>

5. <body> tag
Description:
• 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.
Syntax:
<body> … </body>
Eg:
<body>
<h1> Paragraph about Village </h1>
<p> The villagers are very simple-hearted people. They know no cunning. They are
pure in their thoughts and actions. </p>
</body>

HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE

6. <title> tag
Description:
• The <title> tag defines the title of the document.
• The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
• The <title> tag is required in HTML documents!
• The contents of a page title is very important for search engine optimization (SEO).
• The page title is used by search engine algorithms to decide the order when listing pages
in search results.
• The <title> element:
➢ defines a title in the browser toolbar
➢ provides a title for the page when it is added to favourites
➢ displays a title for the page in search-engine results
Syntax:
<title> Title of web page </title>
Eg:
<title> HTML tag tutorial </title>

7. <p> tag
Description:
• The <p> tag defines a paragraph.
• Browsers automatically add a single blank line before and after each <p> element.
Syntax:
<p> Paragraph Contents </p>
Eg:
<body>
<p> The villagers are very simple-hearted people. They know no cunning.
They are pure in their thoughts and actions. </p>
</body>

8. <br> tag
Description:
• The <br> tag inserts a single line break.
• The <br> tag is useful for writing addresses or poems.
• The <br> tag is an empty tag which means that it has no end tag.
Syntax:
<br>
Eg:
<body> <p> The villagers are very simple-hearted people. <br> They know no
cunning. <br> They are pure in their thoughts and actions <br> </p> </body>

9. <a> tag
Description:
• The <a> tag defines a hyperlink, which is used to link from one page to another.
• The most important attribute of the <a> element is the href attribute, which indicates
the link's destination.

HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE

Syntax:
<a href="website link"> text </a>
Eg:
<a href="https://google.com">To visit Google</a>

10. <b> tag


Description:
• The <b> tag specifies bold text without any extra importance.
Syntax:
<b> Text </b>
Eg:
<p>This is normal text - <b>and this is bold text</b> </p>

11. <i> tag


Description:
• The <i> tag defines a part of text in an alternate voice or mood.
• The content inside is typically displayed in italic.
• The <i> tag is often used to indicate a technical term, a phrase from another language,
a thought, a ship name, etc.
Syntax:
<i> Text </i>
Eg:
<p><i>Lorem ipsum</i> is the most popular filler text in history</p>

12. <u> tag


Description:
• The <u> tag represents some text that is unarticulated and styled differently from
normal text, such as misspelled words or proper names in Chinese text.
• The content inside is typically displayed with an underline.
Syntax:
<u> Text </u>
Eg:
<p>This is some <u> mispeled </u> text</p>

13. <h1> to <h6> Tags


Description:
• The <h1> to <h6> tags are used to define HTML headings.
• <h1> defines the most important heading. <h6> defines the least important heading.
Syntax:
<h1> Text </h1>
<h2> Text </h2>
<h3> Text </h3>
<h4> Text </h4>
<h5> Text </h5>
<h6> Text </h6>

HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE

Eg:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

14. <img> tag


Description:
• The <img> tag is used to embed an image in an HTML page.
• Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.
• The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image, if the image for some reason cannot
be displayed
Syntax:
<img src="image file" alt="text/website link" width="100" height="100">
Eg:
<img src="Supercar.jpg" alt="www.supercars.com" width="500" height="600">

15. <link> tag


Description:
• The <link> tag defines the relationship between the current document and an external
resource.
• The <link> tag is most often used to link to external style sheets or to add a favicon to
your website.
• The <link> element is an empty element, it contains attributes only.

Syntax:
<head>
<link rel="file type" href="filename.extension">
</head>
Eg:
<head>
<link rel="stylesheet" href="styles.css">
</head>

16. <table> tag


Description:
• The <table> tag defines an HTML table.
• An HTML table consists of one <table> element and one or more <tr>, <th>,
and <td> elements.
• The <tr> element defines a table row, the <th> element defines a table header, and the
<td> element defines a table cell.

HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE

Syntax:
<table> … </table>
Eg:
<table>
<tr>
<th>Month</th>
<th>Salary</th>
</tr>
</table>

17. <tr> tag


Description:
• The <tr> tag defines a row in an HTML table.
• A <tr> element contains one or more <th> or <td> elements.
Syntax:
<table> <tr> … </tr> </table>
Eg:
<table>
<tr>
<th>Month</th>
<th>Salary</th>
</tr>
</table>

18. <th> tag


Description:
• The <th> tag defines a header cell in an HTML table.
• The text in <th> elements are bold and centered by default.
Syntax:
<table> <tr> <th> … </th> </tr> </table>
Eg:
<table>
<tr>
<th>Month</th>
<th>Salary</th>
</tr>
</table>

19. <td> tag


Description:
• The <td> tag defines a standard data cell in an HTML table.
• The text in <th> elements are bold and centered by default.
Syntax:
<table> <tr> <td> … </td> </tr> </table>

HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE

Eg:
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

20. <li> tag


Description:
• The <li> tag defines a list item.
• The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists
(<menu>).
• In <ul> and <menu>, the list items will usually be displayed with bullet points.
• In <ol>, the list items will usually be displayed with numbers or letters.
Syntax:
<li> Text </li>
Eg:
<ol>
<li>Maths</li>
<li>Physics</li>
<li>Chemistry</li>
</ol>
<ul>
<li>Maths</li>
<li>Physics</li>
<li>Chemistry</li>
</ul>

21. <ol> tag


Description:
• The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
• The <li> tag is used to define each list item.
Syntax:
<ol> … </ol>

Eg:
<ol>
<li>Maths</li>
<li>Physics</li>
<li>Chemistry</li>
</ol>

HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE

22. <ul> tag


Description:
• The <ul> tag defines an unordered (bulleted) list.
• Use the <ul> tag together with the <li> tag to create unordered lists.
Syntax:
<ul> … </ul>
Eg:
<ul>
<li>Maths</li>
<li>Physics</li>
<li>Chemistry</li>
</ul>

23. <button> tag


Description:
• The <button> tag defines a clickable button.
• Inside a <button> element you can put text (and tags
like <i>, <b>, <strong>, <br>, <img>, etc.). That is not possible with a button created
with the <input> element!
Syntax:
<button type="button"> Text </button>
Eg:
<button type="button">Click Here to learn HTML tutorial! </button>

24. <audio> tag


Description:
• The <audio> tag is used to embed sound content in a document, such as music or other
audio streams.
• The <audio> tag contains one or more <source> tags with different audio sources. The
browser will choose the first source it supports.
• The text between the <audio> and </audio> tags will only be displayed in browsers that
do not support the <audio> element.
• There are three supported audio formats in HTML: MP3, WAV, and OGG.
Syntax:
<audio> … </audio>
Eg:
<audio controls>
<source src="carhorn.ogg" type="audio/ogg">
<source src="truckhorn.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

25. <video> tag


Description:
• The <video> tag is used to embed video content in a document, such as a movie clip or
other video streams.

HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE

• The <video> tag contains one or more <source> tags with different video sources. The
browser will choose the first source it supports.
• The text between the <video> and </video> tags will only be displayed in browsers that
do not support the <video> element.
• There are three supported video formats in HTML: MP4, WebM, and OGG.
Syntax:
<video> … </video>
Eg:
<video width="320" height="240" controls>
<source src="Internet of things.mp4" type="video/mp4">
<source src="Artifical Intelligence.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

26. <abbr> tag


Description:
• The <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.",
"Dr.", "ASAP", "ATM".
Syntax:
<abbr title=abbreviation> acronym </abbr>
Eg:
The <abbr title="Message Query Telemetry Transport">MQTT</abbr> is a
messaging protocol.

27. <canvas> tag


Description:
• The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
• The <canvas> tag is transparent, and is only a container for graphics, you must use a
script to actually draw the graphics.
• Any text inside the <canvas> element will be displayed in browsers with JavaScript
disabled and in browsers that do not support <canvas>.
Syntax:
<canvas> … </canvas>
Eg:
<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE

28.<script> tag
Description:
• The <script> tag is used to embed a client-side script (JavaScript).
• The <script> element either contains scripting statements, or it points to an external
script file through the src attribute.
• Common uses for JavaScript are image manipulation, form validation, and dynamic
changes of content.
Syntax:
<script> … </script>
Eg:
<script>
document.getElementById("demo").innerHTML = "Hello PHP!";
</script>

29.<select> tag
Description:
• The <select> element is used to create a drop-down list.
• The <select> element is most often used in a form, to collect user input.
• The name attribute is needed to reference the form data after the form is submitted (if
you omit the name attribute, no data from the drop-down list will be submitted).
• The id attribute is needed to associate the drop-down list with a label.
• The <option> tags inside the <select> element define the available options in the drop-
down list.
Syntax:
<select> … </select>

<label for="cars">Choose a car:</label>


<select name="cars" id="cars">
<option value="bmw">BMW</option>
<option value="kia">KIA</option>
</select>
30.<option> tag
Description:
• The <option> tag defines an option in a select list.
• <option> elements go inside a <select>, <optgroup>, or <datalist> element.
Syntax:
<option value="text"> … </option>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="skoda">Skoda</option>
</select>

RESULT:
Thus, the study on HTML tags has been completed successfully.
HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR :Mrs.A.Shanmugapriya,AP[Sr.Gr]/CSE

LOGESHWARAN S 71812201120

You might also like