HTML is a language for describing web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML is not a programming language, it is a markup language
  • A markup language is a set of markup tags
  • HTML uses markup tags to describe web pages

In this article, 10 tips are collected together and offered for beginners, specifically for those who are just diving into web development with one year of knowledge or less. As long as bearing in mind and flexibly applying them in practical exercises, you definitely can write masterful codes and become a good programmer.

clip_image002

1. Be Sure to Close Tags

We always see some source codes in web documents like this

  1. <li>Some text here.
  2. </li><li>Some new text here.
  3. </li><li>You get the idea.
  4. </li>

Maybe in the past we could ignore this, but in today’s standards, it should be 100% avoided. Be sure to close your tags, otherwise you’ll encounter corroboration and malfunction issues at every turn.

2. Declare the Correct DocType

The author used to participate quite a bit in CSS forums. When a user had some questions, before we look at their situation, we suggest him that two things go first.

  1. ①Validate the CSS file. Fix any necessary errors.
  2. ②Add a doctype.

Only if define doctype before HTML tags begin, which tell the browser that HTML, XTHML or mixture of both consist in the page, the browser can analysis tags correctly.

Usually there are four doctypes 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">

Different opinion always exists in the discussion about what kind of declaration is correct. Most people think the most strict is the best, however researches show that many people choose using HTML 4.01 Strict because most browsers analysis this declaration in a ordinary way. But the bottom line is whether it fits you or not. Therefore you have to think over it and choose your correct one.

3. Do Not Use Inline Styles

When you work really hard on writing codes, it can be alluring to take the easy route and sneak in a bit of styling like this

  1. <p style="color: red;">i want you to notice this</p>

It looks like convenient and no-big-deal, but troubles are brought without noticed. It is better for you to use styles after finish its structure and content. A better method is reference that P tag from your external stylesheet.

  1. someElement > p {
  2. color: red;
  3. }

4. Place all External CSS Files within the Head Tag

Technically, you can place stylesheets wherever you want. Though, the HTML requirement recommends that they be placed within the document head tag. The primary advantage is that your pages will apparently load faster.

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

5. Consider Placing Javascript Files at the Bottom

Remember a principle that we should make a page load as fast as it can. When loading a script, the page will not continue until the entire file has been loaded. It wastes a lot of time.

If you only want some like add a functionality after click a button, then it is a best choice to place those files at the bottom before the closing body tag.

For example

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

6. Do Not Use Inline Javascript. It’s Already 2009!

Years ago there was an ordinary way that people placed JS directly within tags, especially in simple image galleries. In essence, a “onclick” attribute was appended to the tag and its value is equal to some JS method. We should not do this. Instead, transfer this code to an external JS file and use “addEventListener/attachEvent” to “listen” for your preferred event. Or, if using a framework like jQuery, just use the “click” method.

  1. ① $(’a#moreCornInfoLink’).click(function() {
  2. ② alert(’Want to learn more about corn?’);
  3. ③ });

7. Validate Continuously

clip_image003

Many people don’t really understand the value of validation. In brief, validation is work for you, not against.

If you just started web design, I strongly recommend this web develop toolbar which called Web Developer 1.1.8. You can download it on Internet and and use the “Validate HTML” and “Validate CSS” options continuously. CSS is not only a easy language to learn, but also a hard nut to crack. You’ll find that it’s your inexact makeup that cause lots of problems. Therefore, the best way is validation, validation and validation.

8. Use H1-H6 Tags

It is recommended to use all six of these tags in page, although most people only use the top four. There will be a lot of advantages when the maximum are used, so force yourself to replace that P tag with an H6 when appropriate.

9. If Building a Blog, Save the H1 for the Article Title

clip_image004

Though it is depend on your needs and your website, I recommend that when you build a blog, save the H1 for the article title. It really do good to SEO, so you’d better try this.

10. Wrap Navigation with an Unordered List

clip_image006

Websites usually have their navigation and you can formate it like this

  1. <div id="nav">
  2. <a href="#">Home </a>
  3. <a href="#">About </a>
  4. <a href="#">Contact </a>
  5. </div>

But you’d better not do this if you want write much better code. UL tag is meant to contain items, so it’s better to formate it like this

  1. <ul id="nav">
  2. <li><a href="#">Home</a></li>
  3. <li><a href="#">About</a></li>
  4. <li><a href="#">Contact</a></li>
  5. </ul>

For help, advice, tips and tricks, challenges, feel free to visit ourDoNotYet forum or Submit your good resource to share.

Reminder: Unless stated otherwise, all resources published on this site are NOT for commercial use. To use any resource from this site for commercial purposes, please contact the author.

Related Posts