Add HTML Content

Before you start actually adding in the HTML to your pages it’s important to take a minute to look at your design and  plan it out a bit.

Previously we identified the major sections of the page. Divs were used for these.

click to view larger

Step 1: Identify Sub Sections

Now we need to identify the sub sections of the page. They are in green below.

click to view larger

Step 2: Create divs for sub sections

These sub sections can be given classes or ids depending on whether they are only used once on the page (those can be ids) or more than once on the page (those are classes). Because the sub sections usually have content that consists of multiple HTML elements you normally use divs for the sub sections as well. Here is the HTML for this page. The sub sections have been converted to divs with classes or ids with the names in green in the image above.

Step 3: Identify elements for the remainder of the content

Now it’s time to look at the content in the sub sections. This time we will be using mostly the standard HTML tags. This is where that fancy word semantics comes into play. Making your content semantically correct just means that you apply the right HTML tag to the content. If its a title give it an h tag, if it’s a list then it gets a list tag etc.

Before you get down to business it’s a good idea to look across the page to help you recognize which titles are h2, h3 so you can plan out your titles. Here’s an image with all of the content on a page identified. You don’t have to actually do this in Photoshop but you want to at least do it on a piece of scratch paper or somewhere so you have a rough idea of how the content breaks down.

Here’s what the HTML will look like:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<title>PSD 2 HTML: Foundational HTML</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<div id=”header”>
<div id=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Me</a></li>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>Archive</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
</div><!– end header –>
<div id=”wrapper”>
<div id=”side_nav”>
<div id=”categories”>
<h2>Categories</h2>
<ul>
<li>CSS Design</li>
<li>XHTML Standards</li>
<li>Design Patterns</li>
<li>Tips and Tricks</li>
<li>Information Design</li>
<li>Typography</li>
<li>Page Layout</li>
</ul>
</div><!– end categories –>
<div id=”favorites”>
<h2>Favorite Links</h2>
<ul>
<li>viverra nulla</li>
<li>tellus eget </li>
<li>Lorem ipsum</li>
<li>Nullam quis ante</li>
<li>Etiam sit amet</li>
<li>viverra nulla</li>
<li>tellus eget</li>
<li>Lorem ipsum</li>
<li>Nullam quis ante</li>
<li>viverra nulla</li>
<li>tellus eget</li>
</ul>
</div><!– end favorite_links –>
</div><!– end side_nav –>
<div id=”content”>
<div class=”article”>
<h3>Lorem ipsum dolor</h3>
<p>9/5/08 at 9:32 am posted by Web Designer <a href=”#” >3 comments</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. <a href=”#” >More</a></p>
</div><!– end article –>
<div class=”article”>
<h3>Phasellus viverra nulla ut metus</h3>
<p>9/1/08 at 8:44 am posted by Web Designer 0 comments</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. <a href=”#” >More</a></p>
</div><!– end article –>
</div><!– end content –>
<div id=”sidebar”>
<div id=”recent_portfolio”>
<h2>Recent Portfolio Additions <img src=”#” /><img src=”#” /><img src=”#” /><img src=”#” /></h2>
</div>
<div id=”aboutme”>
<img src=”#” />
<h2>About Me</h2>
<p>Aenean leo ligula, porttitor eu, consequat vitae, elefenpac. <a href=”#”>More</a></p>
</div>
<div id=”recent_posts”>
<h2>Recent Posts</h2>
<ul>
<li><a href=”#”>Lorem ipsum dolor sit amet</a>
<p>August 25, 2010</p>
</li>
<li><a href=”#”>In enim justo, rhoncus ut</a>
<p>August 22, 2010</p>
</li>
<li><a href=”#”>Phasellus viverra nulla ut metus</a>
<p>August 18, 2010</p>
</li>
</ul>
</div><!– end recent_posts –>
</div><!– end sidebar –>
</div><!– end wrapper –>
<div id=”footer”>
<p>&copy; 2006-2008</p>
</div><!– end footer –>
</body>
</html>

Here’s a quick reminder of what all the basic elements are used for (see this page for more information http://webdesign.blogs.peopleio.net/basics/html/ ).

All elements have link to their page on the sitepoint HTML reference (link shown as SP ref )

BLOCK ELEMENTS

<p> Use for paragraphs of text. Basically all text that is not a title, list, quote, table or form.

<h1> … </h1> These tags (h1 through h6) are used for titles. Generally h1 is used for the main title of the page (often the site title in the header) and then you use the other ones in descending order of importance.

<ol> Ordered list. This is for lists that are ordered in some way. By default it shows numbers and also it can be styled to order the list with letters (a,b,c; A,B,C) and roman numerals (i,ii, iii; I, II, III) and more.
SP ref, style with list-style-type in CSS.

<ul> Unordered list. This is for lists where the order isn’t so important. By default it shows solid bullets called circles and also it can by styled to mark each item with discs (empty circle) and squares.
SP ref., style with list-style-type in CSS.

<li> List item. This is used inside of BOTH ordered and unordered list to mark a list item.
SP ref

<blockquote> Ideally this is used for a quote where you cite a few lines of text so you can’t just put the quote in the middle of a paragraph. This is the one element that many people misuse (something other than a quote) most consistently. In practice it is used both for quotes and when the author wants to differentiate a section of text from the other paragraphs on the page. REMEMBER that blockquote needs a block element inside of it, usually a p element.
SP ref

<table>, <tr>, <th>, <td> These are used for tables. The <table> tags go around the whole table, the <tr> tags go around each row, the <td> tags are for data in an individual cell. If you want to differntiate header rows or columns use the <th> tags instead of <td> for content in those areas.
SP ref

<form> (there are a lot of other form elements). These elements are used for form data. There is a lot to cover here and it is done on another page.

INLINE ELEMENTS

<a> This is used for hyperlinks to other web pages

<img> This is used to add images

<br> This is used to add a line break. It should be used for text inside of a paragraph where you want to move to the next line but don&rsquo;t want to start a new paragraph.

<strong>This is used to highlight a letter word or words that you want to appear stronger than the rest. By default the browser will show the text as bold (use strong instead of <b> which has been deprecated and you shouldn’t use).

<em> This is used to highlight a letter word or words that you want to have more emphasis than the rest. By default the browser will show the text as italic (use <em> instead of <i> which has been deprecated and you shouldn’t use).

<hr> This adds a horizontal rule to the page, basically a line. Use it sparingly as there aren’t many options to style this text. Instead you can often use the bottom or top border of a block element to add a line and have more control over color, size and style.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>