Understanding the structure and formatting of HTML tags
As you all know, there are numerous HTML tags, and to use them all effectively, you must understand the structure of these HTML tags.
I. HTML Tag Structure
1. Components of an HTML tags
An HTML tag consists of three basic parts:
- Selector: the name of the HTML tag.
- Property & Value: The characteristic and its value.
- Content: The information contained in the tag.
2. HTML Example
<div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML</div>
The selector is div.
Property & value are id and demo respectively, class with the value demo, and style with the value width: 200px.
The content is 'The structure of the HTML tag'.
II. Formatting HTML Tags and Priority
There are five primary ways to format an HTML tag: style, id, class, selector, *.
1. Formatting with *
Attribute * applies formatting to all HTML tags on a webpage.
For example
<body>
<div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML</div>
<span>Thẻ span</span>
<br>
<style type="text/css">
* {
color:red;
}
</style>
</body>
When you run this code, you will notice that the text in the div and span tags has turned red.
2. Formatting with selector
The selector attribute will format tags that match it, and its priority is higher than the '*' attribute.
For example
<body>
<div class="demo" style="width: 200px;">Cấu trúc thẻ HTML</div>
<div class="demo" style="width: 200px;">Định dạng thẻ HTML</div>
<span>Thẻ span</span>
<br>
<style type="text/css">
* {
color:red;
}
div{
color: blue;
}
</style>
</body>
Running this code will turn the text in the two div tags blue, while the span tag remains unchanged.
3. Formatting with class
The class attribute will format the HTML tags that share its class, and its priority will be higher than the selector attribute.
For example
<body>
<div class="demo" style="width: 200px;">Cấu trúc thẻ HTML</div>
<div class="demo" style="width: 200px;">Định dạng thẻ HTML</div>
<div style="width: 200px;">Mức độ ưu tiên</div>
<span>Thẻ span</span>
<br>
<style type="text/css">
* {
color:red;
}
div{
color: blue;
}
.demo{
color: yellow;
}
</style>
</body>
Running this code will turn the text in the first two div tags yellow, and the third div tag will stay blue. The span tag is still red due to priority.
4. Formatting with id
Similar to class, the id attribute will format the HTML tags that share its id. Naturally, its priority will be higher than the class attribute.
For example,
<body>
<div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML 1</div>
<div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML 2</div>
<div class="demo" style="width: 200px;">Định dạng thẻ HTML 1</div>
<div class="demo" style="width: 200px;">Định dạng thẻ HTML 2</div>
<div style="width: 200px;">Mức độ ưu tiên</div>
<span>Thẻ span</span>
<br>
<style type="text/css">
* {
color:red;
}
div{
color: blue;
}
.demo{
color: yellow;
}
#demo{
color: #000;
}
</style>
</body>
Running this code, you will notice that the first two div tags have turned black, and the remaining tags stay the same color.
5. Formatting with style
The style attribute will format the HTML tag it belongs to, and its priority will be higher than the id attribute.
For example
<body>
<div id="demo" class="demo" style="width: 200px; color: lime;">Hello Word</div>
<div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML 1</div>
<div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML 2</div>
<div class="demo" style="width: 200px;">Định dạng thẻ HTML 1</div>
<div class="demo" style="width: 200px;">Định dạng thẻ HTML 2</div>
<div style="width: 200px;">Mức độ ưu tiên</div>
<span>Thẻ span</span>
<br>
<style type="text/css">
* {
color:red;
}
div{
color: blue;
}
.demo{
color: yellow;
}
#demo{
color: #000;
}
</style>
</body>
Running this code, you will notice that the first div tag has turned green, while the rest of the tags stay the same color
Submit feedback
Your email address will not be made public. Fields marked are required *
Search
Trend
-
What is Black Myth: Wukong? Detailed Guide on System Requirements and Gameplay
08-21-2024 . 813 view
-
Call of Duty: Black Ops 6 - Intense, Mysterious, and Surprising Warfare
09-02-2024 . 700 view
-
The "End of Life" for Windows 10: A Massive E-Waste Threat and Sustainable Solutions
08-18-2024 . 679 view
-
Casio WS-B1000: The Perfect Blend of Traditional Watch and Smartwatch
08-11-2024 . 597 view
-
Lost All Money by Trusting in "Elon Musk Deepfake": A Cautionary Tale of Deepfake
08-21-2024 . 564 view
0 feedback