HTML Tags
Most commonly used tags in HTML
HTML contains lots of predefined tag and further classified into two CONTAINER AND NON CONTAINER TAGS some of them are described below:
Document structure tag:
Container Tags:
Container tags : These are tags which we use to define the text or other tag elements.
These actually consist of two tags, a start tag and an end tag, which enclose the text.
- HTML tag: It is the root of the html document which is used to specify that the document is html.
Syntax:
<html> Statements here... </html>
Code:
- Head tag: Head tag is used to contain all the head element in the html file. It contains the title, style, meta, … etc tag.
Syntax:
<head> Statements... </head>
Code:
<head>Contains elements describing the document</head>
- Body tag: It is used to define the body of html document. It contains image, tables, lists, … etc.
Syntax:
<body> Statements... </body>
Code:
<body>The content of your HTML page</body>
- Title tag: It is used to define the title of html document.
Syntax:
<title> Statements... </title>
Code:
<tittle>tab name</tittle>
Content container tag:
- Heading tag: It is used to define the heading of html document.
Syntax:
<h1> Statements... </h>
<h2> Statements... </h2>
<h3> Statements... </h3>
<h4> Statements... </h4>
<h5> Statements... </h5>
<h6> Statements... </h6>
Code:
<h1>Heading 1 </h1>
<h2>Heading 2 </h2>
<h3>Heading 3 </h3>
<h4>Heading 4 </h4>
<h5>Heading 5 </h5>
<h6>Heading 6 </h6>
- Paragraph tag: It is used to define paragraph content in html document.
Syntax:
<p> Statements... </p>
Code:
<p>Welcome to techsolutionx web designing class</p>
- Emphasis tag: It is used to renders as emphasized text.
Syntax:
<em> Statements... </em>
Code:
<em>Techsolutionx</em>
- Bold tag: It is used to specify bold content in html document.
Syntax:
<b> Statements... </b>
Code:
<b>Bold word</b>
- Italic tag: It is used to write the content in italic format.
Syntax:
<i> Statements... </i>
Code:
<i>Techsolutionx blog</i>
- Small (text) tag: It is used to set the small font size of the content.
Syntax:
<small> Statements... </small>
Code:
<small>Example</small>
Underline tag: It is used to set the content underline.
Syntax:
<u> Statements... </u>
Code:
<u>Techsolutionx</u>
- Strike-through text tag: It is used to represent as deleted text. It cross the text content.
Syntax:
<strike> Statements... </strike>
Code:
<strike>Techsolutionx</strike>
- Anchor tag: It is used to link one page to another page.
Syntax:
<a href="..."> Statements... </a>
Code:
- Comment tag: It is used to set the comment in html document. It is not visible on the browser.
<!-- Statements... -->
Code:
<!--Comment section-->
- Scrolling Text tag: It is used to scroll the text or image content.
Syntax:
<marquee> Statements... </marquee>
Code:
<marquee background-color="#cccccc" loop="-1"
scrollamount="2" width="100%">
Example Marquee</marquee>
<a href="https://techsolutionx.blogspot.com/"> Techsolutionx blog</a>
- List tag: It is used to list the content
Syntax:
<li> Statements... </li>
Code:
<li>List item 1</li>
<li>List item 2</li>
- Ordered List tag: It is used to list the content in a particular order.
Syntax:
<ol> Statements... </ol>
Code:
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
- Unordered List tag: It is used to list the content without order.
Syntax:
<ul> Statements... </ul>
Code:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
- Center tag: It is used to set the content into the center.
Syntax:
<center> Statements... </center>
Code:
<center>Techsolutionx</center>
- Font tag: It is used to specify the font size, font color and font-family in html document.
Syntax:
<font> Statements ... <font>
Code:
<font face="Times New Roman">Example</font>
Non-Container Tags:
Non- container tag/empty tag : These are standalone text do not contain text. Or any other tag element.- Line break tag: It is used to break the line.
Syntax:
<br>
Code:
Techsolutionx<br>A computer science portal
- Image tag: It is used to add image element in html document.
Syntax:
<img>
Code:
<img src="MyPix.jpg" width="40"
height="40" >
- Link tag: It is used to link the content from external source.
Syntax:
<link>
Code:
<link rel="stylesheet" type="text/css" href="../css/style.css">
Note: it depends on where the file is located on your device
- Horizontal rule tag: It is used to display the horizontal line in html document.
Syntax:
<hr/>
Code:
<hr width="50%" size="3" />
- Meta tag: It is used to specify the page description. For example: last modifier, authors, … etc.
Syntax:
<meta> Statements ... <meta>
Code:
<meta name="Description" content="Description of your site">
<meta name="keywords" content="keywords describing your site">
Tables Tags:
Table tag:Table tag is used to create a table in html document.
Syntax:
<table> Statements... </table>
Code:
<table border="4" cell-padding="2" cell-spacing="2" width="100%">
<tr> <td>Column 1</td>
<td>Column 2</td> </tr> </table>
- Tr tag(Table row): It is used to define row of html table.
Syntax:
<tr> Statements... </tr>
Code:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
- Th tag(Table header): It defines the header cell in a table. By default it set the content with bold and center property.
Syntax:
<th> Statements ... <th>
Code:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
- Td(Table data)tag: It defines the standard cell in html document.
Syntax:
<td> Statements ... <td>
Code:
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
Input Tags:
- Form tag: It is used to create html form for user.
Syntax:
<form> Statements ... <form>
Code:
<form action="mailto:you@yourdomain.com ">
Name: <input name="Name" value="" size="80"><br>
Email: <input name="Email" value="" size="80"><br>
<br><center><input type="submit"></center>
</form>
- Submit input tag: It is used to take the input from the user.
Syntax:
<input>
Code:
<form method=post action="/cgibin/example.cgi">
<input type="text" style="color: #ffffff;
font-family: Verdana; font-weight: bold;
font-size: 12px; background-color: #72a4d2;"
size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
- Drop-down option tag: It is used to select an option from a drop-down list.
Syntax:
<option> Statements ... <option>
Code:
<form method=post action="/cgibin/example.cgi">
<center> Select an option:<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
</form>
- Radio button tag: It is used to select only one option from the given options.
Syntax:
<input>
Code:
<form method=post action="/cgibin/example.cgi">
Select an option:<br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3
Don't forget to comment & share
Comments
Post a Comment