Home » Uncategorized » Some Useful Tips for Perfect HTML Markup

Some Useful Tips for Perfect HTML Markup

Reading Time: 3 minutes

It is a well known fact that PSD to HTML conversion is one of the most preferred ways of converting a design to a suitable markup. PSD to HTML provides a well structured and error free website. It guarantees the best web portal with all the features incorporated in it. In order to get the best results, it is important to have a thorough knowledge about how to convert PSD to XHTML/CSS. Discussed below in detail are some of the useful tips for the perfect HTML markup.

First of all, before proceeding with the coding, one must know what is HTML. HTML stands for hyper text markup language. It is basically used for writing web documents. A document written in a markup language is interspersed with tags that indicate the meanings of certain passages. HTML also defines a number of element types. An element type assigns some semantic meaning to its content. The element type em gives its content emphasis over the surrounding text. An element consists of a start tag and a n end tag.

You can also omit some end tags in HTML. However, do not get confused between tags and elements. There are certain element types that need not have an end tag. One such element is br. A start tag can contain attributes, comprising an attribute name, an equal sign (=), and an attribute value. To specify the language of an element’s content, you can use the lang attribute. It is a good practice to quote all attribute values. You can minimize some boolean attributes in HTML which means the name and the equal sign are omitted. Some attributes are required for some element types, e.g., the alt attribute in an img element.

If you are at the beginner’s level, you are likely to use phrases like “al tag”. But this is not a correct nomenclature. This is because alt is an attribute and not a tag. Remember that tags are surrounded by <…>. W3C released XHTML1.0 a few months after HTML4.01 became a final recommendation. This was supposed to be the next version of HTML. But this is not entirely correct. XHTML 1.0 is a “reformulation of HTML 4 as an application of XML 1.0”. To put it in simple words, it is XML with a predefined set of element types and attributes (and semantics) that correspond to the elements types and attributes of HTML 4.01. It even comes in the same three flavors as HTML.

With its introduction, XHTML was adopted by many web designers. However, the truth is that the most commonly used browser, Internet Explorer, does not support XHTML in any way, shape or form. Although most of the modern browsers like Opera, Firefox etc do support XHTML but their market share is pretty low. You can very well serve an XHTML document as HTML by adhering to a number of guidelines mentioned in the Appendix C of the XHTML1.0 specification.

HTML is not case sensitive but XHTML is. Therefore, make sure that you put all tags and attributes in lowercase in XHTML. With the help of DOCTYPE declaration, you can specify the element type of the document’s root element (HTML), a public identifier and a system identifier. This declaration tells a validator (a program that checks the syntactic validity of a web page) against which DTD it should test the page for compliance. A complete DOCTYPE declaration, including the system identifier, tells the browser that this is a modern document. If the system identifier is missing, or if there is no DOCTYPE declaration at all, browsers assume that this is an old document and render it in “quirks mode”.

A DTD or document type definition specifies the element types and attributes that we can use in our web page. It also defines the rules of how we can use these elements together. Last but not the least, it is absolutely necessary to validate your markup. Mistakes and errors can confuse readers and detract them from the important information. You can use HTML Tidy to tidy up the sloppy markup.

(Have been liking our posts for a while? Subscribe now! We’ll make sure that you never miss an update. And talk to our Markup experts now if you need professional help with your Web strategy.)

Varun Bhagat is a technology geek and works in PixelCrayons as a Sr. Technology Consultant. He possesses in-depth knowledge of different web development technology and helps our clients to choose the best technology as per their needs.

Are you ready to turn your idea into reality? Contact Us Now