From the semantic point of view, should the content in the <li> label use the <p> label? -

Source: Internet
Author: User
& Lt; ul & gt; & lt; li & gt; HiIamanitem. & lt; li & gt; AndIamanotherone. & lt; li & gt; & lt; ul & gt;
 
 
  • Hi I am an item.
  • And I am another one.
Reply content: Yes.
In the past, I also struggled with what elements should be included, until the author of "proficient in CSS and HTML Design Patterns" proposed three terms to divide block-level elements into three categories: structured block elements, terminal block elements, and multi-object block elements.
  • Structured block elements and multi-target block elements allow documents to form a structure for multiple purposes, that is, they can contain content and other block-level elements.

    It is a block element of a terminal. It cannot contain other block-level elements but only content.
    This method is not recommended:

  • text

    text

  • From the example given by the subject, the two are semantically equivalent.
    4.4 Grouping content
    3 Semantics, structure, and APIs of HTML documents ents
    A paragraph may consist of one or more sentences.

    The semantics of the change itself, so sometimes

    Is redundant. If there is only one p in your li, it is obviously an extra move.
    I personally feel that it is a disease and cure for the obsessive-compulsive disorder that requires semantic search and passing the standard test in actual projects. Specific analysis of the specific situation, if the landlord is the case, the P tag should be redundant, but if li is used for layout, the p tag can be used in it, for example, the following layout should be normal:

    
       
       
    • src="">

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facilis, voluptates, architecto quidem aut quam quos quia perferendis dolorum recusandae nemo consectetur atque officiis dolor asperiores aperiam officia tempora ad!

    • src="">

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facilis, voluptates, architecto quidem aut quam quos quia perferendis dolorum recusandae nemo consectetur atque officiis dolor asperiores aperiam officia tempora ad!

    • src="">

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facilis, voluptates, architecto quidem aut quam quos quia perferendis dolorum recusandae nemo consectetur atque officiis dolor asperiores aperiam officia tempora ad!

    • src="">

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facilis, voluptates, architecto quidem aut quam quos quia perferendis dolorum recusandae nemo consectetur atque officiis dolor asperiores aperiam officia tempora ad!

    Li list too! P Paragraph! First, p represents a paragraph. Throughout li, whether there are other content that needs to be "disconnected" from this sentence, if not, then you have to take the paragraph here, it is like talking nonsense. Nonsense is of course meaningless. The effect of adding a p tag to the two types is the same. If you do not need to add a p tag, do not add an object. Therefore, you do not need to use a p tag.
    With the implementation of the function, you can write less code, the simpler the better.

    Ps think of one sentence, read more books, and write less code. If you use p, why do you need li?
    If you use li, why do you need p?
    Are you confused about whether your content is a list or paragraph ?...
  • Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.