Thirty HTML coding guidelines for beginners

Thirty HTML coding guidelines for beginners

1. Always close HTML tags

In the source code of previous pages, we often see statements like this:

<li>Some text here.
<li>Some new text here.
<li>You get the idea.

Maybe in the past we could tolerate such non-closing HTML tags, but by today's standards, this is highly undesirable and must be avoided 100%. Be sure to close your HTML tags, otherwise it will not pass validation and may cause unforeseen problems.

It is better to use this form: 

 <ul>
 <li>Some text here. </li>
 <li>Some new text here. </li>
 <li>You get the idea. </li>
 </ul>

2. Declare the correct document type (DocType)

I used to be a member of many CSS forums, where if a user encountered a problem, we would recommend that he do two things first:

1. Validate the CSS file and resolve any visible errors

2. Add the document type Doctype

DOCTYPE is defined before the HTML tag appears. It tells the browser whether the page contains HTML, XHTML, or a mixture of the two, so that the browser can parse the tags correctly.

There are four common document types to choose from : 

 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

There are different opinions on what document type declaration to use. It is generally believed that using the strictest declaration is the best option, but research shows that most browsers parse this declaration in a normal way, so many people choose to use the HTML 4.01 standard. The bottom line of choosing a statement is whether it is really suitable for you, so you have to consider comprehensively to choose the statement that suits your project.

3. Don’t use embedded CSS styles

When you are busy writing code, you may often add some embedded CSS code conveniently or lazily, like this: 

 <p style="color: red;">Webmaster's Home</p>

This may seem convenient and trouble-free, but it can create problems in your code.

When you start writing code, it is best to start adding style code after the content structure is finalized.

This kind of coding method is like guerrilla warfare, which is a very copycat approach. ——Chris Coyier

A better approach is to define the style of this P in the style sheet file: 

 someElement > p {
 color: red;
 }

4. Import all style sheet files in the head tag of the page

Theoretically, you can import CSS style sheets anywhere, but the HTML specification recommends importing them in the head tag of a web page to speed up page rendering.

During development at Yahoo, we discovered that including style sheets in the head tag speeds up web page loading because it allows the page to be rendered incrementally. ——ySlow Team 

 <head>
 <title>My Favorites Kinds of Corn</title>
 <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />
 <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />
 </head>

5. Import the javascript file at the bottom of the page

One principle to remember is to present the page to users as quickly as possible. When loading a script, the page will pause loading until the script is fully loaded. So it will waste more user time.

If your JS file is only to implement certain functions (such as button click events), then feel free to introduce it at the bottom of the body. This is definitely the best method.

Example : 

 <p>And now you know my favorite kinds of corn. </p>
 <script type="text/javascript" src="path/to/file.js"></script>
 <script type="text/javascript" src="path/to/anotherFile.js"></script>
 </body>
 </html>

6. Don’t use embedded JavaScript. It’s the 21st century!

Many years ago, there was a way to add JS code directly to HTML tags. This is especially common in simple photo albums. Essentially, an "onclick" event is attached to the tag, which has the same effect as some JS code. Without going into too much detail, this approach should not be used. Instead, the code should be moved to an external JS file and then the event listener should be added using " addEventListener / attachEvent ". Or use a framework like jQuery, you only need to use its "clock" method. 

 $('a#moreCornInfoLink').click(function() {
 alert('Want to learn more about corn?');
 });

7. Perform standard verification at any time during development

Many people do not really understand the meaning and value of standard verification. The author analyzed this issue in detail in a blog. In a word, standard verification is to serve you, not to cause you trouble.

If you are just starting out with web design, it is highly recommended that you download this web development tool and use the "HTML Standards Validator" and "CSS Standards Validator" at any time during the coding process. If you think CSS is a very easy language to learn, then it will kill you. Your sloppy code will make your page full of loopholes and problems. A good way is to verify, verify, and verify again.

8. Download Firebug

Firebug is undoubtedly the best plug-in for web development. It can not only debug JavaScript, but also let you intuitively understand the properties and positions of page tags. Without further ado, download it!

9. Use Firebug!

According to the author's observation, most users only use 20% of Firebug's functions, which is such a waste. You might as well spend a few hours to systematically learn this tool. I believe it will help you get twice the result with half the effort.

