HTML 5 3 guidelines to best practices

I am beginner in HTML, could you direct me to where I can find the 3 guidelines to HTML best code practices or do you know?

Thank you.
cookiejarAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The actual guidelines are written as the spec over at http://www.w3.org/TR/html5/.   Personally, I would find that hard to digest and learn.  But you do need to understand what is there as a reference.  When you get stuck on some things, the details are going to be there.

You can also run your code through the validator http://validator.w3.org/ and by learning from your errors is a great way to go.

You said you are starting out and if you want to learn to code in html, I would save these references for later.  I have found that codecademy does a great job of teaching by giving you pieces at a time and coding. http://www.codecademy.com/tracks/web  There are other places like code.org and codeschool.  I have gone through the codecademy myself just to see what it is and liked it.

I would start with the html track http://www.codecademy.com/tracks/web where you learn html and css.  Then move on to javascript http://www.codecademy.com/tracks/web and finally jquery http://www.codecademy.com/tracks/jquery.  Jquery is a javascript library and widely used. It helps manipulate the DOM (page) for some of the what makes sites cool.  

Don't try and cram it in all at once.   Especially for the javascript section, don't be upset if you have to run through it more than once.  You will see they have make a website and interactive website http://www.codecademy.com/.     And the best way to learn is to have a live project you want to build.  Go through the basics, then plan out your live project and get to work. Then keep asking questions here.  

There is a lot to digest and if you try and jump right in to a final project you may be lost.  Also know that the bigger web developing companies have people for specific tasks such as design, front end programming (html, css, js) and backend (server side programming in php, node, .net) and database (sql server, mysql, nosql )   If you try and do it all at once, it will be difficult.

Some other references are https://developer.mozilla.org/en-US/ and http://www.w3schools.com/.  But if you want to know why you can't put a div inside of an ul  you need to look at the spec.  In this case http://www.w3.org/TR/html-markup/ul.html#ul where it shows, Permitted Elements:
Zero or more li elements.

Usually when people ask about HTML5, they are thinking of CSS3 and that is another ball of wax to tackle once you have the basics https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
After rereading your question, "the 3 guidelines to HTML best code practices " I wonder if you meant things like

Always close your tags in the same order they are opened, inline styles vs external css etc.  There is a tutsplus that went through that kind of thing, http://code.tutsplus.com/tutorials/30-html-best-practices-for-beginners--net-4957.

If you go through the exercises of learning html, you will not need a list like that and it will be second nature.

Best of luck.
0
 
cookiejarAuthor Commented:
Thank you for the  helpful information.  Yes,  I meant good HTML code guidelines, i.e. always close tags in the same order they are opened.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
cookiejarAuthor Commented:
What does well-formed HTML means?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What are the guidelines?  I'm going to say that is a subjective answer based largely on the purpose.  At the core, your code should validate to the spec.  

Well formed HTML means the html passes validation.

Most of the errors I see here where people need help stems from things like not closing tags or not closing tags in the same order they are opened.
<div class="row">
   <p><span class="bold">This is my text</p></span>
</div>

Open in new window

Or they copy pasted code from an old plug in that looks like
<ul>
    <div class="bold">Put this here first</div>
    <li>bullet point</li>
 <li>bullet point</li>
 <li>bullet point</li>
</ul>

Open in new window


Mixing up css is another problem. Remember that the style sheet on the bottom (end) will rule over what is on top.  If you have a style.css that has .red{color:red} and below the style. css you have custom.css that contains .red{color:blue} then the color for the red class will be blue.  Finally, any styles written inline will over right any style sheet.

Most of the mistakes happen when you take shortcuts.  Go through the tutorials and take it one step at a time.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I meant to point out in this example, the html is not well formed.  The reason in this case is there is a div as a child element of the ul tag.  http://www.w3.org/TR/html-markup/ul.html.  You can see the Permitted Contents is Zero or an li tag.  

If you put the below code in your page it will work and visually you will see, "Put this here first" without a bullet point.  However, put this code in the validator and you will get, "Error Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)"

If you are relying on javascript or jquery to manipulate your page, some of these validation errors will prevent your page from displaying properly or at least the part that is using js/jquery to display.  

<ul>
    <div class="bold">Put this here first</div>
    <li>bullet point</li>
 <li>bullet point</li>
 <li>bullet point</li>
</ul>

Open in new window

0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.