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:
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:
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:
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:
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:
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:
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:
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:
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:
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!
.jpg)
Samuel
Hello i'm Junior Web Developer from Medan, North Sumatera, Indonesia. I like Design and UI/UX Design
