Introduction to p and span tags in HTML5

1. Selection of ID and class

It is often difficult for us to decide whether an element should use ID or class name. Here are the summary results directly:

Only Use ID only when the target element is so unique that the term will never be used elsewhere on the site. In other words, you should only use ID if you are absolutely sure that the element will only appear once. If you think that in the future If you need similar elements, just use classes.

The summary is already very clear, so there is no need to explain too much.

Let’s talk about the respective consequences when overused. Disadvantages.

Disadvantages of using too many IDs:If you use a lot of IDs, you will soon have difficulty finding unique names, and you will end up having to create very long and complex naming conventions. Solution For this problem, you only need to read the summary above.

Disadvantages of using too many classes:Some people are used to adding a class to every place in the style when writing CSS styles, so that To control the required style more accurately. This will actually cause the code to be cumbersome and less flexible. So when we write code, if you find repeated words in the class hit, you should consider decomposing these elements into their components. section, this will greatly improve flexibility and make the page more concise. See the example below.

  <h2 id="这是头部">这是头部</h2>
  <p class="news-text">这是一个文本</p>
  <p class="news-text">这是另一个文本</p>

With repeated words like this, you should consider whether these elements can be broken down into their component parts, so that the code More "componentized". For example, write it like this:

<p class="news">
    <h2 id="这是头部">这是头部</h2>
    <p>这是一个文本</p>
    <p>这是另一个文本</p>
</p>

and then identify different contents through cascade.

2.p and span

p elements are An element that helps add structure to the document. p is not semantic, p actually stands for part (pision). Likewise, do not overuse the p element.
Be careful when using p:The p element should only be used when there is no existing element that can achieve area division. Otherwise, the code will be too complicated.
PS: I didn’t want to write an example in a book about this. But from my perspective. Just tell me this sentence. Although I know it should be like this, I don't know whether to use p at a certain moment.

If this is a mainnavigationlist. Don't defend it in p.

Emmet简写为:p>ul>li*3>a[href=#] 然后按Table键
<p>
        <ul>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </p>

But don't mechanically think that as long as it is an ul tag, it does not need to be wrapped with a p tag. Let's take a look at the content of classclass in 1. You I feel that when I want to do some style design on the labels of the entire main navigation list, should I add a class or id to each li label, or should I just add a p label to wrap it as mentioned in 1 to make the code "componentized" ".

I have never done H5 development, but I know that there is no absolute in this kind of thing. You still need to check whether to use p according to the purpose of use. I personally feel that although it is a navigation list, You can directly use ul to construct it, but I think adding a p is not just to make the navigation list a block, but also to tell me that the navigation list is a part.

The main function of the element is to group or identify the elements within the row.

<p><span class="aa">Harry Knowles</span></p>

The difference between the two is already obvious.

Probably That’s it. QAQ I feel like I can write so many things in two sentences. Anyway, I can summarize them in just two sentences, but they are all important to remember.

【Related Recommendations】

1. Free h5 online video tutorial

2. HTML5 full version manual

3. php.cn original html5 Video tutorial

The above is the detailed content of Introduction to p and span tags in HTML5. For more information, please follow other related articles on the PHP Chinese website!