Clean, elegant, and semantic HTML writing

If you are a guy who uses div labels to do anything, this article will be very helpful to you. This question focuses on how to write clean html code by using semantic tags and the least div tags. Have you ever tried to modify some other people's html templates? Then you will be mad at the dirty tags in the code. Writing clean html code is not only beneficial to yourself, but also to your team. It greatly saves your development and debugging time (especially for large projects ).

1. Remove unnecessary div labels

I have seen many people include form and ul labels in div labels. Why do we need to write an unnecessary tag. You can assign css rules to the proper selector to achieve the same effect.

The column below will show you how to delete extra div labels and declare css rules to internal form labels.

Sometimes we will include some content with extra div labels to strictly control the gaps in the layout. On the left side of this example, a <div class = "box"> is used to control the margin between two boxes. However, if each box contains a title h4, we can use the h4 label to control the outer margin, so that we can delete unnecessary <div class = "box"> labels.

2. Use semantic tags

You must always use semantic tags to write html code (for example, h1 as the title, p as the article section, and ul as the list item ). So, even if your css file is not introduced or not supported, your html document looks meaningful.

The following figure compares the Compiled html code in the browser using the div tag and the semantic tag (without the support of css code.

3. Use div labels as much as possible

Have you ever seen some html documents with divs everywhere? Does it make you crazy? Did you forget to close a </div> or accidentally add an open <div> tag? I'm sure most developers have had this experience. So you need to use as few div labels as possible. This makes debugging and Error Correction easier in the future.

Use the p tag to replace the div tag to include a breadcrumb navigation.

The following example shows how to use css rules to replace two div labels with one span tag. The results of these two statements are exactly the same.

4. Format (indent) Your code

During the development process, you always need to format your source code (such as indent nested labels), so that you can easily read and debug errors in the future. If you use Adobe Dreamweaver, you can easily format the source code. Method: click the "application source code" option under the "command" menu.

5. comment at the end of </div>

When you write a platform template (such as Wordpress topic) Code, these template files are divided into multiple different files, such as index. php, header. php, sidebar. php, and footer. php. Therefore, you must give the corresponding comment at the end of </div>. For example, when I see </div> <! -/Wrapper->, I will know that this is the end of the <div id = "wrapper"> label.

Summary:

1. Use as few div labels as possible;
2. Use the div label to control the overall layout of the page, such as the header, content, sidebar, and bottom;
3. The content must be included in the corresponding semantic tag, rather than in the div;
4. Format your source code and provide the corresponding annotation language at the end tag.