Good HTML code is the foundation of a beautiful website. When I teach others CSS, I always tell them first: Good CSS only exists on good HTML tags. It's like a house needs a solid foundation, right? Neat and semantic HTML tags have many advantages, but there are still many websites that use unfriendly tag writing.
Let's look at some unwritten HTML tags and discuss them to learn how to write neat and standard HTML tags.
Wulin.com Note : Chris Cyier uses two documents here to explain the code of this article: bad code and good code. Please refer to these two documents when you study.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 put strict requirements on our writing of the correct code.
But no matter what, our code should not use any Tables table for layout, so there is no need to use Transitional DOCTYPE.
Related resources:In our <head> section, the first thing is to declare the character set. We used UTF-8, but put it behind the <title>. Let's move the character set declaration to the top because we want the browser to know what character set to handle it before reading anything.
In addition to the position of the character set declaration, strange characters appearing in <title> are also issues that need to be paid attention to. For example, the most commonly used & characters should be replaced by character entity & ;.
Related resources: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 a few spaces) when you start a new element. Also, remember that the label of the close element is aligned with the start label.
Wulin.com Note : Some friends think it is more troublesome to indent when writing code. If you are just reading this code, there may be no problem. Just think it is OK. But if it is collaboration or your work is published and shared publicly, it is necessary to write beautiful, more readable code. Related resources:We have some CSS code that has been extended to our <head> section. This is a serious foul because it can only work on a single HTML page. Keeping a standalone CSS file means future web pages can link to them and use the same code. The same goes for Javascript.
Wulin.com Note : Of course, this problem may not be that serious. For example, as a WordPress theme, the code written in <head> is used on all WordPress pages. But writing CSS in <head> is still a very bad habit.In our website title, we use <h1> as the website title tag, which is perfect. And a link to the homepage was added, but the error was that the link was placed outside <h1>, and the link surrounded <h1>. This simple nesting error is handled well by most browsers, but technically, it doesn't work.
An anchor link is an inline element, and the <h1> title is a block element, and the block element should not be placed in the inline element.
I don't know who invented it first, but I like the word divitis, which refers to the excessive use of divs in HTML tags. 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 styling. This leads to the abuse of DIV elements. We use the required areas and the completely unnecessary areas.
In the example shown above, we use a div (topNav) to contain the UL list (bigBarNavigation). However, both DIV and UL are block elements, so there is no need to use DIV to wrap the UL element.
Related resources:Now let’s talk about naming management. In the example mentioned in the previous article, our UL uses the ID name bigBarNavigation. Navigation explains the content of the block very well, but big and Bar describe the design rather than the content. It may be saying that this menu is a big toolbar, but if the design of this menu becomes vertical, the name will appear confusing and irrelevant.
Friendly class and id names such as mainNav, subNav, sidebar, footer, metaData, which describe what is contained. Bad class and id names describe design, such as bigBoldHeader, leftSidebar, and roundedBox.
Wulin.com Note : Chris emphasizes whether to name it by content or design. Personally, I would like to add to ID and Class names to capitalize or lowercase , or capitalize the initial letter of the word . First of all, completely capitalized words are not conducive to reading and excluded. As for whether to use lowercase or uppercase letters of the first letter of the word, it depends on your personal habits. It is important that no matter which rule is used, it should be consistent . Don't be purely lowercase and capitalized in the first letter at a time, it will be very confusing.In addition, what I am personally confused about is whether to underline_, or hyphen, or not to use longer names. Or maybe I think it's too complicated. It’s good to use any type, and it’s OK to keep it consistent.
Previous page 1 2 Next page Read the full text