60 HTML tips, tutorials, techniques & resources
Better Pull Quotes: Don’t Repeat Markup
"Pull quotes are wonderful. They can really draw a readers attention and they are a great opportunity for cool typographic work. On a blog though, pull quotes are particularly difficult to “pull off” (get it?!)."
Build a Sleek Portfolio Site from Scratch
"There's nothing like building an entire site to show you a good overview of how a CSS layout should work. In this tutorial we're going to take a PSD file and build it with some nice clean HTML and CSS."
7 Crucial Tips for Designing and Maintaining a Large Site
"Designing, redesigning, maintaining and working with developer team has given me some useful insights and tips for making life easier. And since today we've launched my latest redesign of the site, it seems like a good time to write up my top 7 tips!"
Accessible Data Visualization with Web Standards
"I’m going to cover three basic techniques for incorporating some simple data visualization into standards-based navigation patterns. All of them start with the building block of HTML navigation: an unordered list of links."
CSS SiteMap
"Recently I needed to crank out a visual sitemap (or is it a directory tree?) from a rather large site and had a devil of a time finding decent tools to help. Everything I found in my search was either too costly, too complicated, or too unattractive for my purposes. Why not roll my own sitemap diagram in HTML and CSS?"
Tutorials Round-Up: Ajax, CSS, PHP and More
"You don’t have to re-invent the wheel all the time - you can use existing solutions, modify and improve them and publish them as well - just the way other people did it for you. In this post we’ve covered over 200 Ajax, CSS, Flash, JavaScript, PHP, MySQL, RSS, XML as well as ASP, C++, Perl, Python and Java tutorials."
Push my button
"If there’s one element I think doesn’t get enough respect, it’s gotta be button. It’s played second fiddle to input in tutorials and form examples for as long as I can remember. The few times it actually did get some attention, the lowly button was used and abused by the DHTML crowd—forced to accept obtrusive inline event handlers and other such nefarious crimes against semantic markup."
Markup as a Craft
"The quality of your markup will affect the quality of related code, and even the cost of implementing or maintaining that code. Your markup might be good now, but following the guidelines in this article will help bring it to the next level."
Coding for Content
"Strongly inspired by the work of Edward Tufte, I recently reworked the design of my personal site to focus on content and ideas rather than on decoration or visual effects. I’ve already discussed my approach to the visual design of the site, but now I’d like to share what’s going on behind the scenes."
Make your site cross browser compatible in 5 steps
"Making your site cross browser compatible is not easy, but with this tutorial you can make your site cross browser compatible in 5 simple steps."
Improved Navigation Image Replacement
"So my co-worker at work today was slicing a design, and the designer said that the navigation had to be images. Being the good little accessibility people that we were, we were trying to figure out a way to use images, but have text also show up when images are disabled."
Creating multicolumn lists
"Until browsers support CSS 3 specifications, Web builders will need to rely on other techniques for creating multicolumn lists. Here's a look at some of the techniques that work with today's browsers."
3 Simple Steps in Coding a Rounded Corners Layout
"Various rounded corners techniques often include several additional elements that are purely presentational. Let me show you my approach to coding just that, fixed width, rounded corners layout in 3 simple steps."
Perfect pagination style using CSS
"I decided to publish a very simple post which explains how to design a perfect pagination style using some lines of HTML and CSS code."
My Development and Design Process
"My first step is an attempt to envision the overall structure of the document. I’ll first pick out the overall structural elements that need to be put in place. From there I’ll pick out such things as divisions, lists, paragraphs, headings, and definition lists, as those are the most common elements I end up working with. This process of envisioning the document structure doesn’t take long, but proves to be extremely valuable."
Streamline your forms with widgets
"“Advanced forms” are rarely that. A more fitting name would be “Overwhelming and confusing forms”. But with Jason Long’s clever approach to streamlining a screen full of checkboxes, you might just be able to once again look fondly on your forms."
Simple Double Quotes
"This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote."
Trash All IE Hacks
"Let’s admit it, we all hate Internet Explorer 6. About 80% of our CSS debug time are spend on IE6. We all know that IE6 is outdated and has horrible CSS rendering engine. However, most average Internet users haven’t realized that yet. Why? Because we put our hard work on it and patch the bugs by various IE hacks. Well, it is time to do something..."
Legends of Style Revised
"When I wrote the original article on how to achieve cross-browser consistency when styling form legends, I noted that there was a bug in the way Firefox handled them. The bug appears to still have not been resolved, but there is a way to achieve the same effect across browsers."
A Command of Headings: Usage and Styling
"I command thee, headings. Do not defy me as I am the all-powerful web developer. I am your master for I wield a style sheet with which I can make you mine..."
The Evolution of Corporate Web Sites
"It’s fascinating to see how corporate websites have evolved over the years, from the early days of magazine-style brochureware to the most recent trends of two-way Web interfaces."
HTML5, XHTML2, and the Future of the Web
"The next generation of these technologies is arriving, and they are worth keeping an eye on. These technologies will affect everyone in the business."
Web 2.0 for Designers
"There are six trends that characterize Web 2.0 for designers. In this introductory article we’ll summarize each of those trends and give brief examples."
If I Told You You Had a Beautiful Figure...
"Lay out images consistently across your site using a liitle clever JavaScript."
Quick CSS Mockups with Photoshop
"Create quick design mockups in clean XHTML and CSS, using code generated by Photoshop. No, really."
Cross-Browser Variable Opacity with PNG: A Real Solution
"Think you’re stuck with wimpy GIFs and their rigid binary transparency? Well, think again, Sunshine. Michael Lovitt shows how to overcome flaky browser support for PNG so you can take advantage of this graphic format’s lossless compression, alpha transparency, and variable opacity."
Slash Forward (Some URLs are Better Than Others)
"Some URLs are better than others: easier for visitors to remember, easier for designers and developers when it comes time to change the technology that drives the site. Waferbaby neatly and briefly considers the effect of web addresses on usability, design, and ease of maintenance and technological transition."
The Trouble With EM ’n EN (and Other Shady Characters)
"More than you ever wanted to know about dashes, spaces, curly quotes, and other vagaries of online typography. HTML specs, grammatical rules, browser bugs and character encoding—it’s all here, in this famous and much-bookmarked ALA article."
12 Lessons for Those Afraid of CSS and Standards
"If you’re starting to work with CSS, everything you’ve learned to this point probably feels useless, or worse than useless."
A More Accessible Map
"Is there a way to display text-based data on a map, keeping it accessible, useful and visually attractive?"
Big, Stark & Chunky
"You’ve designed for the screen and made provision for blind, handheld, and PDA browser users. But what about low-vision people? Powered by CSS, “zoom” layouts convert wide, multicolumn web pages into low-vision-friendly, single column designs. Accessibility maven Joe Clark explores the rationale and methods behind zoom layouts. Board the zoom train now!"
Creating Liquid Layouts with Negative Margins
"Two- and three-column, liquid page designs with header and footer are easy to dash off using old-school HTML table layout methods. Designing them in CSS is trickier, and can sometimes even require you to structure your page’s content elements in a specific (and undesirable) order. Negative margins to the rescue! Ryan Brill whips up two quick CSS layouts to demonstrate the power of negative thinking."
Separation: The Web Designer’s Dilemma
"Presentation separated from structure. Structure separated from content. The foot bone connected to the … what were we talking about? Michael Cohen steps in to examine our assumptions and relieve our separation anxiety."
Night of the Image Map
"CSS design from beyond the grave: all the secret ingredients you’ll need to resurrect the image map using CSS and structurally sensible XHTML."
JavaScript Image Replacement
"Perhaps it’s time to consider the ups and downs of a JavaScript-based alternative to the Fahrner Image Replacement technique. This version uses plain vanilla XHTML with no special IDs or CSS tricks."
Sliding Doors of CSS, Part II
"In Sliding Doors of CSS Part I, Douglas Bowman introduced a new technique for creating visually stunning interface elements with simple, text-based, semantic markup. In Part II, he pushes the technique even further with rollovers, a fix for IE/Win’s CSS bugs, and lots more."
Sliding Doors of CSS
"Image-driven, visually compelling user interfaces. Text-based, semantic markup. Now you can have both! Douglas Bowman’s sliding doors method of CSS design offers sophisticated graphics that squash and stretch while delivering meaningful XHTML text. Have your cake and eat it, too!"
Using XHTML/CSS for an Effective SEO Campaign
"Improve your search engine ranking by harnessing the benefits of well-authored XHTML and using CSS to boost your code-to-content ratio."
Accesskeys: Unlocking Hidden Navigation
"Your favorite applications have shortcut keys. So can your site, thanks to the XHTML accesskey attribute. Accesskeys make sites more accessible for people who cannot use a mouse. Unfortunately, almost no designer uses accesskeys, because, unless they View Source, most visitors can’t tell that you’ve put these nifty navigational shortcuts to work on your site. In this issue, Stuart Robertson unlocks the secret of providing visible accesskey shortcuts."
CSS Design: Taming Lists
"Do you crave the disciplined order of proper (X)HTML lists but long for control over their presentation? You can put a stop to their wild ways and bad behavior. Mark Newhouse shows you how to tame those lists by making them submit to your CSS while maintaining logical HTML structure."
Better Living Through XHTML
"Everything you wanted to know about converting from HTML to XHTML, including why you’d want to, tools that help, changes in the way browsers display XHTML pages, shortcuts, bugs, workarounds, and other tips you won’t find elsewhere."
Practical CSS Layout Tips, Tricks, & Techniques
"Think you need HTML tables to craft complex liquid layouts? Not so! In this tip-packed tutorial, Mark Newhouse shares advanced yet practical CSS techniques any working web designer can use."
CSS Talking Points: Selling Clients on Web Standards
"Selling your clients on standards-compliant design doesn’t have to hurt. Kise’s four-point CSS Selling Plan helps the medicine go down."
Applying progressive enhancements to your website
"The key aspect here is that the core content is accessible to everyone. It allows you to add enhancements to a page while not requiring the end user to have specific technology enabled or plugins installed."
Time-Savers: Code Beautifier And Formatter
"The tools and services we've collected below aren't validators. They format and beautify the code; some of them can remove redundant elements. Using them, you have to make sure you have a backup, so your data can always be restored."
HTML Intermediate Tutorial
"This guide adds a few nuts and bolts, which shouldn't be particularly difficult as such, but will add a bit more to our understanding of HTML and enable us to do a few more things."
HTML Beginner Tutorial
"This tutorial should be quite easy to follow if you work through each step. These are all brought together at the end."
5 HTML elements you probably never use (but perhaps should)
"This is a list of HTML elements I've found to be very poorly represented in most markup on the web today."
CSS: The All-Expandable Box
"I am going to attempt to explain how to make an All-Expandable box, with the following features: Works in all major browsers, Expands both vertically and horizontally, Uses a single background image"
Creative Use of PNG Transparency in Web Design
"PNG is a losslessly compressed bitmap image format. In plain English, it’s a way of saving graphic images that reduces file size without reducing image quality."
Marking Up a Tag Cloud
"Mark Norman Francis looks at the increasingly ubiquitous tag cloud, and specifically how it can be marked up in HTML. It’s evidentially not a clear-cut issue, as everyone does it differently."
Showing Good Form
"James Edwards takes the good stuff down off the shelf and illustrates how forms can be built to be both highly stylable and remain accessible to all comers."
Revealing Relationships Can Be Good Form
"Ian Lloyd labels up and ships out a tip for improving the usability of form labels."
CSS Layout Starting Points
"Rachel Andrew discusses an approach to rapid and reliable CSS development. Save hours of layout work and testing on your next CSS build"
Transitional vs. Strict Markup
"Roger Johansson returns to first principles and considers the fundamental differences between Transitional and Strict DOCTYPEs, as well as some of the common mistakes made when dealing with each."
My Other Christmas Present Is a Definition List
"Mark Norman Francis leaves no stone unturned in the quest for better markup. Today’s target is the humble, yet oft-abused definition list."
Boost Your Hyperlink Power
"Jeremy Keith appraises the humble hyperlink and highlights some of the more interesting, and perhaps lesser-known attributes that can be used to enrich the semantic value of your links."
A Message To You, Rudy - CSS Production Notes
"Andy Clarke details an approach for embedding production notes inside your document – a useful aid to project management and team communications throughout the development phases of any project."
HTML Help Sheet
Character Entity References in HTML 4 and XHTML 1.0
"Here is a set of tables containing the 252 allowed entities in HTML 4 and XHTML 1.0, as described in the official HTML 4 specifications."