7 most important things HTML beginners must consider

When you start learning coding and web designing in HTML, you basically begin with normal HTML markup. Laying out a page, adding colors, buttons, images etc are just the basic part you never skip to design your page.

But being a beginner you must know that no matter how basic your code is it can still have some uninvited errors. There are certain important things that you must consider to make your coding valid and capable to view in any browser window.

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 “<!--" and ends in “-->” 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 <BODY> 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.

<img src=”image.jpg” />

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.

<img src=”image.jpg” alt=”Image showing a couple kissing each other” />


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, <H1> must be preceeded by <H2> or <H3> or <H4> 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.

<DIV> is literally a block element while <SPAN>, <STRONG>, <EM>, <I>, etc are inline elements. <DIV> inside <SPAN> is not recommended but you can use as many <SPAN> as you can inside <DIV>.


Seventh? What can be the seventh one? Comment here.

COMMENTS

BLOGGER: 9
Loading...
Hosted by HostGator
Name

Adsense Adsense hacks Advertising Affiliate Marketing Announcement Antivirus Application hacks Applications Backlinks Blog Blogger Blogger Features Blogger Help Blogger Roll Blogger Templates Blogger Widgets Blogging Bluetooth hack Bootable Browsers Business Cell phones Contest Cool tricks CSS Device Download Email Marketing Entertainment Facebook FeedBurner FIFA World CUP Files n Folders Flash Free software Fun with Windows Games Gmail hacks Google Google hacks Google Plus Graphic Hacking tools Hosting How to HTML Info Internet Tips ip address iphone hack Ipod hacks Javascript Keyword Research Make Money Blogging Make money online Mobiles Monetize Nokia hacking Page Rank Password Hacks PC Games PC Hacks Photoshop Promote site Reviews SEO Social Bookmarking Social Media Symbian hack Tips n Tricks Traffic Tutorials USB Virus Web 2.0 Web design Widget Windows Tricks WordPress WordPress Themes
false
ltr
item
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips: 7 most important things HTML beginners must consider
7 most important things HTML beginners must consider
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6yjnTqQXQpIKMuPMx6CQLOYYX75TMVTXFrgth7Lx0yazXHBnO4ZYoEE25yAHWwZEOkIoQXibiUO8upG1E5tqVySF9_GaB12Q2K_nHKV2dqxT6DBmwiTHPR-_vSRNmjyiSdiY6Ogd11_lb/s1600/c.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6yjnTqQXQpIKMuPMx6CQLOYYX75TMVTXFrgth7Lx0yazXHBnO4ZYoEE25yAHWwZEOkIoQXibiUO8upG1E5tqVySF9_GaB12Q2K_nHKV2dqxT6DBmwiTHPR-_vSRNmjyiSdiY6Ogd11_lb/s72-c/c.jpg
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips
https://www.hacktutors.info/2010/11/7-most-important-things-html-beginners.html
https://www.hacktutors.info/
https://www.hacktutors.info/
https://www.hacktutors.info/2010/11/7-most-important-things-html-beginners.html
true
7369343002377078183
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy