Web programming

Understanding the structure and formatting of HTML tags

Ngọc Phương

03-02-2020 . 1k view

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

Ngọc Phương

Web Developer

Thank you for visiting my blog. My name is Phuong and I have more than 10 years of experience in website development. I am confident in asserting myself as an expert in creating impressive and effective websites. Anyone in need of website design can contact me via Zalo at 0935040740.

0 feedback

Search
Trend
Social network
Ads

Related article