A brief introduction to semantic HTML

This entry was posted on October 23, 2007

Wiktionary defines the word “semantics” as:

  1. (linguistics)The science of the meaning of words. Semantics is part of linguistics.
  2. The study of the relationship between words and their meanings.
  3. The individual meanings of words, as opposed to the overall meaning of a passage.

HTML is a language (the letters stand for HyperText Markup Language), and semantic HTML is markup that has proper meaning. In simple terms, this means using the right tag for the right job.

The easiest way to get to grips with writing semantic HTML is to think about what the meaning of your markup is. HTML is about meaning and structure, it’s not about presentation - that’s what your CSS is for!

So no more using the <b> tag to make your text bold. Bold text means nothing. Why is your text bold? Is it because it needs a strong emphasis on it? That’s what the <strong> tag is for. The <strong> tag will make your text appear bold by default, though you can back it up with CSS by placing strong {font-weight:bold;} in your stylesheet.

No more using the <i> tag either! Italic text has no meaning. We use italics when we want to place an emphasis on something, which is why we have the <em> tag.

Those two changes are the easiest to make when starting out with semantics. Semantic HTML is no different to normal HTML, only in that it focuses a lot more on the meaning of each tag, and heading towards completely separating structure from presentation wherever possible.

So no more <p class=”header”> for your titles. There’s six different heading levels you can use from: <h1> all the way down to <h6> - surely that’s enough choices for you?

One large change that you might need to make is your use of tables. Despite thousands of people harping on about why tables are bad for your layouts (including myself), let’s stop and have a think about it for a second. Why do we have tables? What should tables do? What’s their purpose? What do they mean?

Tables are used to portray tabular data. Numbers, statistics, correlations, employees’ choices for the company’s Christmas do, the list goes on. Tables are not used for portraying your header, sidebar, main content, and footer! You wouldn’t display your layout like that on paper, and you definitely couldn’t show your layout in a graph, so please, don’t use tables for your layouts.

The discussion of semantics could (and has) gone on for days. I just wanted to outline a brief introduction for those of you who weren’t entirely sure what semantic HTML is. It doesn’t have to be an overly complicated thing if you don’t want it to be. All it requires is a little bit of thought on your part about what you really want your markup to mean. Good luck!

8 lovely people have commented

Make a website for free #3

This entry was posted on October 16, 2007

In the second part to this series I covered online generators. Lil suggested I cover Content Management Systems (CMS) in this next part, so here goes!

FanUpdate

This little gem of a blogging engine has been written from scratch and recently revamped by a lovely young lady by the name of Jenny. Using PHP and a mySQL database, Jenny gives you the ability to add posts to different categories, offer your visitors the ability to comment on your blog entries, an RSS feed (for comments and for entries), an optional comment captcha to help prevent spam, and a basic WYSIWYG (What You See Is What You Get) editor.

Wordpress

Wordpress is what I like to call the “Grand-Daddy” of content management systems. Not only does it let you blog, it also lets you add static pages to your site which is where the real “content management” comes in. FanUpdate is more of a “blogging engine” as it controls only your blog entries. Wordpress goes the full hog and gives you everything you could need! It’s free and comes with a massive long list of plugins you can use to give your site even more functionality. It really is the “bees knees”.

I used FanUpdate for over six months before making the switch to Wordpress. FanUpdate is a wonderful script and I would recommend it to everyone who likes to have total control over their static pages and layout, as it is so easy to integrate to your current design.

I switched to Wordpress because I liked how easy it made things to update my site and add new pages. A few code snippets in the theme, a few code snippets there and I had complete lists and links to my sub-pages.

Making your existing layout fit around Wordpress, however, is easier said than done! Wordpress “themes” are very dynamic in that once your layout is made up of various “template tags” which add the content dynamically from the mySQL database everything is stored in. Fascinating stuff really, if you’re so inclined as to be interested in the back-end workings of your site.

There are of course hundreds and hundreds of free Content Management Systems out there - which one do you use?

18 lovely people have commented

Make a website for free #2

This entry was posted on October 11, 2007

In the first part of this series I introduced you to three pieces of free software you can use to start designing and building your own websites. In this part I’ll cover some of the very useful online tools you can use. Yes, it’s entirely possible to use websites to build websites. Nifty, eh?

Stripe Generator

This extremely addictive website allows you to create striped patterns for use in your designs. Recent upgrades to the site now give you eight different angles to choose from. You can have gradient backgrounds for your stripes, as well as use up to five different colours in one pattern. If you’d like some inspiration, you can always look at one of the 184 stripes I’ve created.

Tabs Generator

The makers of stripegenerator.com bring you their tab maker - an invaluable tool when it comes to making rounded corner tabs for your navigation. This tool allows you to make tabs in all directions (up, down, left, and right), any size up to 100pixels high by 240pixels wide. You can adjust the radius of the corners as well as put a border on the tabs.

Layout Gala 

This site provides blank CSS templates for you to use in your work. There’s a total of 40 templates, but here’s where the good part is: every single template uses the same HTML. The only differences are in the CSS. Layout Gala really shows the power of CSS when it comes to making your layout.

Picnik

With Picnik you can edit your photos online. Even though free registration is required to get the full benefits of the service, I managed to do what I needed to do using the demo version. Don’t get me wrong, this is no replacement for GIMP, but it allows you to crop and resize your photos, as well as add shapes, text, and frames. Add that to the ability to apply filters and save your photos once you’re all done, and you’ve got yourself one very useful tool.

Lorem Ipsum Generator

When you need dummy / sample text for your projects, “Lorem Ipsum” really is the way to go.  There are several generators out there you can use to get dummy text, but this is one of my favourites. You can choose to add punctuation to the text, as well as have the text translated into different languages should you so wish.

Colour Lovers

This site is what I like to call “the bee’s knees” of colour. It’s a large community of colour lovers (hence the name) who share colours and palettes. There’s literally a colour palette for every need. If you need inspiration for which colours to use in your designs, this is the place to come.

So there we have it. Using the above tools you can find a colour scheme for your design, make your navigation tabs, add some stripes, edit any layout pictures you’re using, find a structure for your layout, and add sample text to it, though if you’re in a rush and need a hot Web 2.0-style layout, I’d recommend web20generator.com/ , a fun site which generates a stereotypical web 2.0 site for you.

8 lovely people have commented

« Previous · Next »