10 coding mistakes new html developers make

10 coding mistakes new html developers make
  • 9 July 2010
  • Articles, Web Design
  • This post was written exclusively for PV.M Garage by Mike Smith
  • Comments (61)»

For most of us, remembering what it was like when we first started writing our own html codes seems like decades ago (for some of us, it was decades ago), so taking a step back and looking over the basics again is something we forget to do from time to time. Today, we remember and we take a look at some basic html coding mistakes that beginning developers make when first starting out.

Hopefully, by reading this article, you’re able to remember something you may have overlooked in the past or if you’re new to html, you’re able to avoid some of the mistakes I have made in the beginning stages of my web design career. If you’ve made these mistakes, don’t worry – most of us could check off every item on this list at one point or another in our lives. Just remember the solutions to each of these issues and your clients will thank you :)

1. Missing or incorrect DOCTYPE

In order to let your browser know what type of html you’re using, you need to call a specific DOCTYPE. In HTML 4.01 there are three primary DOCTYPE’s and remember, DOCTYPE’s ARE case sensitive. To find out more info on the DOCTYPE’s you can use, check out this page from w3schools.

2. Inline styling instead of keeping CSS codes in the CSS file

While this will not break your codes and cause errors on your page, it’s definitely a bad practice that a lot of new developers fall prey to. To keep things orderly and allow yourself the ease of editing in the future, always, I repeat, always add your css codes in a separate css file.

3. Not including the alt=”" tag for images

A lot of developers will write their html codes out for their images and forget that the alt=”" tag in your image code IS required in order to give you valid html coding. Another benefit of always using the alt=”" code is that the words you put inside of it will be shown if the image breaks for whatever reason and it also helps with SEO for your images (you would be surprised how much traffic your site can get from google image searches).

4. End tag for “div” omitted, but OMITTAG NO was specified.

This is an error you’ll see a lot of when you’re writing codes faster than your eyes can keep up with. Generally, you’ve opened a div tag but forgot to close it with a

. With a program like notepad++, you’re able to actually click on a piece of code and find where it ends at, which helps you find where there’s a missing div (or other piece of code like a form, list, ect).

5. Improperly nesting tags

While on the page everything will appear normal, writing your code improperly like this will break your valid code and cause other errors to appear in your code validation at times. By improperly nesting tags (ie: Words) you’re not only causing errors, but you’re also making it a hell of a lot harder on yourself to edit codes in the future. Make sure you’re opening and closing tags in order, please & thank you :)

6. Not using only single or only double quotes (mixing them in)

I’ve been guilty of this numerous times in the past. When you’re writing your codes, you should generally stick to either using single quotes or double quotes at all times, but sometimes you’ll forget and type the wrong quote in and cause errors. I personally use double quotes in all of my codes as it’s easier to see the quotes when scrolling through the page of code and it’s helped me to remember that single quotes are only for content writing :)

7. Copy and pasting special characters instead of encoding them

Sure, you can get a © symbol to show on your page by typing it in microsoft word and just copy and pasting it into your website content area, but you’re going to get an error and on some browsers, it will not even show correctly. Instead, check out this page and encode your special characters.

8. Using tags that are depreciated

If you’re writing html code and you’re still using or & instead of and codes, you’re definitely not keeping up with the web and the quality standards of coding. If you’re going to center something in a div on your page, make sure you’re using css codes to take care of that instead of littering your html file with unnecessary & depreciated codes. This page has a nice list of deprecated html tags and their updated codes.

9. Using line breaks to show a list instead of ul or ol list codes

When you’re writing codes to show lists in your content, some people will tell you to use at the beginning of the line and then a
tag at the end – this is wrong. Please make sure you’re using ordered or unordered lists when putting a list into your site. It’s the proper thing to do and it makes for much easier editing in the future.

10. Coding an entire website layout in tables!

