Saturday, January 8, 2011
Let’s discuss what those 7 things are.
Make your code human readable
Because you are a HTML beginner, you are never going to use any HTML editing software like Dreamweaver, FrontPage, etc. are you? You literally start with a NOTEPAD or similar text editor and start coding but have you ever thought that you need revise your HTML markup sometime?
In the image below can you easily find the parent tag or its order?
The answer to the question is probably no if you are a beginner. Because such type of coding is just easily readable by the browser not the user. You must make it clearly readable by yourself so that you can easily find the section you are looking for in future modification.
Though the HTML tags are enclosed in “<” and “>” our brain cannot easily distinguish it from other character easily in such a huge crowd. Instead you can use CAPITAL LETTERS to rectify the HTML tag out of the web contents.
Look how the tags are distinguishable from the text contents.
Other thing you can do is make a tree order so that you can easily find the parent or child of the tag easily. This can be done by leaving some space from the right. See the example image below for more clarification.
This trick will make you easy to edit and look for the exact tag when necessary.
Using of HTML comments wisely
It is not much necessary to use HTML comments because, HTML comments are for users and browser doesn’t render it in its window. The necessity of HTML comments rises when your HTML markup goes more complex and complex. In such case using of HTML comments is necessary. As we’ve already discussed about human readability of the code in first step.
The HTML comments start with “” everything between the start and end code is not rendered in browser screen but you can easily find the it in it’s source.
Always close the tag
I understand you know this fact, but when the codes get complicated with larger contents and lots of inner divisions and blocks you’ll get confused in the middle of the path. Basically, when you view the HTML page that have unknown incomplete tags, the contents will be visible with no errors. But incase if you have added some CSS styling and tables to your web design layout you’ll probably have lots of error and fault in proper rendering in such unknown incomplete tags. Therefore ending a tag is most important thing.
Even though you are aware about it you miss to close the tag because we cannot always remember which tag was opened first and which was at last. But there is a trick (or say tips) that you can apply to have your HTML tags complete one.
Whenever you begin for a new HTML tag, close it immediately after the opening of tag.
For example, look at the sample coding below. The tag is closed instantly after it’s opening.
Then you can start filling the contents and other sub tags inside it.
Always provide alternate text for the image
This trick though won’t affect your coding, user readability or browser render-ability, it is recommended that you use alternate tags.
The above tag renders a image file named image.jpg from the specified source. But incase if you don’t have the image in specified location or mistakenly deleted the image file it will render nothing (in some browser it will show image icon or red cross icon).
Remember how important the image can be to the web page visitor. To understand your contents, S/he must know what the image was about. You must use alternet text what will show up when browser is unable to locate your image file. This will at least give the imaginative picture of the unknown image.
Proper sequence of Headers
H1 is the first and largest header of your HTML document. If you use header (H1, H2, H3) tags you must use it in sequence. For example,
must be preceeded by
or
or
but they must not be parented under smaller header see the image below.
But this one is not right because, lower header must not parent larger header. Though this won’t show any error it is not considered as good method.
Moreover parenting headers is not recommended even it is acceptable and can be rendered properly.
Use of block and inline HTML elements
You must understand the meaning of block and inline HTML elements. Usually a HTML element can be a block or inline element. The block element is like a box that can contain other contents inside it. The inline elements doesn’t have box wrapped around it and only occupies the space that its contents have. While block element occupies as much space as it is capable of until the size or width is specified.
is literally a block element while , , , , etc are inline elements. inside is not recommended but you can use as many as you can inside .
Seventh? What can be the seventh one? Comment here.
Seventh? What can be the seventh one? Comment here.
Friday, June 18, 2010
My HyperText Markup Language (HTML) skills are rusty for certain, but perhaps that qualifies me for this article. Back in the day when Friends was still on TV and AOL was sending out free coasters and mini-frisbees daily, I was creating websites to load on dial-up modems. As time went on, I had the nerve to think that there are plenty of people still out there with non-broadband (dial-up) connections and continued todesign web sites based on that. Finally, I gave up web design and development when quality of content started to get pushed to the side by quantity of content. Flash sites, lots of images, pop-ups, pop-unders, sliders, etc. Trust your quality content and you don't need this fluff. Trust your content and you can make your website blazingly fast. With a website that is hosted on a free service, faster is definitely better. Why? Because 'free' tends to attract a lot of people and the server has to dish out your page plus thousands of other peoples' pages that aren't optimized. It's like trying to pass a convoy of Kenworths pullin' logs with your Jimmy haulin' hogs. But if you have a small Porsche, that gets a lot easier to do. Here are some tips to trim the fat, in no particular order. Tables are a catch-22. In the beginning, they were used to lay out design as well as put content into table format. As the design layouts got more complex, the tables got bigger and nested deeper, and that always means a slow down on load time. Cascading Style Sheets (CSS) came along and really helped the problem of using tables for layout. Unfortunately, the browser makers couldn't seem to wrap their heads around the idea of standards – and still can't. What looked great in CSS in Firefox looked like a dog's breakfast in IE and possibly didn't even render in Safari. Don't get me started on IE5 on a Mac. I'm still in therapy over that. Please only use tables to layout content that must be in a tabular format – like a price list or hockey stats. That reduces the number of tables, and depth of nesting, which means speedier load times. Learning CSS will make a big difference, if you must have a fancy layout. Yep, I'm Canadian, so it is colour with a 'u' to me. I know HTML is America-centric so the attribute is 'color'. Learn your hexidecimal color codes and use them to to liven up content instead of images. Try adding the color attribute to your HTML elements to spice it up. This works especially well in tables, or the body tag, like such: If you were a browser, would you be faster at loading a simple 7 characters of #FF00FFor a 10×10 pixel image of the colour fuschia a few thousand times? That's a rhetorical question, you in the back row. Put your hand down. If you use a certain JavaScript (JS) or CSS repeatedly throughout your website, think about creating their own file and calling it, instead of putting it on every page. Since a browser tends to cache a file and call that file first before checking with the server, your browser will already have that script or CSS ready to use. That means less HyperTextTransfer Protocol (HTTP) calls which means a faster loading page. How to Call an External JavaScript:
Why did I put those comment tags around the call for the JavaScript? Because not every browser is set to read scripts. Adding the comment tags makes the browsers with scripting disabled just skip over it, instead of giving annoying error messages. How to Call an External Cascading Style Sheet: It's that simple. The attribute href is where you set the location of your style sheet. The rest of the attributes tell the browser what that file is, so it knows what to do with it. Some developers may use the @import method to call a stylesheet. In Internet Explorer, this is like having your tag at the bottom of your file, causing it to load the whole page and THEN render the styles on it. Not good. Many web developers will use the same scripts over and over again. Perhaps there's a clock script and a calendar script and maybe some sort of special effect script that they'll use on every page. Instead of having 3 separate files, with 3 separate HTTP calls, put the scripts in one file and call it once. That cuts your HTTP calls by 66% and it gets cached as well. You speed demon, you! Before you raise your hand again, yes, you can do the same thing with CSS files. If you want to use an image that is 1000×1000 pixels on your web page, but you want it to be only 250×250 pixels, change it in an image editor. Some people will 'shrink' the image using HTML like such:
If that 1000×1000 pixel image is 2 MB in file size, resizing it with HTML doesn't make the file size any smaller! In fact it may take longer to load, because now the browser has to put 10 pounds of poop in a 2 pound bag, so to speak. Not an easy task. Hopefully these tips will help you. Give me a shoutback in the comments if you use them or have some other HTML optimizing ideas to share. Did you like the post? Please do share your thoughts in the comments section!1. Use Tables Sparingly
2. Use HTML to Create Colour
3. Link To Scripts/Style Sheets
–>4. Combine Your Commonly Used Scripts in One File
5. Do Not Use HTML to Change the Size of Your Images
