Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

September 26 2011


You’re Doing it Wrong: Common HTML Tag Misuses

View the source code of a hand full of websites featured in CSS galleries today and you’ll often see the same errors appear time and time again. These mistakes are usually habits we picked up during our early days of coding that have stuck around due to lack of clarification. This post rounds up a collection of common HTML tag and element misuses and describes the best practice to correctly and semantically use them in your markup.

Misuse of the <br> tag

The <br> HTML tag

How not to use the <br> tag

A common misuse of the <br> tag is to use it to create spaces or gaps in your content. WYSIWYG editors are notorious for injecting multiple line breaks or empty paragraph tags.

How to properly use the <br> tag

The <br> is used to insert a line break in a sentence. Examples might be to correctly lay out an address. Use paragraph elements to split up your content and use CSS margins to alter the spacing between them.

Misuse of the <div> tag

The <div> HTML tag

How not to use the <div> tag

When we first get to grips with HTML and coding in CSS we often get carried away with our divs and surround almost every page item with its own div tags.

How to properly use the <div> tag

The <div> tag is perfectly acceptable to use to define the main page structure, but always try to use more suitable tags for your page elements. Paragraph tags, ordered/unordered lists and definition lists can be more semantic choices.

Misuse of the <small> tag

The <small> HTML tag

How not to use the <small> tag

The <small> tag is often wrongly used as its name suggests, to create text that’s small in size.

How to properly use the <small> tag

CSS should always be used for presentational styling, so use the font-size CSS property to control your text sizes. The <small> HTML tag is reserved for defining “smallprint” or legal text.

Misuse of the <hr> tag

The <hr> HTML tag

How not to use the <hr> tag

The use of the <hr> is pretty rare these days, but when you do see it you can guarantee it’s being misused as a presentational line between sections of a page.

How to properly use the <hr> tag

These days the CSS border property is the correct solution in most situations, however the <hr> tags still has its use in specific situations when defining layouts containing copy such as book chapters or poetry stanzas.

Misuse of the <title> tag

The <title> HTML tag

How not to use the <title> tag

In most cases the HTML <title> tag (not the attribute) is misused in two extremes. It either contains no valuable information, or it’s packed full of endless keywords for “SEO”.

How to properly use the <title> tag

The <title> should accurately but concisely describe the contents of the page. It’s important to include keywords that relate to the content as it is recognised by search engines, but it shouldn’t be abused.

Misuse of the <img> tag

The <img> HTML tag

How not to use the <img> tag

The misuse of the <img> is actually more to do with the misuse of its alt attribute. Often the text within the alt attribute is completely irrelevant (if it exists at all!).

How to properly use the <img> tag

<img> tag alt attributes should contain an accurate description of the image. If the image is being used as a link give an insight to where the link will go. If the image has no importance an empty alt attribute is acceptable.

Misuse of the <label> tag

The <label> HTML tag

How not to use the <label> tag

<label> is another tag that is often left out altogether rather than being misused. When it does appear it rarely includes the for attribute.

How to properly use the <label> tag

Use the <label> tag to relate a field to its descriptive label. For extra usability points add the for attribute to allow the user to click the label to activate the relevant input field.

Misuse of the <address> tag

The <address> HTML tag

How not to use the <address> tag

The name of the <address> wrongly suggests that it should be used to surround a postal address on a contact page.

How to properly use the <address> tag

The correct use of the <address> tag is to define the author or owner of the document. Therefore it’s usually wrapped around their name along with their contact email address or telephone number.

March 21 2011


How to Build a Basic Portfolio WordPress Theme

If you’ve been following parts one and two of this portfolio website tutorial series you will already know how to design the concept in Photoshop and build a working demo in HTML/CSS. Now let’s take the design and convert it into a basic WordPress theme so you can easily manage and update your website through the popular WordPress application.

View the WordPress portfolio theme

The theme we’re going to create is going to be made specifically for use as a portfolio website, so many of the usual features of WordPress themes will be omitted in this guide. Our website concept isn’t a blog, so this tutorial is aimed more at using WordPress as a simple CMS. With that said, we’ll still use the ‘post’ template to showcase our portfolio items, so we’re basically manipulating the core features of WordPress to suit our needs.

View the final portfolio theme demo

WordPress template files

Because we’re using WordPress as a basic CMS, we won’t be making use of some default template files such as archive.php or comments.php. However we’ll be introducing some additional template files as custom pages.

Style.css template file

Before working on any of the actual .php template files we first need to add the entire CSS styling the style.css WordPress stylesheet in our theme folder. We then need to customise the details at the top of the file so WordPress will recognise the theme in the Appearances section of the admin dashboard.

Header.php template file

