HTML has done a lot of growing up. So has a lot of other coding languages. However with some older tutorial sites and older manuals that people read online, there are still a lot of mistakes happening. In most content management systems, including WordPress, it is allowable to use HTML when creating posts or pages.
Here are 8 HTML mistakes you should avoid.
1. Image tags do not have a name (alt)
WRONG WAY:
<img src="YOURIMAGEFILEHERE" />
CORRECT WAY:
<img src="YOURIMAGEFILEHERE" alt="NAMEOFIMAGEHERE" />
2. Lists are not formatted correctly
WRONG WAY:
Peaches<br /> Milk<br /> Bread
OR
1. Peaches <br /> 2. Milk</br > 3. Bread
CORRECT WAY:
<ul> <li>Peaches</li> <li>Milk</li> <li>Bread</li> </ul>
OR
<ol> <li>Peaches</li> <li>Milk</li> <li>Bread</li> </ol>
3. Italics and Bold tags are wrong
Bold is <strong>, and not <b>
Italics is <em>, and not <i>
4. Using the line break tag instead of the paragraph tag
If you are putting a space between two paragraphs, use the <p> tag and not the <br />. Just make sure the style the paragraph tag in your CSS.
Example:
<p>I need to go shopping soon, but I forgot to make a list.</p> <p>I am busy now, but I might be able to make that list later.</p>
5. Using outdated code or elements that have deprecated
Here is a short list of some that should not be used:
<applet><basefont><center><dir><embed><font><isindex><menu><noembed><s><strike><u>
6. Not specifying a DOCTYPE
This is the first thing that should go on any website. This tells the browser what kind of markup language you are using for your website. W3C has a great list of recommended DOCTYPE declarations.
7. Using Tables for design
Tables can be nice to work with, but can be very limiting. They are intended for hard core data. So if you have a post that for example compares WordPress to Blogger, you are going to want to put a table. That is considered data.
You should be using division layers (not div layers, even though the tag is <div> to design your website.)
8. Not closing tags or forgetting to write an opening tag
This is the part that a lot of people have, including long time web designers. A lot of times for long time designers it is just a mistake, but for those who are new, not closing a tag might distort the layout. This is probably the #1 solution I end up recommending when people ask me to help them out with their website.
Forgive my ignorance Nile but why should there be a name for images? SEO?
My recent post How to Connect LinkedIn to Your Facebook Profile
This has been something that has been in coding for quite some time. When I first started coding web sites long ago, this was not so much of an issue, but it was still considered invalid coding according to W3C. According to my understanding it is about web accessibility. When the picture is not present, there is a text in its place. For readers who can only use text only, this is great (web accessibility.) I am not sure who surfs the net like that now, but this has always been one of those things that I think is strange.
SEO wise, it might be a leg up because you are labeling your photos… just like the video SEO that is currently a hot topic.
These are good to know, although W3Schools still lists i and b for italic and bold (I'm not sure why). They list strong for "strong text" and em for "emphasized text." I find that funny because to me they look the same and I use strong and em instead because I'm used to seeing it in WordPress.
W3 is the place to go to, not W3schools. Might have to send them an email about that.
My recent post WPAddict is Accepting Guest Posts
Hi, that was cool. 🙂 But I'm kind of confused what are the differences between strong and b and i and em.
Thanks for the tips – these are definitely easy mistakes for beginners that I've had to learn to avoid (especially not leaving an image tag – so many people still do this!).
Natasha
My recent post Keeping Project Management straightforward when freelancing
I put my blog in w3 and i had a lot of errors. Is there a place where i can learn to correct them all.
You hace here some good advice, but my list errors is big, and want tyo have a clean blog.
My recent post Crear un correo en Hotmail
You can go and learn from http://w3schools.com . They have a lot of tutorials in which you can learn. Also, in the W3 validator, it tells you what you need to correct when it pulls up your errors. You can show the source code in the advanced options.
Thanks a lot for telling me about this place http://w3schools.com/ I would recomend to everybody.
I liked very much the try yourself way to teaching.