Collection of HTML Tags and examples
Collection of HTML Tags and examples Hypertext Markup Language or commonly abbreviated as HTML is a markup language used by programmers to help create the appearance of web pages. HTML is a universal standard that can create a web page and can be opened using a search engine such as Google or Bing.
To make it easier when designing a web using HTML, we must be able to use HTML tags properly. Here we have summarized some HTML tags that you can learn and practice yourself.
A collection of HTML tags and their functions and examples
Sometimes prolonged theory can make learning boring. Okay, without further ado, here are some basic HTML tags that programmers often use to design a website page. For that, continue to see the following review about some HTML tags along with their functions and examples.
Basic Tags
Tag Name | Function |
---|---|
<! DOCTYPE html> | Declaration to define document to be HTML |
<html> | Opening tag for creating HTML document |
<head> | Meta information about the document |
<title> | Create a page title that will later be displayed in the browser |
<body> | Where all website content is created using HTML |
Usage example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Page Title</title> | |
</head> | |
<body> | |
<h1>My First Heading</h1> | |
<p>My first paragraph.</p> | |
</body> | |
</html> |
Previews:
My First Heading
My first paragraph.
Title Tags
Tag Name | Function |
---|---|
<h1> s/d <h6> | Create a title or heading |
<hr> | Split content (usually a delimiter is displayed) |
Usage example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<body> | |
<h1>This is heading 1</h1> | |
<p>This is some text.</p> | |
<hr> | |
<h2>This is heading 2</h2> | |
<p>This is some other text.</p> | |
<hr> | |
<h2>This is heading 2</h2> | |
<p>This is some other text.</p> | |
</body> | |
</html> |
Previews:
This is heading 1
This is some text.
This is heading 2
This is some other text.
This is heading 2
This is some other text.
Paragraph Tags
Tag Name | Function |
---|---|
<p> | Creating paragraphs |
<br> | Create a new line |
<pre> | Format text or sentences |
Usage example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<body> | |
<p>In HTML, spaces and new lines are ignored:</p> | |
<br> example | |
<p> | |
My Bonnie lies over the ocean. | |
My Bonnie lies over the sea. | |
My Bonnie lies over the ocean. | |
Oh, bring back my Bonnie to me. | |
</p> | |
</body> | |
</html> |
Previews:
In HTML, spaces and new lines are ignored:
example
My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.
Style Tags
Tag Name | Function |
---|---|
style | Attributes for styling elements in HTML |
background-color | Give background color |
color | Color the text |
font-family | Change the font of the text |
font-size | Set font size |
text-align | Adjust text alignment |
Usage example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<body> | |
<h1 style="text-align:center;">Centered Heading</h1> | |
<p style="text-align:center;">Centered paragraph.</p> | |
</body> | |
</html> |
Previews:
Centered Heading
Centered paragraph.
Formatting Tags
Tag Name | Function |
---|---|
<b> | Make text bold |
<strong> | Create important text |
<i> | Make text italic |
<em> | Make text emphasized |
<mark> | Make text tagged |
<small> | Create small text |
<del> | Text deleted |
<ins> | Text entered |
<sub> | Subscript text |
<sup> | Superscript text |
Usage example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<body> | |
<p><b>This text is bold</b></p> | |
<p><i>This text is italic</i></p> | |
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p> | |
</body> | |
</html> |
Previews:
This text is bold
This text is italic
This is subscript and superscript
Image Tags
Tag Name | Function |
---|---|
<img> | Element to define the image |
src | Attribute to specify image URL |
alt | Defines the text on the image, if the image cannot be displayed |
width-height | Specifies the image size |
float | Properties for float images in CSS |
<map> | Defines a map image |
<area> | Defines the area or areas of the image on the map |
<picture> | Displays different images for different devices |
Usage example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<body> | |
<h2>Alternative text</h2> | |
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p> | |
<img src="cara-membuat-codepen-di-postingan-blogger.jpg" alt="how to make codepen in blogger post" width="300" height="300"> | |
</body> | |
</html> |
Previews:
Alternative text
The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:
Tags Form
Tag Name | Function |
---|---|
<form> | Creates a form to collect user input |
<input> | Create input type on the form to be created |
<textare> | Elements to define input fields |
<label> | Assigns a label to the input element |
<fieldset> | Groups the elements contained in a form |
<select> | Make input with options in the form of a drop down list |
<optgroup> | Groups several options in the input selection list |
<option> | Defines the options that can be selected |
<button> | Create a Button |
<datalist> | Create a list of options for data input |
<output> | Displays the result of the count |
Usage example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<body> | |
<h2>The datalist Element</h2> | |
<p>The datalist element specifies a list of pre-defined options for an input element.</p> | |
<form action="/action_page.php"> | |
<input list="browsers" name="browser"> | |
<datalist id="browsers"> | |
<option value="Internet Explorer"> | |
<option value="Firefox"> | |
<option value="Chrome"> | |
<option value="Opera"> | |
<option value="Safari"> | |
</datalist> | |
<input type="submit"> | |
</form> | |
<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p> | |
</body> | |
</html> |
Previews:
The datalist Element
The datalist element specifies a list of pre-defined options for an input element.
Note: The datalist tag is not supported in Safari or IE9 (and earlier).
Table Tags
Tag Name | Function |
---|---|
<table> | Create a table on the web |
<tr> | Create a row in the table |
<td> | Create a column in the table |
<th> | Create a column heading. For example name, class, and address. |
<caption> | Create table title |
border | Set table line |
border-collapse | Set the table line border |
padding | Set the padding on the cell |
text-align | Adjusts the alignment of table content |
border-spacing | Set the table line spacing |
colspan | Combines multiple columns. At the office it's called Merge Cell |
rowspan | Combines multiple rows |
id | Gives id to table or column |
Usage example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<style> | |
table, th, td { | |
border: 1px solid black; | |
padding: 5px; | |
} | |
table { | |
border-spacing: 15px; | |
} | |
</style> | |
</head> | |
<body> | |
<h2>Border Spacing</h2> | |
<p>Border spacing specifies the space between the cells.</p> | |
<table style="width:100%"> | |
<tr> | |
<th>Firstname</th> | |
<th>Lastname</th> | |
<th>Age</th> | |
</tr> | |
<tr> | |
<td>Jill</td> | |
<td>Smith</td> | |
<td>50</td> | |
</tr> | |
<tr> | |
<td>Eve</td> | |
<td>Jackson</td> | |
<td>94</td> | |
</tr> | |
<tr> | |
<td>John</td> | |
<td>Doe</td> | |
<td>80</td> | |
</tr> | |
</table> | |
<p>Try to change the border-spacing to 5px.</p> | |
</body> | |
</html> |
Previews:
Border Spacing
Border spacing specifies the space between the cells.
Firstname | Lastname | Age |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
Try to change the border-spacing to 5px.
Tag List/ List
Tag Name | Function |
---|---|
<ul> | To create a list view using symbols such as bullets, cycles, and others. |
<ol> | Create a list using numbers, letters, roman, and more |
<li> | Specifies various items to display |
<dl> | Defines a description list |
<dt> | Defines a description term |
<dd> | Describing terms in the description list |
<type> | Specifies the numbering type |
Usage example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<style> | |
table, th, td { | |
border: 1px solid black; | |
padding: 5px; | |
} | |
table { | |
border-spacing: 15px; | |
} | |
</style> | |
</head> | |
<body> | |
<h2>Border Spacing</h2> | |
<p>Border spacing specifies the space between the cells.</p> | |
<table style="width:100%"> | |
<tr> | |
<th>Firstname</th> | |
<th>Lastname</th> | |
<th>Age</th> | |
</tr> | |
<tr> | |
<td>Jill</td> | |
<td>Smith</td> | |
<td>50</td> | |
</tr> | |
<tr> | |
<td>Eve</td> | |
<td>Jackson</td> | |
<td>94</td> | |
</tr> | |
<tr> | |
<td>John</td> | |
<td>Doe</td> | |
<td>80</td> | |
</tr> | |
</table> | |
<p>Try to change the border-spacing to 5px.</p> | |
</body> | |
</html> |
Previews:
Ordered List with Lowercase Roman Numbers
- Coffee
- Tea
- Milk
Conclusion
So those are some Basic HTML Tags that are commonly used when designing or creating websites and you can learn more about them.
That's the post about HTML Tag Collections and examples. Hopefully this article is useful and can help you. Let's share this article to help other friends. Thank you!