Learn how to write neat and standard HTML tags

Time:2021-10-27

Good HTML codeIs the foundation of a beautiful website. When I teach others CSS, I always tell them first: good CSS only exists on the basis of good HTML tags. It’s like a house needs a solid foundation, right? Neat and semantic HTML tags have many advantages, but many websites still use unfriendly tag writing.

Let’s look at some unfriendly wordsHTML tags And discuss these problems, so as to learn how to write neat and standard HTML tags.

Developeppaer note: Chris cyier uses two documents here to explain the code of this article:  bad codeandgood code。 Please refer to these two documents when you study.

1. Strict DOCTYPE

To do this, we just need to follow the correct steps. There is no need to discuss whether to use HTML 4.01 or XHTML 1.0. Both of them put forward strict requirements for us to write correct code.

strict doctype example

However, in any case, our code should not use any tables for layout, so it is not necessary to use transitional DOCTYPE

Related resources:

  • DTDs recommended by W3C (file type declaration)
  • Fix Your Site With the Right DOCTYPE!
  • No more Transitional DOCTYPEs, please

Developeppaer note: the so-called DTD is a document type declaration. In short, it is some rules defined for a specific document. These rules include a series of element and entity declarations.There are three XHTML document types: strict, transitional, and frameset。 At present, the most used is transitional. For example, this site is also used at presentXHTML 1.0 TRANSITIONAL。 If your HTML code is well written, it is more convenient to convert the existing transitional to strict. On the contrary, you don’t have to be in a hurry. Personally, strict is more rigorous, but using transitional doesn’t have much impact.

2. Character set & encoding characters

In our < head > section, the first thing is to declare the character set. We used UTF-8, but put it after < title >. Let’s move the character set declaration to the top, because we want the browser to know what character set to process before reading anything.

character example

In addition to the position of the character set declaration, strange characters in < title > also need attention, such as “the most commonly used”&“Characters, we should use character entities”&amp;“To replace it.

Related resources:

  • Wikipedia: UTF-8
  • A tutorial on character code issues
  • The Extended ASCII table

3. Appropriate indentation

When writing code, indentation does not affect the appearance of the web page, but using appropriate indentation can make the code more readable. The standard indentation method is to indent a tab bit (or several spaces) when you start a new element. Also, remember that the label of the close element is aligned with the start label.

Developeppaer note: some friends will find it troublesome to indent when writing code. If you read the code alone, there may be no problem. You think it’s OK. But if it is collaboration or your work is publicly released and shared, it is necessary to write beautiful and readable code.

indentation example

Related resources:

  • Clean up your Web pages with HTML TIDY

4. Use external CSS and JavaScript

We have some CSS code that has been extended to our < head > section. This is a serious foul because it can only be applied to a single HTML page. Keeping separate CSS files means that future web pages can link to them and use the same code. The same is true for JavaScript.

Developeppaer note: of course, this problem may not be so serious. For example, as a WordPress theme, the code written in < head > also works on all WordPress pages. But writing CSS in < head > is still a very bad habit.

external example

5. Correct label nesting

In our website title, we use < H1 > as the website title label, which is perfect. And a link to the home page is added, but the error is that the link is placed outside < H1 >, < a > link surrounds < H1 >. This simple nesting error can be handled well by most browsers, but technically, it doesn’t work.

The anchor link is an inline element, while the < H1 > title is a block element, and the block element should not be placed in the inline element.

nesting example

6. Remove unnecessary Div

I don’t know who invented it first, but I like the word “divitis”, which refers toHTML tags Excessive use of divs in. At a certain stage of learning web design, we learn how to use a div to wrap many other elements to achieve convenient layout and style. This leads to the abuse of div elements. We use them where we need them and where they are completely unnecessary.

divitis example

In the example above, we use a div (“topnav”) to contain the UL list (“bigbarnavigation”). However, div and UL are block elements, so it is not necessary to use div to wrap UL elements.

Related resources:

  • Divitis: what it is, and how to cure it.

7. Use better naming conventions

Now let’s talk about naming management. In the example mentioned in the previous article, our UL uses the ID name “bigbarnavigation.” where “navigation” well describes the content of the block, but “big” and “bar” describe the design rather than the content. It may mean that this menu is a big toolbar, But if the menu design becomes vertical, the name will appear confusing and irrelevant.

naming conventions example

Friendly class and ID names, such as “mainnav,” “subnav,” “sidebar,” “footer,” “metadata,” describe the content. Bad class and ID names describe the design, such as “bigboldheader,” “leftsidebar,” and “roundedbox.”

Developeppaer note: what Chris emphasizes is naming by content or by design. I would like to add:Do ID and class names use uppercase or lowercaseOr capitalize the first letter of a word。 First of all, completely capitalized words are not conducive to reading and are excluded. As for whether to use lowercase or uppercase, it depends on your personal habits.It is important that no matter which rule is used, it should be consistent。 Don’t be pure lowercase for a while and initial capital for a while. It will be very chaotic.

In addition, I am confused about whether to underline “”, or hyphen “-” for longer names, or not. Or I think it’s too complicated. It’s good to use either one. Just keep consistent.