Author : MD TAREQ HASSAN | Updated : 2023/10/25
About html tags
- Tags are instructions to browser about how to display content
- Content canbe plain text, image, audio, video etc.
- Browser understands tags, and displays content differently depending on the tag
- Tags are written with pair of angle brackets ()
- A tag starts with
<>and ends with</> - Example:
<p>xyz</p>
- A tag starts with
- There are few tags that are non-container tags
- Written as
<x /> - Example: tag for a line break is
<br />
- Written as
- Tags are not case sensitive, but all tags should/must be written in lower case letter
- White space is ignored by web browsers
- HTML Tags can be nested, one tag can contain other tags
HTML 5 template
In VS Code, type “html:5” and press tab, it will give HTML 5 template as following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Explanation:
- ”
<html> </html>”: start and end of html page - Html document (page) has 2 main sections: head section and body section
- ”
<head> </head>”: start and end of head section - ”
<body> </body>”: start and end of body section
- ”
- ”
<title> </title>”: title of the html document. Must be inside head section
Comment tag
- Syntag:
<!-- comment text here --> - Comment will be ignored by the browser (commnet is written as note about the html code)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML commnet</title>
</head>
<body>
<!-- this is html comment (it will be ignored by the browser) -->
</body>
</html>
br and hr tag
<br />:- break tag is a non-container tag, it does not have end
- It is used to give vertical space
<hr />- break tag is a non-container tag, it does not have end
- It is use to show a horizontal line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Break and horizontal line</title>
</head>
<body style="margin: 2em;">
This is a longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg line, <br /> use break
<br />
<br />
Line 2
<br />
Horizontal line below
<hr />
Line 3
</body>
</html>
h tag
- There are 6 heading tags: h1, h2, h3, h4, h5, h6
- The higher the number, the smaller in size & lower the importance (sub heading)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heading tags</title>
</head>
<body style="margin: 2em;">
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
</body>
</html>
p tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph tag</title>
</head>
<body style="margin: 2em;">
<p>This is a paragraph. It can container multiple lines of text.</p>
</body>
</html>
div tag
div tag is container for block of content (block type tag)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divition tag</title>
</head>
<body style="margin: 2em;">
<div>
This is plain text inside a div
<h1>h1 tag inside a div</h1>
<p>This is a paragraph inside a div</p>
</div>
</body>
</html>
span tag
- Span tag is a container for in-line content, such as content inside a paragraph
- Use span tag to target a small portion of a paragraph for styling purposes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Span tag</title>
</head>
<body style="margin: 2em;">
<span>inline content</span>
<p>This is a paragraph. <span>this is span inside a p tag</span></p>
</body>
</html>
Text formatting tag
Old way
- b tag for bold text:
<b> </b> - i tag for itallic text:
<i> </i> - sttrike tag for strikethrough text:
<strike> </strike>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bold, itallic and strike tags</title>
</head>
<body style="margin: 2em;">
<b>This is bold text</b>
<i>This is itallic text</i>
<strike>This is trikethrough text</strike>
</body>
</html>
New way (do not use b, i and strike tags):
- To denote important text, use “
<strong> </strong>” (do not use b tag) - To denote emphasized text, use “
<em> </em>” (do not use i tags) - To denote inaccurate text, use “
<s> </s>” (do not use strike tag)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strong, em and s tags</title>
</head>
<body style="margin: 2em;">
<strong>Shown as bold text, but it indicates important</strong>
<br />
<br />
<em>Shown as itallic text, but it indicates emphasize</em>
<br />
<br />
<s>Shown as trikethrough text, but it indicates inaccurate text</s>
<br />
<br />
<!-- using u tag to mark spelling error (using css to style underline stroke) -->
<p>In American English, <u style="text-decoration: #f00 wavy underline;">Colour</u> is wrong, right spelling is "color"</p>
</body>
</html>
u tag (<u> </u>) for text annotations
- Note: before HTML 5, u tag was used for underlining text (do not use u tag for underlining text)
- Use u tag to mark text as some form of non-textual annotation
Example: annotating/indicating spelling errors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text annotation</title>
</head>
<body style="margin: 2em;">
<!-- using u tag to mark spelling error (using css to style underline stroke) -->
<p>In American English, <u style="text-decoration: #f00 wavy underline;">Colour</u> is wrong, right spelling is "color"</p>
</body>
</html>
tt tag (<tt> </tt>): typewriter text, text will be shown as monospaced
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typewriter text</title>
</head>
<body style="margin: 2em;">
<tt>This text will be shown as if written with old typewriter</tt>
</body>
</html>
pre tag
- Represents preformatted text which
- Will be presented exactly as written in the HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pre tag</title>
</head>
<body style="margin: 2em;">
<pre>
This text will be shown
exactly as
written
</pre>
</body>
</html>
sup and sub tag
sup tag
- sup tag specifies inline text which is to be displayed as superscript
- Superscripts are usually rendered with a raised baseline using smaller text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Superscript tag</title>
</head>
<body style="margin: 2em;">
<h1>Area of a circle is: πr<sup>2</sup></h1>
</body>
</html>
sub tag
- sub tag specifies inline text which should be displayed as subscript
- Subscripts are typically rendered with a lowered baseline using smaller text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subscript tag</title>
</head>
<body style="margin: 2em;">
<p>The chemical symbol of water is: H<sub>2</sub>O</p>
</body>
</html>
code tag
- code tag is use to show computer code (html, css, programming language etc.)
- By default, the content text is displayed using the user agent’s default monospace font.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code tag</title>
</head>
<body style="margin: 2em;">
<code>
var x = new Pet();
</code>
</body>
</html>
Quotation tag
q tag (inline quotation)
- Use q tag to show quoted text (i.e. text within double quotation
"") - q tag is for shorter inline quotations enclosed in quotation marks
- Using explicit quotation punctuation (
"") is same as using q tag ("xxx"and<q>xxx</q>are same)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline quotation with q tag</title>
</head>
<body style="margin: 2em;">
<!-- q tag is same as using double quotation explicitly -->
<p>
I say, <q>everything has a price, either in this life or in after life</q>
</p>
</body>
</html>
blockquote tag (block level quotation)
- Blockquote specifies a section that is quoted from another source
- Indicates that the enclosed text is an extended quotation
- Rendered visually by indentation
- No double quotation punctuation
""(use explicit""if you need it)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blockquote tag</title>
</head>
<body style="margin: 2em;">
<div>
<blockquote>
<p>Everything has a price, either in this life or in after life.</p>
</blockquote>
<p>- TARIK HASAN</p>
</div>
</body>
</html>
mark tag
- Marked or highlighted for reference or notation purposes
- By default text is highlighted with yellow color
Example: use mark element to bring attention to a particular part of a sentance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text highlight with mark tag</title>
</head>
<body style="margin: 2em;">
<p>
Some people are <mark>color</mark> blind.
</p>
</body>
</html>
a tag
- Anchor tag:
<a href="url" target="_blank">Some text to show</a> - It creates a hyperlink to another entity - web pages, files, email addresses, locations within the current page, or anything else a URL (indicated by href) can address
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor tag</title>
</head>
<body style="margin: 2em;">
<a href="https://hovermind.com/csharp/" target="_blank">Go to C# page in hovermind.com</a>
</body>
</html>
img tag
- Image tag syntax:
<img src="url (image location)" alt="xyz" /> - src attribute: specifies the path to the image
- alt attribute: specifies an alternate text for the image, if the image for some reason cannot be displayed
- size of the image can be controlled using width and height:
<img src="url" alt="xyz" width="100" height="200" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image tag</title>
</head>
<body style="margin: 2em;">
<img src="https://unseen-japan.com/wp-content/uploads/2022/09/pixta_58797164_M.jpg"
alt="Momiji" width="800" height="400" />
</body>
</html>
List tag
Unordered list (<ul> </ul>)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unodered list</title>
</head>
<body style="margin: 2em;">
<h1>Shopping list</h1>
<hr />
<ul>
<li>Potato</li>
<li>Tomato</li>
<li>Onion</li>
<li>Garlic</li>
<li>Green chilli</li>
</ul>
</body>
</html>
Ordered list (<ol> </ol>)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odered list</title>
</head>
<body style="margin: 2em;">
<h1>Todo list</h1>
<hr />
<ol>
<li>Wake up</li>
<li>Drink coffee</li>
<li>Join meeting</li>
<li>Prepare pptx</li>
<li>Submit pptx</li>
</ol>
</body>
</html>
table tag
- table tag has two sections: head and body
- Each row is created with
<tr> </tr> <tr> </tr>containsth(in head section) ortd(in body section)<th> </th>&<td> </td>contains actual data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML table</title>
</head>
<body style="margin: 2em;">
<h1>Member information table</h1>
<hr />
<table>
<!-- head section of table -->
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Profession</th>
</tr>
</thead>
<!-- body section of table -->
<tbody>
<tr>
<td>1</td>
<td>HASAN</td>
<td>Technical Architect</td>
</tr>
<tr>
<td>2</td>
<td>Meherun</td>
<td>Housewife</td>
</tr>
<tr>
<td>3</td>
<td>Salma</td>
<td>Housewife</td>
</tr>
<tr>
<td>4</td>
<td>Ibrahim</td>
<td>Kaishain</td>
</tr>
<tr>
<td>5</td>
<td>Nazmul</td>
<td>Kaishain</td>
</tr>
<tr>
<td>6</td>
<td>Soharaf</td>
<td>Kaishain</td>
</tr>
</tbody>
</table>
</body>
</html>