Web Front-End Designer: 11 principles to keep your code clean

Source: Internet
Author: User
Tags character set html page

Write a Web page just like we build a house, the foundation is strong and the house won't fall. The same, we make Web pages as well, a good HTML structure is the beginning of making a beautiful website, the same, good CSS only exists in the same good HTML, so a clean, semantic HTML has many advantages, so peacetime production, we do this? Let's take a look at a picture:

The image above shows two pieces of code, I think we will only like the first one, we do not say its semantics, at least his structure makes us look refreshing, and the second? A look is the code of bad code, annoying code. So how do you write a good code, neat code? Below we will learn from the following 12 aspects, as long as you can write the code in the following 12 principles, the quality of your code can go up, and you write the code will be people love.

I. Statement of the DOCTYPE

If we want to do a good job, we must first know what rights we have to do, as the "DOCTYPE" statement, We don't have to talk about whether we're using HTML4.01 or XHTML1.0, or the current HTML5 offers a rigorous version or a transitional version, which supports the code we write:

Since our present layout does not require a table layout to make a good layout, we can consider using the strict "DOCTYPE" without the transition type, and for backwards compatibility, I recommend using the HTML5 Declaration mode:

<! DOCTYPE html>

If you want to know more about this, you can click on:

    1. w3c:recommended DTDs to use in your Web document
    2. Fix Your Site with the right doctype!
    3. No more transitional doctypes, please

Character sets and coded characters

At the beginning of each page, we set the character set in

    1. < Meta charset="UTF-8" />

And we usually write in the page, often encounter "&" Such symbols, then we should not directly on the page to write "&":

We should use character encoding in our code, for example, "&" We should use "&amp;" in our code. To replace him.

If you want to know more about this, you can click on:

    1. Wikipedia:utf-8
    2. A tutorial on character code issues
    3. The Extended ASCII table

Third, the correct code indentation

In the page edit, the code indentation is not correct, he will not affect your site any function, but if you do not have a standard indent principle, so that people read your code is very angry, so the correct code indentation can enhance your code readability. Standard program indentation should be a tab (or a few spaces), like a bit of us to see the beginning of the article, or look at the picture below, you see after you know how to write your own code to let people see the cool:

Needless to say, everyone likes the code below. It's just a matter of habit, but it's a good idea to do it right from the start. For an introduction to this, you can also refer to: Clean up your Web pages with HTML TIDY.

Four, outside the chain of your CSS style and JavaScript script

There are a number of ways to write CSS styles in a page, and some will put styles directly into the "

What we're talking about here is style, but JavaScript scripts are the same as CSS styles. Text and said, what I finally wanted to say was, " in making a Web page, try to put your CSS style and JavaScript script in a single file, and then refer to the files by linking them, and the best thing to do is to facilitate the management and modification of your styles and scripts ." ”

Five, correct label nesting

When we write HTML, we always need the level nesting of tags to help us complete the HTML writing. But these HTML nesting has certain rules, if we want to elaborate, we may have several chapters to describe, so what I want to say here today is that we should not make the following super error in writing HTML:

The structure of the above diagram we are common, such as the title of the first page, then we should pay attention to, we should not put "

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.