10 HTML Tips for Beginners

85 replies
  • WEB DESIGN
  • |
Here are 10 HTML tips and tricks for newbies. If you're just starting out with building your Web pages, these techniques should be very useful to you!

1. Always close your HTML tags
2. Style HTML using style sheets wherever possible
3. Use an HTML validator
4. Use HTML comments wisely
5. Embedding images in HTML
6. Use widths and heights with HTML images
7. Non-breaking spaces in HTML
8. Use tables for tabular data, CSS for layout
9. Creating empty table cells
10. The spacer GIF trick
#beginners #html #tips
  • Profile picture of the author Sacredvoyage
    Great post, some very useful tips here. I will be putting these into practice and let you know how I get on.

    Thanks
    Signature
    {{ DiscussionBoard.errors[2907509].message }}
    • Profile picture of the author outsourcedesign
      hi.........
      Thanks for giving such a great tips!
      really it is a good tips and it is very usefull tips to newbies to develop a good web page.
      {{ DiscussionBoard.errors[2907807].message }}
  • Profile picture of the author RaulK
    Can you elaborate on the point 10? spacer GIF trick?

    Thanks.
    {{ DiscussionBoard.errors[2907849].message }}
    • Profile picture of the author brandon2664
      Originally Posted by RaulK View Post

      Can you elaborate on the point 10? spacer GIF trick?

      Thanks.
      How do you expect him to elaborate on that when he obviously just ripped that info off some other site.
      {{ DiscussionBoard.errors[4187045].message }}
  • Profile picture of the author deziner_web
    yeah what is spacer GIF trick?
    Signature

    website design, sales page design, e-book design, and web hosting in very cheap rates.
    contact : scaty.designer@gmail.com

    {{ DiscussionBoard.errors[2908439].message }}
  • Here are some more html tips for beginners
    1: Always Close Your Tags
    2: Declare the Correct DocType
    3: Never Use Inline Styles
    4: Place all External CSS Files Within the Head Tag
    5: Consider Placing Javascript Files at the Bottom
    6: Never Use Inline Javascript. It’s not 1996!
    7: Validate Continuously
    8: Download Firebug
    9: Use Firebug!
    10: Keep Your Tag Names Lowercase
    {{ DiscussionBoard.errors[2911796].message }}
    • Profile picture of the author caesargus
      I'm on a roll right now so I'll follow up this one as well ...
      Originally Posted by ecommerce web developer View Post

      Here are some more html tips for beginners
      1: Always Close Your Tags - We just covered this ... so I won't go over it again.
      2: Declare the Correct DocType - Ah yes - this allows you to determine how strict the browser is when it is rendering your page. For instance, Google Chrome is very specific about doc types, and if something is not just right then stuff starts to break, layouts appear wonky etc. (use the correct doc type - it'll save your sanity).
      3: Never Use Inline Styles - Inline styles are hard to correct especially if you end up repeating the same inline style over and over again. That is why they made Style Sheets, so you can make the change in one spot, not several - this saves headaches and time.
      4: Place all External CSS Files Within the Head Tag - If you're trying to practice proper web design, all CSS files should be placed in the head tag ... It helps the page load faster as well.
      5: Consider Placing Javascript Files at the Bottom - This is a suggestion that I see placed forth by the Yslow plugin. Its explanation behind this was that it helps with page rendering. Your page should load completely first before it begins to perform any processing.
      6: Never Use Inline Javascript. It's not 1996! - Just think ease of maintenance
      7: Validate Continuously - How else do you know if you just screwed something up, unless you validate it constantly? If you don't validate constantly, then you're not quite sure if the change you made 5 minutes ago or the change you made 5 days ago was the one that broke your site/page validation - this just saves headaches and time.
      8: Download Firebug - This is one of my favorite browser plugins. There are so many insights that this tool provides, like being able to modify scripts and stylesheet on the fly. Time Saver!
      9: Use Firebug! - Time Saver!
      10: Keep Your Tag Names Lowercase - You'd find this out if you're running against validators, that a lot of them will throw errors if your tag names are mixed case. Lowercase tags also means that you're being consistent, and being consistent allows you to read and debug your code faster ...
      Hope that info helps too!
      {{ DiscussionBoard.errors[2915363].message }}
    • Profile picture of the author tgsinc
      Hey! thank you for sharing, Really It's valuable for beginner's like me, I would like to try it.
      Regards,
      www telegenisys com
      {{ DiscussionBoard.errors[2982927].message }}
  • Profile picture of the author flowerwedding
    describe me 10 point with details.
    {{ DiscussionBoard.errors[2911902].message }}
  • Profile picture of the author SteveJohnson
    Unbelievable - a spammer thread completely populated by spammers.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[2913898].message }}
  • Profile picture of the author Silke
    About point 3: Why do you need an HTML validator ?
    Signature
    {{ DiscussionBoard.errors[2914180].message }}
    • Profile picture of the author orvn
      Originally Posted by deziner_web View Post

      yeah what is spacer GIF trick?
      Originally Posted by RaulK View Post

      Can you elaborate on the point 10? spacer GIF trick
      Basically you make sure that no one steals your image (or other content)
      By overlaying it with a 1px gif image called a spacer.

      In Flickr, you can't right click on copyrighted images, because there is a repeating spacer located throughout that div.

      It's more of a CSS trick really.


      Originally Posted by SteveJohnson View Post

      Unbelievable - a spammer thread completely populated by spammers.
      lmfao.
      Signature
      Orun Bhuiyan[@orvn] [linkedin] See what I've been doing lately by visiting my marketing agency's site. SEOcial specializes in content marketing and integrated optimization. We create conversions for businesses by gracefully connecting the realms of design, development and marketing.

      {{ DiscussionBoard.errors[2915296].message }}
  • Profile picture of the author caesargus
    Well since people are asking ... I guess I can fill in for mostapha ...

    Originally Posted by mostapha View Post

    Here are 10 HTML tips and tricks for newbies. If you're just starting out with building your Web pages, these techniques should be very useful to you!

    1. Always close your HTML tags - You want to close your HTML tags because it will allow the browser's html parser to process your page faster, and will give you faster page load times. You are able to get away without closing your tags, and it will not cause any significant page load increases, but it does make it easier to read, easier to style, etc. (more on this in a bit)
    2. Style HTML using style sheets wherever possible - You should use style sheets where possible, because you are able to make a change across your entire site, in one spot. If you are not aware of the power of Cascading Style sheets, I would check out some tutorials online. Quick example: You can change the format of a <p> tag just by making a style sheet with the following: p { font-family: 'Arial'; font-size: 9pt; }
    3. Use an HTML validator - You should use the validator to make sure that the tags are properly closed. This can help you greatly when you're trying to debug style sheet issues. Typically several issues related to style sheets and getting them to work properly on the site, can be traced back to the page not passing the html validator.
    4. Use HTML comments wisely - I'm not sure why this rule is here ... I assume it's just general commenting practice in that you should comment items so that you can figure out what you were doing when you left a section of code, and you're not sure why you built the section in a specific fashion - You'd find several comments in the IE6 CSS hacks - so comments left in those spots are extremely helpful.
    5. Embedding images in HTML - Um ... To embed images use the following <img src="image_path" />
    6. Use widths and heights with HTML images - This allows the page to build it's layout faster, since it knows how big to place the images. <img src="image_path" width="image_width_size_num" height="image_height_size_num" />
    7. Non-breaking spaces in HTML - when HTML is displayed in the browser, the browser will ignore white space (outside of the first space). If you need additional spacing use the "&nbsp;" which means non-breaking space, this allows you to add additional spacing where you need it. Just be careful when you're using too many of these, there is probably a better way to get the spacing you desire ...
    8. Use tables for tabular data, CSS for layout - This is one will help the page load speed of your site. By using the css for layout and tables for tabular data it allows your page to render faster, because the entire table must be rendered before it can be displayed to the user. So if you have a huge amount of data (or you're using tables for your layout ...) your site will slow down (or appear to be slow) because the page is rendering. If you use CSS, the rendering can take place after the page is loaded, and can be replaced easily when you want to change out a holiday theme...
    9. Creating empty table cells - Have you ever rendered a table with borders and you noticed that one of the table cells were "flat" where all of the other cells were nice and hollowed out with data? This is because if the table cell does not have data, it doesn't hollow out the cell if it doesn't need to. So what do you do? Add a "&nbsp;" to all of the empty cells (and if you're programming, and you're not sure if the cell will be empty or not - add a "&nbsp;" in front of any content that you're going to render).
    10. The spacer GIF trick - The spacer gif trick ... This is somewhat old school, but if you need a thin line (it can be any thickness you want really ...), what you would do is create a transparent gif that is 1x1. Place this spacer gif on your web server somewhere so you have access to it. Now do the following ...
    <table><tr><td bgcolor="#FCFCFC"><img src="images/spacer.gif" width="1" height="50" /></td></tr></table>
    This creates a line 50 pixels tall with the color of "#FCFCFC". This allows you to get a precise placement of various items.

    When I said this was old school, this functionality was replaced by Style Sheets since they can handle exact placement of items. But it is a good trick to know.
    Hope that information helps!
    {{ DiscussionBoard.errors[2915312].message }}
  • Profile picture of the author emma11
    Hi friend what a nice tips provide from you. Its really very important for me, HTML design updates itself regularly based on changing rules, which usually includes a set for each version.
    Thanks for sharing this beautiful tips.
    {{ DiscussionBoard.errors[2917992].message }}
  • Profile picture of the author signity
    Its really great tips for the beginners. Thanks for sharing it.
    {{ DiscussionBoard.errors[2926537].message }}
  • Profile picture of the author brenna55
    Originally Posted by mostapha View Post

    Here are 10 HTML tips and tricks for newbies. If you're just starting out with building your Web pages, these techniques should be very useful to you!

    1. Always close your HTML tags
    2. Style HTML using style sheets wherever possible
    3. Use an HTML validator
    4. Use HTML comments wisely
    5. Embedding images in HTML
    6. Use widths and heights with HTML images
    7. Non-breaking spaces in HTML
    8. Use tables for tabular data, CSS for layout
    9. Creating empty table cells
    10. The spacer GIF trick
    Absolutely right, I agree with you and thanks for sharing.
    {{ DiscussionBoard.errors[2939467].message }}
  • Profile picture of the author Zombee
    nice tips there.... thanks
    {{ DiscussionBoard.errors[2939724].message }}
  • Profile picture of the author bestdesigner
    Those are great tips mostapha. Thanks for sharing the information...
    {{ DiscussionBoard.errors[2940080].message }}
  • Profile picture of the author wendymay1
    Always good to add HTML as part of your Internet Marketing arsenal.

    Thanks for the tips
    {{ DiscussionBoard.errors[2940174].message }}
    • Profile picture of the author Shirlyn
      hi,HTML is the basic web development and designing language from last decade or more and I have found all info in the above points for an easy start with HTML. Thank you for sharing your knowledge here.
      Signature
      {{ DiscussionBoard.errors[2940254].message }}
  • Profile picture of the author andywily889
    This is such useful tips for beginners like me. These all are use by new or old user day by day development. It is really important for me. And I think HTML is most used in creating website.
    {{ DiscussionBoard.errors[2944418].message }}
  • Profile picture of the author mahesh2010
    Nice tips keep sharing thanks
    {{ DiscussionBoard.errors[2944571].message }}
  • Profile picture of the author princefarr
    Banned
    Actually I was looking for this tips. Thanks for sharing such wonderful tips with all of us. Keep sharing more tips in th future.
    {{ DiscussionBoard.errors[2950312].message }}
  • {{ DiscussionBoard.errors[2953851].message }}
  • Profile picture of the author SPMassie
    Where were you months ago when I first started out lol. Thanks
    {{ DiscussionBoard.errors[2953873].message }}
  • Profile picture of the author mario25
    Hey, Buddies Thanks for sharing this useful information with us.
    {{ DiscussionBoard.errors[2963522].message }}
  • Profile picture of the author davidthomas35
    Thanks guys for the list of things that worth doing. I want to add one more point that is Do not forget to check to validate your html when done
    {{ DiscussionBoard.errors[2965778].message }}
  • Profile picture of the author tinajohn
    You can explore this in notepad itself.
    tags only very import.
    all the tags and its detail available in w3schools.com
    {{ DiscussionBoard.errors[2965891].message }}
  • Profile picture of the author mugen2k
    basic and great tips
    {{ DiscussionBoard.errors[2968533].message }}
  • Profile picture of the author shrutiseo
    Hi..!!

    Nice tips...!! Great Post..!! Thanks for sharing it...!!!
    {{ DiscussionBoard.errors[2969824].message }}
  • Profile picture of the author eallard.moore
    Excellent tips for beginners. Thanks for sharing
    {{ DiscussionBoard.errors[2971213].message }}
  • Profile picture of the author Anithaseo
    Thanks for the tips would like to try it out
    {{ DiscussionBoard.errors[2975577].message }}
  • Profile picture of the author PaulKennedy
    Many thnks for sharing this great tips with us. I will take care about them on my next project
    {{ DiscussionBoard.errors[2983631].message }}
  • Profile picture of the author Mehak
    thanks for sharing
    {{ DiscussionBoard.errors[2983635].message }}
  • Profile picture of the author jaxspotmedia
    For beginners, to learn more, use Firefox and download the firefox plugin "firebug". You can learn a lot of coding and another good part is you can accomplish a lot of troublshooting errors when you do webdesign.
    {{ DiscussionBoard.errors[2986652].message }}
  • Profile picture of the author keon.gray23
    Great information! Thanks for sharing this with us.
    {{ DiscussionBoard.errors[2988993].message }}
  • Profile picture of the author ninal
    Originally Posted by mostapha View Post

    8. Use tables for tabular data, CSS for layout
    9. Creating empty table cells
    10. The spacer GIF trick
    Aren't these 3 a bit contradicting? Since tables are no longer used for layouts, I doubt there's still much use for the spacer GIF. And what would be the empty table cells for?

    These 10 tips don't really provide much info.
    Signature
    Hello
    {{ DiscussionBoard.errors[2989089].message }}
  • Profile picture of the author FabianSmith
    Thanks for sharing i really appreciate your information........
    {{ DiscussionBoard.errors[2989142].message }}
  • Profile picture of the author jaxspotmedia
    also learn 960 grid system to make site more responsive.
    {{ DiscussionBoard.errors[2992391].message }}
    • Profile picture of the author profreelancer
      11. Use alt text with image tag
      12. Use title text with href links

      Nice tips!
      Just my 2 cents!
      Signature


      {{ DiscussionBoard.errors[2993651].message }}
  • Profile picture of the author welkin
    Hi, friend I please to observe your post, Its really very helpful for me. It will very helpful me for batter web layout. Thanks for sharing this.
    {{ DiscussionBoard.errors[2993877].message }}
  • Profile picture of the author iwtmmo
    Thanks for your nice tips! I think it's useful for newbies.
    {{ DiscussionBoard.errors[2998345].message }}
  • Profile picture of the author marimar
    Woww..Nice post, Very useful for me. Thanks for sharing it..
    {{ DiscussionBoard.errors[3154230].message }}
  • Profile picture of the author bilzz
    Very great post ..would be helpful for beginners thanks for sharing us .
    {{ DiscussionBoard.errors[3154241].message }}
  • Profile picture of the author chrismarcans
    These HTML tips for beginners are very useful. These can help a lot especially for those who are still learning. Thank you for sharing.
    {{ DiscussionBoard.errors[3154249].message }}
  • Profile picture of the author LoginBD
    I always keep jazascript into head tag. Now why should i consider Placing Javascript Files at the Bottom?...Does it have any specific reason.
    Signature
    http://www.loginbd.com
    The largest directory of Bangladesh
    {{ DiscussionBoard.errors[3154479].message }}
    • Profile picture of the author msforum01
      Here are some more tips:

      -Always Close Your Tags
      -Declare the Correct DocType
      -Never Use Inline Styles
      -Consider Placing Javascript Files at the Bottom.

      hope this will help also.....
      Signature
      {{ DiscussionBoard.errors[3155231].message }}
  • Profile picture of the author alexcercel
    RaulK < spacer gif is a transparent gif of 1x1 pixels you use to hide your logo or whatever behind it or to keep the size of a table cell if nothing else works. Eg. you have a logo div with your logo set as background and a spacer gif as the image inside the div. When you right click the logo and chose show image you see the spacer gif, not the logo < so it's like a bit of security against stealing your logo or whatever.

    Thanks,
    Alex
    Signature
    -----------------------------------------------------------------
    They Say The Dark Angel Wears Prada...
    CB Best Sellers Wear BlingCovers'
    Minisite Design
    -----------------------------------------------------------------
    Professional Web Banners - Amazing Prices!
    {{ DiscussionBoard.errors[3155335].message }}
  • Profile picture of the author rosesmark
    I really appreciated your work.
    {{ DiscussionBoard.errors[3982389].message }}
  • Profile picture of the author moonheart
    Thanks for the tips. I want to ask one thing that should i externally call the style.css file or should I add css within the html code?
    Signature

    G Web Pro Marketing Inc. - SEO Services Toronto

    {{ DiscussionBoard.errors[3983608].message }}
    • Profile picture of the author ronc0011
      Originally Posted by moonheart View Post

      Thanks for the tips. I want to ask one thing that should i externally call the style.css file or should I add css within the html code?
      External stylesheets are much easier to maintain ant to work with.
      {{ DiscussionBoard.errors[3989722].message }}
  • Profile picture of the author scottmann
    i just want to add:
    - embed movie in html
    - embed flash in html

    thankyou
    {{ DiscussionBoard.errors[3984253].message }}
  • Profile picture of the author webtwilight
    HTML is one of the easiest programming languages out there. Great way for any web designer to start with .
    Signature
    {{ DiscussionBoard.errors[3986482].message }}
  • Profile picture of the author EtheelLambert
    Style sheets will accomplish your HTML coding activity so abundant easier. No added tags everywhere. You as well get abundant bigger ascendancy over the way your pages look, and you can change their actualization just by alteration one style sheet file.
    {{ DiscussionBoard.errors[3988363].message }}
  • Profile picture of the author logoonlinepros1
    Yeah this tips is very necessary and most using html code.
    I like this and i save it also.
    Signature
    {{ DiscussionBoard.errors[3988704].message }}
  • Profile picture of the author rauff
    great tips thanks for sharing it
    {{ DiscussionBoard.errors[3989036].message }}
  • Profile picture of the author johnybravo
    your just shared some nice tips, i am not a beginner though but still nice job done sharing this.
    {{ DiscussionBoard.errors[3989936].message }}
  • Profile picture of the author nirjor
    Really good information for html beginner.
    {{ DiscussionBoard.errors[3991469].message }}
  • Profile picture of the author richardjmartinez
    that was a great post.. keep it up
    {{ DiscussionBoard.errors[3994103].message }}
  • Profile picture of the author o2webtech
    Hi, Thank you so much for posting such good points really works.
    Signature

    webbloggers.net : Social media blog | Content Writing Services
    Follow me : Facebook | Twitter

    {{ DiscussionBoard.errors[3994502].message }}
  • Profile picture of the author wilsionjack
    great tips
    {{ DiscussionBoard.errors[3995229].message }}
  • Profile picture of the author Happytrousers
    Thanks for all the work here, very useful.
    {{ DiscussionBoard.errors[4002416].message }}
  • Profile picture of the author JackHomes
    I am really impressed with your tips.
    {{ DiscussionBoard.errors[4002733].message }}
  • Profile picture of the author seomelbourne
    These tips are very helpful for everyone specially for me.
    Because i am new user of HTML. I really impress with your work and i hope you continue it in future.
    {{ DiscussionBoard.errors[4007986].message }}
  • Profile picture of the author Matt G
    Thanks for sharing. Good tips for beginners.
    {{ DiscussionBoard.errors[4011215].message }}
  • Profile picture of the author ApocalypseXL
    Dear God is this thread for real ? This are HTML tips for beginners ? Wow if everyone would roll like this i wouldn't have to worry about competition

    Here's 1 real tip - learn to use HTML 5 , it is the future .
    Signature
    Victory at all costs, victory in spite of all terror, victory however long and hard the road may be; for without victory there is no survival.
    {{ DiscussionBoard.errors[4014179].message }}
  • Profile picture of the author Stephen Lessey
    Thanks for the tips. HTML coding is definitely one of the easiest ways to get started.

    I also wanted to add another, CSS is now an industry standard in the design and layout of your pages. So make sure you keep 1 external style sheet for your pages.

    This way you can be consistent with your design on all your webpages
    {{ DiscussionBoard.errors[4014761].message }}
  • Profile picture of the author harveen0019
    Nice tips. Will be helpful for starters in html.
    {{ DiscussionBoard.errors[4015922].message }}
  • Profile picture of the author projectrobot
    cool tips doing it in action is the best
    Signature

    Forex pays my rent, car and shopping. Simple and Easy Money Making Forex Web App ♥ Find out Here ♥

    {{ DiscussionBoard.errors[4167044].message }}
  • Profile picture of the author samstephan9
    This is tips are really great thanks for sharing.
    {{ DiscussionBoard.errors[4167259].message }}
  • Profile picture of the author Amigo
    It is really a great post. Thanks for sharing such a nice tips. I will always take care of them.

    Thanks
    {{ DiscussionBoard.errors[4167284].message }}
  • Profile picture of the author dashing448
    the most cool tip is Spacer GIF Trick
    {{ DiscussionBoard.errors[4167433].message }}
  • Profile picture of the author jmartinez
    I like the tip to not use inline css and link all external css files from the head of your html document.

    One problem so many people run into is that css rules override other css rules. So, you may be trying to align something to the left of the page, but it doesn't work no matter what you do. In many cases it could be because there is an inline css rule that is overriding your external css rules. It can be a real mess trying to figure it out. Keep a well organized external .css file and save yourself the headaches that can arise.
    {{ DiscussionBoard.errors[4168273].message }}
  • Profile picture of the author saini1987
    Thanks for the nice tips....
    Signature
    {{ DiscussionBoard.errors[4168478].message }}
  • Profile picture of the author yeshou
    thanks it is very useful
    {{ DiscussionBoard.errors[4184808].message }}
  • Profile picture of the author joelgarner
    Originally Posted by mostapha View Post

    Here are 10 HTML tips and tricks for newbies. If you're just starting out with building your Web pages, these techniques should be very useful to you!

    1. Always close your HTML tags
    2. Style HTML using style sheets wherever possible
    3. Use an HTML validator
    4. Use HTML comments wisely
    5. Embedding images in HTML
    6. Use widths and heights with HTML images
    7. Non-breaking spaces in HTML
    8. Use tables for tabular data, CSS for layout
    9. Creating empty table cells
    10. The spacer GIF trick
    thanks for sharing such good tips of HTML to learn....


    Keep sharing
    Thanks..
    {{ DiscussionBoard.errors[4189715].message }}
  • Profile picture of the author bzd63
    Very good .would be helpful for beginners thanks for sharing .
    {{ DiscussionBoard.errors[4190633].message }}
  • Profile picture of the author verneir
    I'm very much a beginner, and I don't understand most of what was listed here whatsoever. At least not at the moment

    I suppose it gives me something more to google and learn about
    {{ DiscussionBoard.errors[4192572].message }}
  • Profile picture of the author Mctavish
    Learnt a lot from above comments

    Thanks everyone
    {{ DiscussionBoard.errors[4197270].message }}
  • Profile picture of the author Logo Design
    unbelievable - a spammer thread completely populated by spammers.
    {{ DiscussionBoard.errors[4204180].message }}

Trending Topics