Web Stack Series Part 5: HTML and Markup

July 17, 2007 | Filed Under Web Site Development, Technology

HTMLHow do web developers create the layouts of web pages? How do they tell the browser to arrange images around the copy in just the right fashion? How do web browsers know that one paragraph of text should be italic, while the other should be bold? The secret sauce behind all this magic is a markup language known as HTML.

HyperText Markup Language, or HTML, is probably the most ubiquitous and well known language in the world of web development. It is the language that programmers use to describe a web page’s content and structure so that web browsers can display it correctly to the end user. Marking up a web page means wrapping all of the content in descriptive tags. These tags describe the content’s purpose and how it relates structurally to the rest of the web page.

HTML is used to create headings, paragraphs, tables, block quotes, and a lot more types of content. It is also used to insert images into a web page. Here are some examples of HTML:

HTML is usually created after the web site mock-up has been created by the graphic designer. After the mock-up is sliced up into the appropriate images, HTML is used to arrange those images around the content of your site. If you have a dynamic web site, the business logic programming will wrap the dynamic content with HTML so that it is displayed correctly in the browser.

Good vs Bad HTML

In the early days of the Web, HTML was used to add style to a web page. It could be used to make things bold and italic, big or small, and even colorful. Once the Web started to mature and gain popularity, a bunch of smart people decided that HTML was being used incorrectly and that standards should be created. Instead of defining the style of a web site, HTML should have been defining the structure. This approach to marking up a web site according to its function rather than its form is called using semantic HTML, or marking up the content to reflect only the author’s intentional meaning. Styling the content is something that should be left up to style sheets, which we will talk about in more detail in the next installment of this series.

Good HTML is the single best ingredient for good SEO. By using semantic HTML to describe the structure of your web site’s content, you make it easier for search engine robots to parse through your site. For example, using the appropriate level of heading to segment content based on importance will help the bots know what information is most important and which information it can ignore.

Traditional HTML did not enforce much discipline on programmers. If the HTML was slightly wrong or incomplete, most web browsers would automatically correct the problem. XHTML is a more recent version of HTML that specifically adheres to the strict standards set forth by XML. This version forces programmers to be disciplined in their syntax. By requiring strict syntax, web pages are more consistent and better prepared to be consumed by applications other than web browsers. For example, if a web site’s content is marked up semantically with XHTML, it can be consumed by feed readers, mobile devices, desktop software, and many other software environments.

There are several different versions of HTML, I recommend that you require your site to be marked up with XHTML 1.0 Strict; your developer should know what this means - if they don’t, find a new developer. the W3C provides specifications for all versions and even makes available a handy validation tool to ensure that your site adheres to the rules of your chosen HTML version. When you are working with a developer, make it a requirement that all pages pass W3C validation.

Browser Wars

Unfortunately, the browser wars that continue to rage on have left many battle scars along the way. As a result, none of the current web browsers render and display HTML in exactly the same way, creating huge headaches for developers. For example, a level 2 heading in Microsoft Internet Explorer may be displayed in 14pt font while the same heading in Mozilla Firefox may be displayed using 12pt font. This is another area where style sheets come into play - they help normalize differences between browsers so that web sites look consistent regardless of the browser in which they are rendered.

Additionally, in an attempt to out do one another, some browsers have included support for proprietary HTML tags. If your web site uses a proprietary tag that is only available in one browser, the site may break or be displayed incorrectly in other browsers. It is best to just stick with plain vanilla HTML as defined by the W3C to ensure maximum cross-browser compatibility.

Educate Yourself!

HTML is a very easy language to learn and understand. I recommend picking up a basic HTML book (for example: Learning Web Design: A Beginner’s Guide to HTML, Graphics, and Beyond) or reading through some online tutorials so that you have a good understanding of how HTML works and what its capabilities are. This will further arm you when discussing your site with designers and programmers. Additionally, a good knowledge of HTML will give you a greater appreciation of the planning and work that goes into creating a good, quality web site.

In the next part of this series, we will be discussing Cascading Style Sheets. Style sheets are the icing on the HTML cake - they add style and glamour to your semantically marked-up web site. Check back soon!

Like This Article?

Subscribe Subscribe to the RSS Feed
Add Your Comments Add Your Comments!

Related articles:
Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • StumbleUpon
  • Digg
  • Reddit
  • del.icio.us
  • Technorati
  • Ma.gnolia
  • Furl
  • Simpy
  • Netscape
  • YahooMyWeb

Tagged:
, , , , , , , , ,

Comments