How to choose the right HTML tags

One problem you will encounter when laying out DIVCSS is how to choose the HTML tag layout, but it is very simple for non-novice CSSers, but it is for those who have just learned or just started CSS production. An invisible problem. So today we will summarize what labels to use under what circumstances.

We always encounter various problems when laying out, so here we briefly introduce how to choose HTML tags:

1. Frame layout (using DIV tags)

In web pages, the frame layout generally uses DIV layout, and DIV boxes regardless of size generally use DIV tags (

2. List layout (using ul li tag)

When encountering picture lists and article title lists, ul li list tags are usually used for layout. Of course, setting up when using these tags requires CSS styles to achieve layout effects. This makes it easier for the program to do loop content when calling data.

3. Title layout (using h1, h2, h3, h4 tags)

When encountering independent column titles and text tags, usually use h1, h2, h3, h4 title tags. This layout gives the content a sense of hierarchy. At the same time, considering SEO, proper use of these title tags will help optimize rankings.

4. Content independent style (using span)

In a paragraph of text, there are several texts that need to be set with a separate color value. At this time, you can add span tags to these texts. Set a separate class or direct CSS style for the span tag to achieve the effect. Generally speaking, span is rarely used in layout frameworks.

5. Functional layout (tags such as img, b, strong, u, s)

Use the Img tag when encountering attractive images on the web page; when encountering text You can use the b tag or strong tag to bold, use the u tag when encountering underlines, use the s tag when encountering text through lines ( Delete lines), etc. Sometimes CSS is not necessarily used to implement these functional layouts. Appropriate Choosing these HTML tags is better from the SEO perspective.

6. Paragraph (p tag)

Generally, the p tag is used for paragraphs in articles, that is,

is used at the beginning of each paragraph and

7. Manually force line break layout (br tag)

If you encounter text that needs to be wrapped, use the br tag, that is, "
". It is worth noting that the br tag is a separate tag. The box tag is an independent tag. Use the br tag wherever line breaks are needed.

8, Table type (table table tag)

In HTML layout, learning DIV CSS does not mean giving up the table tag. This Sometimes the table tag is still needed. For example, if you encounter a table layout, you still need the table tr td tag layout. At this time, using the table layout is better than the div tag.

9. Form layout (form, input, etc.)

When encountering form layout, such as registration, login, filling in data and submitting places, etc., all use form tags.

I believe everyone has understood through our introduction. For more exciting information, please pay attention to other related articles on the php Chinese website! .

Related reading:

What is the relationship between the div floating layer and the default div layer

How to know what CSS attribute style is set for DIV ?

How to know whether the browser supports html5

The above is the detailed content of How to choose the right HTML tags. For more information, please follow other related articles on the PHP Chinese website!