With the HTML Snippet you can do pretty much anything

But you knew that, right? What do you mean no! In this post I want to explain how the HTML Snippet works and how you can use it in your iWeb site to bring beautifully styled elements along with a modern design and feel that will help to ensure your visitors come back over and over again.

In lay-man’s terms the HTML snippet that is available within iWeb 08 and 09 is an easy way of inserting an element of code within an iWeb page.

When an iWeb user inserts such a snippet of code into their page and then publishes their site the snippet will just appear as any other part of the site and the user will be none the wiser.

In reality iWeb creates a completely different web page for each HTML Snippet you use and then links back to that page when a user visits your site thereby making it look like part of the site already.

Knowing this beforehand can now work in our favour as we can create anything we want (within reason) on a HTML page using a basic HTML editor without destroying our iWeb sites and then just copy/pasting the code into our HTML Snippet window when we are ready.

You will have seen in previous posts how we have included both CSS and HTML on the same page and pasted it all into the Snippet window.

The down-side to the HTML Snippet is, in my opinion, a minor one: it does nothing for your SEO. That is where an app such as Rage’s iWeb SEO Tool helps us. Because the Snippet is effectively a new page (which doesn’t appear amongst our list of pages on the left hand side of iWeb) we have to save the site to a folder on our Macs and then edit the code separately to add tags and the like; the SEO Tool makes this easy.

The world is your oyster when it comes to adding things to the HTML Snippet, providing you know the code. Over the coming weeks I will be posting a few more tutorials that use the Snippet where we will use the both HTML and CSS to style it all. And now we have CSS3 we can really start to go mad.

Many of the things we can do with iWeb already, for example text shadows, can be done with CSS3. so rather than iWeb converting all of our fonts into images they will stay as text and therefore load faster.

You may have already seen my tutorial explaining how to add CSS3 only buttons with lovely gradients, no images at all, so faster loading times and more compliant web-sites.

Of course there is always a thorn in the side of modern web design; Internet Explorer doesn’t yet fully support CSS3, but it’s getting there. I just wish it would hurry up!

Have you started using CSS3 elements already, or are you waiting for Apple to introduce the next version of iWeb before you go that far? Leave us a comment and let us know your thoughts.

You may also like


  1. […] the original: With the HTML Snippet you can do pretty much anything | All About iWeb Related Posts:Q&A: Is there a snippet of html that can be added to center a … Question by […]

  2. This is great for faster page loading… but the more CSS3 we implement into snippets… then the more we move away from the true WYSIWIG format iWeb is based on. I’m not complaining, I have done plenty of post-production editing to my pages!

    What you have said about each snippet essentially being a new page is news to me… but could be good news… if I add a title tag to each of these snippet html pages, does that help with search engines as much as any title tag on a normal page? Will the search engine return results pointing to the snippet page, to the welcome page, or does that depend on priority values assigned in an xml sitemap? Your feedback on understanding this would be really appreciated, thanks!

  3. … I’m always waiting for Apple to introduce their next version of everything… I’m really wanting to do more but hoping to have to learn less so anxious for an iWeb update but I’m starting on the road to learn code because I know as great as the next iWeb is, unless it acknowledges the rise in small business interest for it’s use the functionality will remain consumer focused and therefore I’ll need to push the limits to achieve what I want.

  4. Hello

    I have been using iweb for the last year, it really a great program, I have a question can I insert a flip pdf file in the html code. I am trying to place a catalog for a client but she wants it to flip thru…. how can i get this to work?

  5. Hi!
    I’m having some problems with putting in text on my page and to have it look the same on both safari and ie. I use arial so that should not be a problem what i have read.
    My question is if i can put it in a html snippet and how would that effect the seo? What i understand in this text above it sais the snippet is not seo good but is that allso if its just plain text? Maybe there is a nother way?
    Thanks for a great site!

Leave a reply

Your email address will not be published. Required fields are marked *

More in Widgets