The first template to work on is header.php. Paste in the upper portion of the HTML concept, right up to where the main content div begins. We then need to go through the code and swap out specific sections with WordPress template tags, which will inject dynamic content into the theme. <?php bloginfo('stylesheet_url'); ?> will automatically link up the style.css CSS stylesheet, while <?php bloginfo('template_url'); ?> can be used to place a link to the template directory in order to link up other files.
At the bottom of the <head>, the template tag <?php wp_head(); ?> is used to allow WordPress to insert other code from plugins etc.
In the navigation menu, the series of list items are replaced with the template tag <?php wp_list_pages('title_li='); ?>, which will automatically inject a linked list item for every page published in WordPress.
Our design uses a different style of header for the homepage and the inner pages. We can replicate this in the WordPress theme using a conditional tag. is_front_page() checks if the page is being used as the homepage, if it is it uses the first portion of the code. If not, the header is given the class of ‘page’ and the <h1> is filled with the tag <?php wp_title(''); ?> to render out the title of the post or page.

Home.php template file

Usually the index.php file is used as the homepage on a WordPress blog, but in our case we’re going to be using a static page, which is where the custom page file home.php comes in. At the top of the home.php file is a snippet of code which identifies the custom page. The rest of the template file is filled with lots of PHP…
<?php get_header(); ?> and <?php get_footer(); ?> at the top and bottom of the file are used to insert the header.php and footer.php files in order to render out a complete HTML page.
The WordPress loop then checks for content, which is injected into the page using the <?php the_content(''); ?> template tag.
Underneath our main content we then have another loop, this time using query posts. The <?php query_posts('cat=11&showposts=4'); ?> code checks for posts from category 11 (the portfolio category) and displays the latest 4 items. This replicates the ‘latest work’ section of the design.
For each of these portfolio items we then use the code <?php $image = get_post_meta($post->ID, 'portfolio_image', true); ?> to fetch the ‘portfolio_image’ custom field and set it up as a variable. This will then be used to insert the portfolio thumbnail into the design.

Footer.php template file

The remaining HTML from the static page is then pasted into the footer.php file. This particular design doesn’t require many more template tags, just <?php wp_footer(); ?> to allow WordPress to insert code destined for the footer (an Analytics plugin for example). The other snippet of code is just a handy page load speed indicator which can help visualise the difference when using caching plugins.

Page.php template file

The page.php file is the template file used for generic pages added to the site. The contents are similar to the home.php file, with the exception of the additional loop that checks for portfolio items. All we have is the links to the header.php and footer.php files, the WordPress loop and the tag to insert the page content.
The About page of our design doesn’t contain anything unusual, so this page would be generated using the page.php file. Others, like home, portfolio and contact all use custom page templates.

Portfolio.php template file

The portfolio.php file is another custom page. This file is very similar to home.php as it uses the query posts script to look for blog posts in the portfolio category. The main difference is the parameters of this query posts script doesn’t limit the number to 4 and therefore displays every item found. Each post contains links to that post’s individual page using the <?php the_permalink(); ?> template tag. This is simply inserted into the href attribute of the anchors.

Contact.php template file

Another custom page template used in this build is contact.php. This page contains the contact form code and links to the social profiles within the two divs that are unique to this page. The social links alone could have been pasted into the HTML portion of the WordPress page editor, but the code used for the contact form would be stripped out so it’s best to hard code it directly into the theme file.

Single.php template file

The single.php file is identical to the basic page.php template. It only needs to include links to the header.php and footer.php files, the WordPress loop and the content tag. The rest will be generated using the online WordPress editor. Usually a link to the comments.php template file would be included in single.php, but in this build we’re not making use of comments as the theme is meant to be used as a simple CMS.

Extending the theme to work as a blog

Our theme is only built as a simple CMS that accommodates pages and the odd blog post in the form of portfolio pieces. If we wanted to extend the site to add a blog, we could develop the archive.php and comments.php files. We’ve separated the portfolio posts into their own category, so a list of normal blog posts could be generated by simply excluding this category from the query posts script in archive.php.

Adjusting the WordPress settings

In order to align our WordPress install with our theme we need to tweak the settings. First we need to create our four pages of home, about, portfolio and contact and type in the basic content. Before publishing each page, we then need to select the custom page templates for the home, portfolio and contact pages in order for them to display their unique functionality and content.

WordPress by default uses the index.php file to display a list of recent posts, so we need to head over to the Reading tab of the settings and change the front page to display the home.php template.

Finally, we need to add our series of portfolio pieces as posts. Create a new category named Portfolio, then begin creating posts. Add a title, then fill out the content with text and images using the WordPress uploader. Don’t forget to upload the small thumbnail image and copy the URL. This URL will then be pasted into the custom field area alongside ‘portfolio_image’. The script in the code will then take this custom field and use the location of the image to display the thumbnail of each portfolio post. Everything in the main content area will then be shown when the user clicks the ‘see more’ link and lands on the page generated by single.php.

The final WordPress theme demo

View the WordPress portfolio theme

Our basic WordPress theme is now complete. The portfolio website is powered and updated using the WordPress engine and can be enhanced with plugins to optimise for search engines. Now the core site has been built, all updates and additions can all be made via the online dashboard, no more code editing.

View the final portfolio theme demo

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...