Zoom to 120%, to make it more readable
Here’s a list of common HTML tags, their abbreviations, and functions, ordered by their common use:
| Tag | Abbreviation | Function |
|---|---|---|
| div | division |
The <div> tag is used as a container for
HTML elements, which is then styled with CSS or manipulated
with JavaScript.
|
| a | anchor |
The <a> tag is used to create hyperlinks,
allowing users to navigate to other pages or external
resources.
|
| p | paragraph |
The <p> tag is used to define a paragraph
of text.
|
| h1 | heading 1 |
The <h1> tag defines the most important
heading on a page, typically used for the main title.
|
| h2 | heading 2 |
The <h2> tag defines a subheading, less
important than <h1>, but still
significant.
|
| img | image |
The <img> tag is used to embed an image
into an HTML page.
|
| ul | unordered list |
The <ul> tag defines an unordered list of
items, typically rendered with bullet points.
|
| li | list item |
The <li> tag defines a list item in both
ordered and unordered lists.
|
| span | span |
The <span> tag is used to group inline
elements for styling with CSS or scripting.
|
| form | form |
The <form> tag is used to create an HTML
form for user input.
|
| input | input |
The <input> tag is used to create
interactive elements in a form, like text fields,
checkboxes, and buttons.
|
| button | button |
The <button> tag is used to create a
clickable button.
|
| h3 | heading 3 |
The <h3> tag defines a subheading, less
important than <h2>.
|
| h4 | heading 4 |
The <h4> tag defines a subheading, less
important than <h3>.
|
| h5 | heading 5 |
The <h5> tag defines a subheading, less
important than <h4>.
|
| h6 | heading 6 |
The <h6> tag defines the least important
heading on a page.
|
| table | table |
The <table> tag is used to define an HTML
table.
|
| tr | table row |
The <tr> tag is used to define a row in a
table.
|
| td | table data |
The <td> tag is used to define a cell in
a table row.
|
| th | table header |
The <th> tag defines a header cell in a
table.
|
| br | break |
The <br> tag is used to insert a line
break in text.
|
| strong | strong |
The <strong> tag is used to define
important text, typically displayed in bold.
|
| em | emphasis |
The <em> tag is used to emphasize text,
typically displayed in italics.
|
| nav | navigation |
The <nav> tag defines a set of navigation
links.
|
| footer | footer |
The <footer> tag defines a footer for a
document or section.
|
| header | header |
The <header> tag defines the header of a
document or section.
|
| section | section |
The <section> tag defines a section in a
document, used to group related content.
|
| article | article |
The <article> tag is used to define
independent, self-contained content.
|
| iframe | inline frame |
The <iframe> tag is used to embed another
document within the current HTML document.
|
| select | select |
The <select> tag is used to create a
drop-down list in forms.
|
| option | option |
The <option> tag defines options that can
be selected from a drop-down list.
|
This table covers the most commonly used HTML tags, their abbreviations, and their primary functions.
Here’s a mapping table of common HTML tags with their properties, sample values, and example code. This list is ordered by common usage:
| Tag | Property | Sample Value | Sample Code |
|---|---|---|---|
img |
src |
https://www.example.com/sample.jpg |
<img src="https://www.example.com/sample.jpg"
alt="Sample Image">
|
alt |
Sample Image |
<img src="https://www.example.com/sample.jpg"
alt="Sample Image">
|
|
width |
300px |
<img src="https://www.example.com/sample.jpg"
alt="Sample Image" width="300px">
|
|
height |
200px |
<img src="https://www.example.com/sample.jpg"
alt="Sample Image" height="200px">
|
|
a |
href |
https://www.example.com |
<a href="https://www.example.com">Visit
Example</a>
|
target |
_blank |
<a href="https://www.example.com"
target="_blank">Visit Example</a>
|
|
title |
Go to Example |
<a href="https://www.example.com" title="Go to
Example">Visit Example</a>
|
|
div |
class |
container |
<div class="container"></div>
|
id |
main-section |
<div id="main-section"></div>
|
|
style |
background-color: #f0f0f0; |
<div style="background-color:
#f0f0f0;"></div>
|
|
p |
class |
text-muted |
<p class="text-muted">This is a
paragraph.</p>
|
style |
color: gray; font-size: 14px; |
<p style="color: gray; font-size: 14px;">This is a
paragraph.</p>
|
|
h1 |
class |
header-title |
<h1 class="header-title">Welcome to the
Site</h1>
|
style |
font-weight: bold; |
<h1 style="font-weight: bold;">Welcome to the
Site</h1>
|
|
input |
type |
text |
<input type="text" placeholder="Enter name">
|
type |
password |
<input type="password" placeholder="Enter
password">
|
|
type |
email |
<input type="email" placeholder="Enter
email">
|
|
placeholder |
Enter name |
<input type="text" placeholder="Enter name">
|
|
value |
John Doe |
<input type="text" value="John Doe">
|
|
required |
true |
<input type="text" required> |
|
button |
type |
submit |
<button type="submit">Submit</button>
|
type |
button |
<button type="button">Click Me</button>
|
|
disabled |
true |
<button type="submit"
disabled>Submit</button>
|
|
form |
action |
/submit-form |
<form action="/submit-form"
method="post"></form>
|
method |
post |
<form action="/submit-form"
method="post"></form>
|
|
method |
get |
<form action="/submit-form"
method="get"></form>
|
|
enctype |
multipart/form-data |
<form action="/submit-form" method="post"
enctype="multipart/form-data"></form>
|
|
ul |
class |
nav-list |
<ul class="nav-list"><li>Item
1</li><li>Item 2</li></ul>
|
style |
list-style-type: none; |
<ul style="list-style-type: none;"><li>Item
1</li><li>Item 2</li></ul>
|
|
li |
class |
list-item |
<li class="list-item">Item 1</li>
|
style |
color: blue; |
<li style="color: blue;">Item 1</li>
|
|
span |
class |
highlight |
<span class="highlight">Highlighted
text</span>
|
style |
color: red; font-weight: bold; |
<span style="color: red; font-weight:
bold;">Important</span>
|
|
table |
border |
1 |
<table
border="1"><tr><td>Data</td></tr></table>
|
cellpadding |
10 |
<table border="1"
cellpadding="10"><tr><td>Data</td></tr></table>
|
|
cellspacing |
5 |
<table border="1"
cellspacing="5"><tr><td>Data</td></tr></table>
|
|
td |
colspan |
2 |
<td colspan="2">Merged Cells</td>
|
rowspan |
3 |
<td rowspan="3">Vertical Merge</td>
|
|
textarea |
rows |
4 |
<textarea rows="4" cols="50">Text
here</textarea>
|
cols |
50 |
<textarea rows="4" cols="50">Text
here</textarea>
|
|
placeholder |
Enter your message |
<textarea placeholder="Enter your
message"></textarea>
|
|
select |
name |
options |
<select name="options"><option
value="1">Option 1</option></select>
|
multiple |
true |
<select name="options" multiple><option
value="1">Option 1</option></select>
|
|
option |
value |
1 |
<option value="1">Option 1</option>
|
selected |
true |
<option value="1" selected>Option
1</option>
|
This table covers a wide range of commonly used HTML elements, their properties, and example implementations.
Komentar
Posting Komentar