HTML markup of content

When building content for a website the underlying code is as important as the content it’s self. For example if the content has a high value but the code underneath is sloppy and not segmented properly the content can easily get lost in “ugliness” that visitors to your site see and  therefore they will more than likely not even read your content. In order prevent this from occurring a few simple rules should be taken into account.

 First, you must separate the content from the layout. What this really means is that through the power of Cascading Style Sheets (CSS) we can take almost any well coded content and make it look how ever we want. So when producing content don’t think about the end result of how the page will look worry more about the way the content flows.

So what does this mean when coding html content? The practical application of this is to break content down to its simplest form. Let’s say I have two paragraphs of text and header above those two paragraphs but in my design I want to put an image to the right or left of the text and have the text wrap around the image. The wrong way to construct the page would be to think about the image first and possibly align the image right to encapsulate the image.  This would look something like this:

<div id=myDiv”>
<h1>Title</h1>
<img src=”myimage.jpg” alt=”my cool image” align=”right” />
<p>insert latin text</p>
<p>insert latin text</p>
</div>

This however, breaks our rules because we’ve now added a layout feature to our content by forcing the image to always be to the right of our image we’ve made a design decision that will affect this content if ever we wanted to change it or redistribute it. Not to mention that this code also breaks a HTML validation rule, as the align attribute is no longer a valid attribute in XHTML 1.0.  The proper way to markup this content would be to use CSS to position the image like so:

myDiv img { float:right; padding: 5px;}

<div id=myDiv”>
<h1>Title</h1>
<img src=”myimage.jpg” alt=”my cool image” />
<p>insert latin text</p>
<p>insert latin text</p>
</div>

Notice that I didn’t change the markup that much but now my content is all content and with CSS I can not only float my image right I can apply padding or even a border if I wanted to. By making CSS do the heavy lifting you can achieve much more flexibility with how you present content on your Web site. This translates into the ability to make pages easily viewable on mobile devises and provides better accessibility of the content.

Second, using the right tag in the right place makes a big difference. The following is a common list of tags that can be used to markup your content. These include:

  • <p> - The standard for separating paragraphs of content.
  • <br /> - This creates a single line break and is useful for breaking up a line of text, it should not be used how ever to break up two paragraphs as the <p> is a much more effective in that case.
  • <strong> - This set of tags replaces the <b> tags in XHTML but does and stands  for strong, to make the content in between stand out.
  • <em> - as the replacement for <i> this set of tags is used to give emphasis  to content.
  • <h1> - <h6> - these tags represent headings. With h1 being the largest and most important down to <h6>.  The use these can affect page ranking in search engines, but are also important in breaking up content into sections.
  • <ul> and <ol> - These tags are used to make list of things, as I’m doing right now. The ul which stands for unordered list uses bullets to demark the start of each item, whereas the ol stands for ordered list and can be used with numbers, letters, roman numerals, and any combination of the three.
  • <li> - Stands for list item and is used in conjunction with a ul or ol to define the members of the list.

 

While this is not an exhaustive list these are the tags most often used and in all reality probably the only ones you will use in day-to-day content authoring. Notice that the <font> tag is missing; the reason for this is that by using the font tag we are breaking our rule of separating content from design.  This is another instance where using CSS to define how the content is rendered is will provide flexibility but also consistency across the page and the entire site.

One note: in the tags you see above if the start tag looks like this “<tagName>” there will always be a second tag to end the first that will look like this, “</tagName>”, best practices are to always check to make sure all tags  are closed.  For tags that end in “/>” there is no second tag as this tag closes itself. Tags that close themselves include, br, img, link and meta.

Following these simple guidelines will enable you as a content creator to develop content that is not only effective but flexible, well coded and redistributable to any platform.