Learn how to write neat and standard HTML tags

Good HTML code is the foundation of a beautiful website. When I teach people CSS, I always start by telling them: good CSS only exists on the basis of good HTML markup. It's like a house needs a solid foundation, right? Clean and semantic HTML tags have many advantages, but there are still many websites that use unfriendly tags.

Let's look at some HTML tags that are not user friendly and discuss these issues to learn how to write clean and standard HTML tags.

123WORDPRESS.COM Note : Chris Cyier used two documents here to explain the code in this article: bad code and good code . Please refer to these two files 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 which have strict requirements for us to write correct code.

strict doctype example

But anyway, our code should not use any Tables for layout, so there is no need to use Transitional DOCTYPE.

Related resources:

W3C recommended DTDs (Document Type Declarations)
Fix Your Site With the Right DOCTYPE!
No more Transitional DOCTYPEs, please

123WORDPRESS.COM Note : The so-called DTD is the document type declaration. Simply put, it is a set of rules defined for a specific document. These rules include a series of element and entity declarations. There are three types of XHTML documents: STRICT (strict type), TRANSITIONAL (transitional type) and FRAMESET (frame type) . At present, we use TRANSITIONAL the most. For example, this website currently uses XHTML 1.0 TRANSITIONAL . If your HTML code is well written, it is quite convenient to convert the existing TRANSITIONAL to STRICT. On the other hand, there is no need to rush to switch. Personally, I think STRICT is more rigorous, but using TRANSITIONAL does not have much impact.

2. Character set & encoding characters

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

character example

In addition to the location of the character set declaration, the strange characters that appear in <title> are also issues that need attention, such as the most commonly used " & " character, which we should replace with the character entity " & ".

Related resources:

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

3. Proper indentation

When writing code, indentation does not affect the appearance of the web page, but using proper indentation can make the code more readable. The standard indentation method is to indent a Tab position (or a few spaces) when you start a new element. Also, remember that the closing element's tag is aligned with the opening tag.

123WORDPRESS.COM Note : Some people find it troublesome to indent when writing code. If you are the only one reading the code, then it may not be a problem. Just be OK as long as you feel it is OK. But if it is a collaboration or your work is published and shared publicly, it is necessary to write beautiful and more readable code.

indentation example

Related resources:

Clean up your Web pages with HTML TIDY

4. Using external CSS and JavaScript

We have some CSS code already extended into our <head> section. This is a serious violation because it only works on 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.

123WORDPRESS.COM Note : Of course, this problem may not be that serious. For example, for a WordPress theme, the code written in <head> will apply to all WordPress pages. But it is still a very bad habit to write CSS in <head>.

external example

5. Correct tag nesting

In our website title, we use the <h1> tag as the website title, which is perfect. And added a link to the homepage, but the mistake was that the link was placed outside the <h1>, and the <a> link surrounded the <h1>. Most browsers handle this simple nesting error well, but technically it's not possible.

An anchor link is an inline element, while the <h1> heading is a block element. Block elements should not be placed inside inline elements.

nesting example

6. Remove unnecessary DIVs

I don't know who coined the term, but I like the term "divitis," which refers to the excessive use of divs in HTML markup . At a certain stage in learning web design, everyone learns how to use a DIV to wrap many other elements to achieve convenient layout and styling. This leads to the abuse of the DIV element. We use it where it is needed and where it is completely unnecessary.

divitis example

In the example above, we use a div ("topNav") to contain the UL list ("bigBarNavigation"). But both DIV and UL are block elements, so there is no need to use DIV to wrap the UL element.

Related resources:

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

7. Use better naming conventions

Now is a good time to talk about naming. In the example in the previous article, our UL used the ID name "bigBarNavigation." The "Navigation" is a good description of the content of the block, but the "big" and "Bar" describe the design rather than the content. It may be saying that this menu is a large toolbar, but if the design of the menu becomes vertical, the name will be confusing and irrelevant.

naming conventions example

Friendly class and id names are like “mainNav,” “subNav,” “sidebar,” “footer,” “metaData,” which describe the content contained within. Bad class and id names describe the design, like “bigBoldHeader,” “leftSidebar,” and “roundedBox.”

123WORDPRESS.COM Note : Chris emphasizes whether to name by content or by design. One personal addition: ID and Class names should be uppercase or lowercase , or the first letter of the word should be capitalized . First of all, completely capitalized words are not conducive to reading, so exclude them. As for whether to use all lowercase or capitalize the first letter of the word, it depends on personal habit. The important point is that no matter which rules you use, you should be consistent . Don't use lowercase letters sometimes and capitalize the first letter sometimes, as this will be confusing.

In addition, I am personally confused about whether to add an underscore "_", a hyphen "-", or not to add one for longer names. Or maybe I'm thinking too complicated. It doesn't matter which one you use, just be consistent.

Previous Page 1 2 Next Page Read Full Article

<<: Docker removes abnormal container operations

>>: Detailed process of drawing three-dimensional arrow lines using three.js