This will be the final article in our series on HTML5. This go around we’ll have a brief look at which new HTML5 technologies major browsers are officially supporting and go over some techniques you can use to take advantage of the new elements in your coding today. Finally, we’ll discuss how you should start preparing to support HTML5 in all the sites you build from here forward.October 26th, 2009 Posted in HTML, Web Standards
In the last article, we looked at a number of new elements introduced in HTML5 and how to implement them properly. In this article, we’ll again be discussing a set of new elements but this time we’ll be examining only those HTML5 elements that represent a significant semantic change to the way you structure your sites. This article will cover how to use each of these new elements in a way that will bring much needed relief to the div-itus that plagues the structure of so many sites today.October 23rd, 2009 Posted in HTML, Web Standards
A couple of days ago we posted an introduction to HTML5 and briefly covered some of the content we’ll be outlining in this series. Today’s post, which is the second in the series of four, will take a look at how to use six of the new elements in HTML5: canvas, article, audio, video, meter, and mark.
Keep in mind that HTML5 is not exactly ready for widespread use – so don’t go changing anything on your site quite yet. Be assured that HTML5 is in fact coming soon, therefore these concepts may prove useful in the near future.October 21st, 2009 Posted in HTML, Web Standards
The next iteration of HTML has been met with excitement by some, loathing by others and confusion/fear by everyone else. Love it or hate it, HTML 5 will soon define how you build websites. This is the first article in a four part series that will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition. Over the next week we’ll be focusing on three major areas:
1. New Elements
2. Semantic Changes
3. Getting it Working Today
This article will briefly introduce each of these topics to prepare you for the in-depth articles ahead.October 19th, 2009 Posted in HTML, Web Standards
Almost all websites contain some sort of copyright notice in their footer (e.g. Copyright © 2008 Apple Inc. All rights reserved.). But what’s the best way to do this? We’re going to take you through the requirements for your copyright notice, and a nifty JS (or PHP) trick for ensuring that your copyright year is always up to date.
The humble copyright notice is always useful to show in the footer, as a way of stating your claim over a site. Interestingly, however, it is not required for you to have copyright over the graphics, content and artwork of your site. This comes into place as soon as you’ve created the content and placed it in the public domain. Placing a copyright notice is still advisable to deter potential plagiarists and stake your claim. The generally accepted format is:
Copyright © 2008 Design Shack
There are a couple of points to make:
If you have specific requirements for how people can use certain content of your site, using a Creative Commons License would be advised. This allows you to select how content can be used in a more official and controlled manner.
When creating a website, it can be incredibly tempting to simply drop in the basic requirements, and not think too heavily about future proofing your site. One of the most telling signs that a site isn’t regularly updated is an out of date copyright year. This can be very easily made automatic, through the use of a simple piece of PHP or JS code:
Stick with one of these methods, and you’ll never be kicking yourself in February again for not updating the copyright year!July 8th, 2008 Posted in Articles, HTML
It is remarkably simple to put this design feature in place on your site, and it can improve functionality greatly for those using a Mac. Whether Firefox and Internet Explorer will integrate this feature into their browsers in the future is unknown – although it is fairly unlikely.
Using the following code for a form will cause the enhanced search field to display in Safari:
type="search" tells safari to use the field as a search box, and the
autosave="mysite-autosave" results="10" sets additional features about the recent search information.
The negative aspect of adding this feature is that your code won’t validate. It’s up to you to decide whether it is a acceptable down-side of improving the browsing experience for those using Safari. We think it is – and you’ll see the enhanced search field on Design Shack!September 9th, 2007 Posted in Articles, CSS, HTML
Today we’re going to take a look at a selection of beautiful tables styled using CSS. These are sourced from a variety of different sites. If you’re interested in learning how to do this yourself, be sure to take a look at a few of our CSS tutorials!August 30th, 2007 Posted in Articles, CSS, HTML, Layouts
Semantics is a word which strikes fear into many a designer’s heart, but it need not be a difficult or complicated topic. It concerns meaningful expression, avoiding presentational markup and using appropriate and meaningful tags where possible.
Essentially, designing and writing HTML code in a semantic way is as simple as keeping your HTML concerned with the content of the page and not the layout. Some of the simple steps below will help you to ensure that you stay semantically pleasing to search engines, spiders and visitors:
Ensure that your page title tag is descriptive and meaningful. Ensure that it changes for each page of your site to reflect the content on that page.
It’s possible to define your page’s headings with div and span tags, but that doesn’t convey any meaning that it is a heading. Using h1 to h6 tags to differentiate and style the headings on your page is much better.
By default, tables and forms are not very semantic and can be very general. They also lack accessibility for those using non-standard browsers. For tables, ensure that you use the thead tag to explain the columns of your table. For forms, adhere to using the label tag to describe what each input, checkbox etc is there for.
It seems like it gets said over and over again, but use alt attributes for all your images to ensure that they are described within the page content – both for the benefit of search engines and disabled users.
Using semantic code won’t make your website look any different and it won’t directly benefit your readers in any way. One direct effect you may see is that search engines spider your website in a more correct and effective way.
Also, semantic coding is paving the way for the future. New devices, software and applications will be around in the next 5, 10, 100 years that still use the content on the web to power them. Semantics set the standard which future systems will adhere to and interpret, so future proof yourself!July 16th, 2007 Posted in Accessibility, Articles, CSS, HTML, Web Standards