The year was 1995. It was a time when the web was booming and tables were everywhere. The beauty of 1995 though, is that it’s the past and today, we’re not using tables anymore. So, stop using tables already!. Utilize the power of css and your layouts and codes will thank you. What would normally take you 100 lines of code if you were using tables to create a website layout could be done in 10 by using css codes.

What about you?

What mistakes have you made in the past when coding out websites or apps? Drop a comment and let us know.

Author: Mike Smith

Mike releases WordPress themes and is a full time freelance designer at Guerrilla. He writes articles across the web on a variety of design and business related topics.

website design and development

61 Comments

  1. Tom Harrigan

    Confusing style with layout: using the image tag for images that should be set in the css ie. backgrounds, icons, dividers

  2. Izzat Aziz

    basically the mistakes is not validate the design.

    nice post, thank

  3. Mark Cossey

    I probably have made a few of those mistakes in the past but learnt to code HTML better.

    I then got a job creating HTML for Email and had to unlearn what I know about XHTML and re-learn what I knew about HTML 4.0 i.e. line break lists, tables and spacer gifs… yuk

  4. bryan

    Good Article and basic tips! And always remember to BACK UP all your files!

  5. dan leatherman

    I’m forced to code in table layouts at my job. Good thing I’m leaving in a week :)

  6. aditia

    well maybe it still debatable but i’m trying to move all my navigation to ul li tag instead using a tag as a block

  7. Jens Grochtdreis

    This article is a good example for error 4 and error 11. In point 8 you haven’t closed a tag correctly and I guess <ou missed to mask tags correctly, that you wanted to show inside the code-element. After the code-element the rest of the text is bold.

    And you have made yourself error 11: THERE IS NO ALT-TAG!!! There is an alt-attribute, but no tag!!!

    People talking of Alt-Tags show that they are no Frontend-Pros. They may be professional in backend-techniques but not in frontend.

  8. aussiewebgirl

    Biggest mistake of newbies is one you’ve unfortunately made here by referring to the ALT attribute as a tag.

    The hurdle I had was stopping myself using inline styles – it seems so easy in the short term but external stylesheets are just an absolute necessity and so much easier once you get the hang of it.

  9. tasarla

    Leave your commen

  10. MikeH

    One note about coding with tables.. this might just be me being ignorant, but there are a few types of JS elements that just don’t function without a table container, such as expanding content toggles and such. I’ve tried several ways to get them to work and CSS just don’t cut it.

  11. Fedor

    Каталог ссылок на хорошие сайты в Сети. Содержит несколько различных рубрик для размещения ссылок различных тематик. Любой здесь сможет разместить свою ссылку.

  12. Сафон

    На нашем порно трекере вы можете найти видео для взрослых таких жанров как анал, порно с животными и многих других. У нас самые лояльные правила в рунете.

  13. Фархан Али

    На нашем порно трекере вы можете найти видео для взрослых таких жанров как анал, молоденькие и многих других. У нас самые лояльные правила в рунете.

  14. Александр

    Полный комплекс услуг: услуги грузовой автоперевозки, офисные и дачные переезды. За доставкой грузов следят опытные логисты, а автопарк обслуживается профессиональными водителями. В любое удобное для время осуществим быструю доставку груза.

  15. aspav

    В этой бесплатной игре Вы сможете покорять далёкие планеты .

    Добыча ресурсов, производство оружия, торговля, исследование планеты, строительство городов, боевые действия против других игроков и коварных пришельцев, выполнение разнообразных заданий Корпорации. Всё это ждёт тебя на планетах Изменчивого мира.
    В многопользовательской браузерной военно-экономической стратегии в режиме реального времени Variable World.

    исследуй, осваивай, защищай.
    http://variworld.Ru

  16. Максим

    Продам кодграббер, код-граббер, автосканер, сканер автосигнализаций.
    hackersrussia.org
    Алгоритмический кодграббер, мануфактурный кодграббер.
    Кодграбер для всех моделей Scher-Khan. Кодграббер Starline Dialog.
    Кодграбберы от 200$ только у нас.
    Пишите carunlock[ собaка ]gmail.com

  17. body0star0

    видеоролики голых знаменитостей

  18. Виктор

    Ярославское ш., 85 км от МКАД, деревня Арханка Владимирская область.
    Участок 15 соток для ИЖС.
    Коммуникации: электричество, газ 2011 год (уже ведут).
    Хорошая транспортная доступность, отличный подъезд зимой и летом (асфальт).
    Живописнейшее место, озеро, река в 5и минутах, можно собирать грибы и ягоды, прекрасное место для отдыха и постоянного проживания.
    Деревня застроена новыми котеджными домами на 90%, магазины рядом.
    40 000 рублей за сотку.
    Тел: 8-903-124-40-17
    Виктор.

  19. Ефим

    Размести тематическую статью о своем ресурсе в нашем каталоге и получи прямую ссылку без закрывающих тегов. Размещение статей в каталоге статей 56 новостей бесплатно с условием что в тексте будет всего одна ссылка на источник.

  20. body4star33

    свадьба веры брежневой фото

  21. body2star2

    анфиса чехова фото в купальнике

  22. Сергей

    Регистрация вашего сайта в 24436 каталогах – Мы пользуемся лицензионной программой Allsubmitter 6.2 и купленными базами каталогов:
    -Стоимость услуги 10$.
    Составление проекта + 10$
    Сроки выполнения 1-2 дня.
    -Размещение объявлений на 7501 досках объявлений за 10$.
    Повторная регистрация на досках 5$.
    Составление пректа 5$.
    -Контакты: yyarchuk@mail.ru

  23. body1star1

    голая грудь анны семенович фото

  24. Alex

    СОЦИАЛЬНАЯ СЕТЬ PEOPLESTRING – ЭТО 100% ЗАРАБОТОК БЕЗ ВЛОЖЕНИЙ!!!

    Бесплатная регистрация по ссылке:
    http://www.peoplestring.com/?u=mrmillioner
    Кто-нибудь заплатил Вам с Facebook, Одноклассники, Twitter, ВКонтакте, Mail.ru ???
    PeopleString – платит нам за то, что мы будем просматривать почту, общаться, играть в игры, заходить в интернет магазины.

    ВЫВОД ДЕНЕГ ВОЗМОЖЕН ОТ 25$ ПРЯМО НА ВАШ СЧЕТ.

    ВНИМАНИЕ !!!
    1) Регистрацию нужно подтвердить, после регистрации на Ваш email придет письмо, нажмите на ссылку в письме.
    2) Для удобства установите себе браузер Goolge Hrome для перевода сразу страниц на русский язык.
    По всем вопросам мой Skype: mrmillioner
    Помогу с регистрацией.

  25. Светлана

    Предлагаем вам широкий выбор возможностей, чтобы придать вашему дому неповторимый, присущий только вам, стиль
    Email: nechai777@gmail.com

  26. Прохор

    Служба знакомств в Челябинске и Челябинской области, а так же знакомства в Коркино. Здесь размещены анкеты знакомств Челябинска и других городов Челябинской области. На сайте есть возможность увидеть большое количество анкет, и поэтому Вы непременно найдете того кого ищете. Помимо этого, здесь есть анкеты для знакомств и людей из других городов, к примеру, из города Троицк. Посетите наш сайт знакомств в Челябинске и Вы не пожалеете.

  27. Андрей

    Качественная регистрация в поисковых системах, каталогах и рейтингах с помощью надёжной ,а также удобной программы AllSubmitter.

  28. Евгения

    Регистрация в каталогах, рейтингах с помощью надёжной ,а также удобной программы AllSubmitter.

  29. Ellas

    Русское телевидение, прямая трансляция для Норвегии . Интерактивная программа передачь.
    Смотрите на IPhon – телевидение в прямом эфире .
    Отличное качество и лучшие каналы на русском языке .
    Трансляция в цифровом формате, а так же HD и FullHD каналы доставят Вам удовольствие.
    Более 100 ТВ каналов, а так же Архив и Видеотека в пакете онлайн телевидения.

  30. alexsandr
  31. Ольга

    Тут Вы найдете объективную и полезную информацию о возможности купить или возможности взять в аренду разной недвижимости. Вся недвижимость Болгарии на одном месте.

  32. Lotouttwheems

    You can start using painkillers whenever you have pain. Some people stay on the same dose for months. That’s what i want to say here.

    ___________________________________
    my profile

  33. Lymnpaype

    Консалтинговая группа предлагает бухгалтерські послуги київ

    Мы оказываем услуги компаниям всех форм собственности, которые работают в различных отраслях и на различных системах налогообложения. Нашими клиентами являются как крупные предприятия, давно и успешно работающие на рынке, так и небольшие, недавно созданные фирм

  34. Bella Bands Maternity Bands

    wow!I think you are amazing

  35. Михаил

    Для работы в Бразилии или Коста-Рике приглашются WEB & UI Developers:
    - Контракт на 1 год, с продлением на 2-3 года;
    - Предоставляется жильё и авиабилет;
    - Командировки в Сан-Франциско, Калифорнию;
    - Разговорный и технический письменный Английский;
    Необходимо знать: Java Script и иметь опыт работы с e-commerce applications.
    Контакт: WorkDeveloper[ собака ]aol.com

    • Kate

      Емейл тут указанный – не правильный.

  36. Broariuff

    It has been observed that painkiller addiction sometimes come accidentally. Be careful with painkillers! online phentermine pharmacy pharmaceuticals online 24 pharmacy. That’s what i want to say today.

  37. HaiseeCag

    Even in my worst nightmares i didn’t see myself being absolutely dependant on painkilling drugs! without prescription drugs prescriptions online chemists on line. That’s what i want to say.

  38. TraleTekreoft

    Being a doctor I have witnessed most serious cases of severe chronic pain. I usually prescribe them soma online pharmacy cipro online prescription prescription online. That’s what i want to say.

  39. Used machines

    I was looking at this site for the first time and I was very impressed. Very good job and posts here. The 1st part was really great and very accurate.. we have to thank you. and you may be interested also in this packaging machinery and used packaging machinery site for your reference. please keep updates on your posts.

  40. alexsandr
  41. Sabra Ingle

    I do not even know how I ended up here, but I thought this post was good. I do not know who you are but definitely you’re going to a famous blogger if you aren’t already ;) Cheers!

  42. Генадий

    Веб студия scorpx.ru предоставляет следующие услуги:
    Создание сайтов,
    Оптимизация сайтов,
    Продвижение сайтов,
    Регистрация доменов,
    Хостинг.

  43. Luxonix

    Мрамор и гранит – любые изделия из натурального камня. Камины, столешницы, лестницы, полы, фасады, подоконники, балясины

  44. Alexander

    Сайт продвижения СЕО и оптимизации SEO, сайт поддерживается многими ведущами специалистами в области SEO. Секреты СЕО продвижения сайтов и много едругое.

  45. Sasha

    Скачать программы, фильмы, музыку и другое.

  46. Андрерй

    Ремонт компьютеров

  47. Ирина

    Цены на номера стандарт, эконом и люкс от 1800 до 3500 рублей в сутки.
    Во всех номерах есть телевизоры, интернет, кухни оборудованы всей необходимой техникой.
    http://www.allo-piter.ru
    +7(812)702-73-07

  48. Амвросий

    Отличные проги для раскрутки ваших сайтов

  49. Yuri

    На этом сайте представлен сборник небольших, но известных и полезных программ для мобильника и компьютера от Кудрина Юрия. Например такие, как: MiniCommander и IcqMobiReg.

  50. paqnes247fyyy5

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US