Firebug Tutorial :

  • Overview of Firebug
  • Debugging Javascript With Firebug – video tutorial

    • 10. Use lowercase tags

    In theory, you could write arbitrary markup like this: 

     <DIV>
     <P>Here's an interesting fact about corn. </P>
     </DIV>

    It is better not to write like this. It does not make any sense to type in larger letters and makes the code ugly. It is better to write like this: 

     <div>
     <p>Here's an interesting fact about corn. </p>
     </div>

    11. Use H1 – H6 Tags

    The author recommends that you use all six of these tags on your web pages. Although most people will only use the first four, using the most H tags will have many benefits, such as device-friendliness, search engine-friendliness, etc. You might as well replace all your P tags with H6.

    12. If it’s a blog, save H1 for the article title

    Today I started a discussion on Twitter: Should H1 be defined on the logo or on the article title? 80% of people chose the latter.

    Of course, how to use it depends on your needs, but I suggest that when you create a blog, you set the article title as H1, which is very beneficial for search engine optimization (SEO).

    13. Download ySlow

    Over the past few years, the team at Yahoo has done a lot of great work in the field of front-end development. Not long ago, they released a Firebug extension called ySlow, which analyzes your web page and returns a "report card" that details every aspect of the page and suggests areas for improvement. Although it's a bit harsh, it will definitely help you and is highly recommended - ySlow!

    14. Use UL Listings to Layout Navigation Menus

    Usually a website will have a navigation menu, which you can define like this: 

     <div id="nav">
     <a href="#">Home </a>
     <a href="#">About </a>
     <a href="#">Contact </a>
     </div>

    If you want to write beautiful code, it is best not to use this method.

    Why use UL to layout navigation menu?

    ——Because UL is born for definition lists

    It is better to define it like this: 

     <ul id="nav">
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Contact</a></li>
     </ul>

    15. Learn how to deal with IE

    IE has always been a nightmare for front-end developers!

    If your CSS style sheet is basically finalized, you can create a separate style sheet for IE, and then it will only take effect on IE: 

     <!--[if lt IE 7]>
     <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
     <![endif]-->

    What these codes mean is: if the user's browser is IE6 or below, then this code will take effect. If you want to include IE7 as well, change “[if lt IE 7]” to “[if lte IE 7]”.

    16. Use a good code editor

    Whether you are a Windows or Mac user, there are many excellent editors for you to choose from:

    Mac Users

    • Coda
    • Espresso
    • TextMate
    • Aptana
    • DreamWeaver CS4

    PC Users

    • InType
    • E-Text Editor
    • Notepad++
    • Aptana
    • Dreamweaver CS4

    17. Compress the front-end code!

    Javascript compression service

    • Javascript Compressor
    • JS Compressor

    CSS Compression Services

    • CSS Optimiser
    • CSS Compressor
    • Clean CSS

    18. Cut back, cut back, cut back

    Looking back at the first page most of us wrote, we will definitely find serious "DIV addiction" (divitis). Usually the instinct of beginners is to wrap a paragraph with a DIV, and then put more DIVs to control the positioning. —— In fact, this is an inefficient and harmful practice.

    After writing a web page, be sure to check it several times and try to reduce the number of elements.

    If a list can be laid out with UL, do not use individual DIVs to lay it out.

    Just as the key to writing an article is “reduce, reduce, reduce,” the same principle applies to writing a page.

    19. Add Alt attributes to all images

    The benefits of adding alt attributes to images are self-evident - this allows users who disable images or use special devices to understand your information without obstacles, and it is friendly to image search engines.

    Firefox does not support displaying the Alt attribute of images, so you can add the title attribute: 

     <img src="cornImage.jpg" alt="Webmaster's Home" title="Webmaster's Home" />

    20. Learn to stay up late

    I often study and work until the early hours of the morning without realizing it, and I think this is a good thing.

    My “AH-HA” moments usually happen late at night, like when I completely understood the concept of “closures” in JavaScript. If you haven't experienced this magical moment yet, try it now!

    21. View source code

    Nothing will help you learn HTML faster than imitating your idols. At first, we all had to be copiers, and then slowly develop our own style. Study the code of your favorite website pages to see how they implement their content. This is the only way for experts, you must try it. Note: Just learn and imitate their coding style, not copy and paste!

    Pay attention to all kinds of cool JavaScript effects on the Internet. If it looks like a plug-in is used, you can find the name of the plug-in based on the file name in the head tag of its source code, and then you can learn to use it for your own benefit.

    22. Define styles for all elements

    This one is especially necessary when you are making other company websites. You don't use the blockquote tag yourself? Then users may use it, but you don’t use OL yourself? Users might, too. Take the time to create a page that shows the styles of ul, ol, p, h1-h6, blockquotes, etc. elements to check if there is anything missing.

    23. Use of Third-Party Services

    Translator's note: The original English title is "Using Twitter"

    There are many popular APIs on the Internet that can be added to web pages for free. These tools are very powerful. It can help you achieve many clever functions, and more importantly, it can help you promote your website.

    24. Learn Photoshop

    Photoshop is an important tool for front-end engineers. If you are already proficient in HTML and CSS, you might as well learn more about Photshop.

    25. Learn every HTML tag

    Although some HTML tags are rarely used, you should still know about them. For example, "abbr", "cite", etc. You must learn them in case you need them.

    26. Participate in community discussions

    There are many excellent resources on the Internet, and there are many experts hidden in the community. Here you can learn by yourself or consult experienced developers.

    27. Use CSS Reset

    Css Reset also means Reset Css, which is to reset some HTML tag styles, or the default styles.

    There is also a heated debate online about whether CSS Reset should be used. The author recommends using it. You can first choose some mature CSS Resets, and then slowly evolve them into one that suits you.

    28. Align elements

    In short, you should align your web page elements as closely as possible. You can observe your favorite websites and you will find that their logos, titles, charts, and paragraphs are definitely aligned very neatly. Otherwise it will look messy and unprofessional.

    29. About PSD slicing

    Now that you have mastered HTML, CSS, and Photoshop, you also need to learn how to convert PSD into images and backgrounds for web pages. Here are two good tutorials:

  • Slice and Dice that PSD
  • From PSD to HTML/CSS

    • 30. Don’t use frameworks arbitrarily

    There are many excellent frameworks for both Javascript and CSS, but if you are a beginner, don't rush into using them. If you are not yet proficient in CSS, using a framework will confuse your knowledge system.

    CSS frameworks are designed for experienced developers and will save them a lot of time.

    <<:  Detailed explanation of Vue-router nested routing

    >>:  Beautiful checkbox style (multiple selection box) perfectly compatible with IE8/9/10, FF, etc.

    Recommend

    Detailed explanation of how to build a CDN server with Nginx (picture and text)

    Using Nginx's proxy_cache to build a cache se...

    The difference between char and varchar in MYSQL

    CHAR and VARCHAR types are similar, differing pri...

    CSS3 changes the browser scroll bar style

    Note: This method is only applicable to webkit-ba...

    What to do if the online MySQL auto-increment ID is exhausted

    Table of contents Table definition auto-increment...

    Detailed usage of js array forEach instance

    1. forEach() is similar to map(). It also applies...

    Installation and usage analysis of Portainer, a visual UI management tool for Docker

    Portainer is an excellent Docker graphical manage...

    Simple usage example of vue recursive component

    Preface I believe many students are already famil...

    Solution to elementui's el-popover style modification not taking effect

    When using element-ui, there is a commonly used c...

    Some improvements in MySQL 8.0.24 Release Note

    Table of contents 1. Connection Management 2. Imp...

    TypeScript generic parameter default types and new strict compilation option

    Table of contents Overview Create a type definiti...

    Solve the grouping error Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated in MySQL versions greater than 5.7

    reason: MySQL 5.7.5 and up implements detection o...

    Installation process of MySQL5.7.22 on Mac

    1. Use the installation package to install MySQL ...

    A Deep Dive into the MySQL InnoDB Storage Engine

    Preface In MySQL, InnoDB belongs to the storage e...

    Summary of considerations for writing web front-end code

    1. It is best to add a sentence like this before t...

    How to restore a database and a table from a MySQL full database backup

    In the official MySQL dump tool, how can I restor...