Home >Web Front-end >HTML Tutorial >Translation: How to write beautiful HTML code_HTML/Xhtml_Web page production
Translation: How to write beautiful HTML code_HTML/Xhtml_Web page production
- WBOYOriginal
- 2016-05-16 16:43:251436browse
What Beautiful HTML Code Looks Like How to write beautiful HTML code.
An article written by a foreigner: What Beautiful HTML Code Looks Like How to write beautiful HTML code. I feel that the writing is very good. I reprint it and share it with you:
ps: Original address: http:// css-tricks.com/what-beautiful-html-code-looks-like/
1.DOCTYPE Properly Declared
Don’t forget the header declaration, it will tell the browser how to render your HTML.
2. Tidy Head Section
Set the title and character set. Externally link CSS and JS (including a CSS for printing).
3.Body IDed
Give body an ID. The reason mentioned by the author here is to facilitate the selection of containers for multiple pages. For example, by setting different IDs for the BODY in page1 and page2, you can set two different effects through #page1 h2 and #page2 h2. I feel that this depends on the situation and specific architecture before using it.
4.Semantically Clean Menu
Write menu code that conforms to semantics.
<div id="menu">
<code><div id="menu">
<br><ul>
<br><li><a href="index.php">Home</a></li>
<br><li><a href="about.php">About</a></li>
<br><li><a href="contact.php">Contact</a></li>
<br>
</ul>
<br>
</div>
<br>ps:我个人觉得这样写代码应该更简单一点吧:<br><ulid><br><li><a href="index.php">Home</a></li>
<br><li><a href="about.php">About</a></li>
<br><li><a href="contact.php">Contact</a></li>
<br><br></ulid>
5.Main DIV for all Page Content
There must be a main DIV that contains all the content. It is convenient to fix the width of the body, margins, etc.
6.Important Content First
Write the main content first, then the secondary content. If your navigation or sidebar is not very important, it is best to write them last.
7.Common Content INCLUDED
Introduce common parts such as navigation and page footer through dynamic calls, such as PHP's include.
8.Code is Tabbed into Sections
Indented code
9.Proper Ending Tags
Pay attention to the closing tags
10.Hierarchy of Header Tags
Use header tags, such as 
~, in appropriate places to divide paragraphs.
11. Content, Content, ContentUse appropriate tags and logo codes, use © to indicate ©, do not use
12.No Styling!Don’t write styles on tags, HTML is only used to express structure. Let’s leave the performance to CSS.
Indented code
9.Proper Ending Tags
Pay attention to the closing tags
10.Hierarchy of Header Tags
Use header tags, such as
~, in appropriate places to divide paragraphs.
11. Content, Content, ContentUse appropriate tags and logo codes, use © to indicate ©, do not use
12.No Styling!Don’t write styles on tags, HTML is only used to express structure. Let’s leave the performance to CSS. Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn