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 (60)»

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

60 Comments

  1. Tom Harrigan
    July 9, 2010 at 8:59 am

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

  2. Izzat Aziz
    July 9, 2010 at 10:06 am

    basically the mistakes is not validate the design.

    nice post, thank

  3. Mark Cossey
    July 9, 2010 at 10:24 am

    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
    July 9, 2010 at 4:16 pm

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

  5. dan leatherman
    July 9, 2010 at 6:07 pm

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

  6. aditia
    July 12, 2010 at 4:11 am

    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
    July 12, 2010 at 5:11 am

    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
    July 12, 2010 at 6:27 am

    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
    July 30, 2010 at 7:26 am

    Leave your commen

  10. MikeH
    October 18, 2010 at 3:54 pm

    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
    December 27, 2010 at 6:25 pm

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

  12. Сафон
    February 8, 2011 at 1:34 pm

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

  13. Фархан Али
    February 8, 2011 at 3:55 pm

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

  14. Александр
    February 9, 2011 at 8:37 am

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

  16. aspav
    February 9, 2011 at 12:05 pm

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

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

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

  18. Максим
    February 10, 2011 at 5:09 am

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

  19. body0star0
    February 11, 2011 at 5:46 pm

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

  20. Виктор
    February 12, 2011 at 5:19 am

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

  21. Ефим
    February 12, 2011 at 2:29 pm

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

  23. body4star33
    February 13, 2011 at 12:41 am

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

  24. body2star2
    February 13, 2011 at 9:57 pm

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

  26. Сергей
    February 15, 2011 at 3:06 am

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

  27. body1star1
    February 15, 2011 at 3:32 am

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

  28. Alex
    February 15, 2011 at 7:07 am

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

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

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

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

  29. Светлана
    February 15, 2011 at 9:06 am

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

  30. Прохор
    February 16, 2011 at 12:03 am

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

  31. Андрей
    February 16, 2011 at 5:01 pm

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

  32. Евгения
    February 17, 2011 at 4:57 am

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

  33. Ellas
    February 17, 2011 at 6:04 am

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

  34. alexsandr
    February 17, 2011 at 11:19 am
  35. Ольга
    February 18, 2011 at 12:09 am

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

  37. Lotouttwheems
    February 18, 2011 at 10:12 am

    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

  38. Lymnpaype
    February 19, 2011 at 5:44 pm

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

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

  39. Bella Bands Maternity Bands
    February 21, 2011 at 4:01 pm

    wow!I think you are amazing

  42. Михаил
    February 22, 2011 at 12:58 am

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

    • Kate
      June 28, 2011 at 1:44 pm

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

  43. Broariuff
    February 22, 2011 at 7:45 am

    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.

  44. HaiseeCag
    February 22, 2011 at 11:55 am

    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.

  45. TraleTekreoft
    February 22, 2011 at 3:08 pm

    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.

  46. Used machines
    February 22, 2011 at 8:25 pm

    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.

  47. alexsandr
    February 23, 2011 at 6:08 am
  48. Sabra Ingle
    February 23, 2011 at 8:00 am

    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!

  49. Генадий
    April 11, 2011 at 4:37 am

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

  50. Luxonix
    April 15, 2011 at 9:12 am

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

  51. Alexander
    May 9, 2011 at 11:18 am

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

  52. Sasha
    May 9, 2011 at 3:30 pm

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

  53. Андрерй
    May 22, 2011 at 5:50 am

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

  54. Ирина
    June 1, 2011 at 11:38 am

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

  55. Амвросий
    July 7, 2011 at 5:20 am

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

  56. Yuri
    July 9, 2011 at 8:05 am

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

  57. paqnes247fyyy5
    July 17, 2011 at 4:43 am

Trackbacks

Leave your comment

You must be logged in to post a comment.

Socialize With Us

sport_news.jpg icon_set making_seo

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