CSS Sprites2: It's JavaScript Time

In 2004, Dave Shea took the CSS rollover where it had never gone before. Now he takes it further still—with a little help from jQuery. Say hello to hover animations that respond to a user’s behavior in ways standards-based sites never could before.

Shea, Dave. List Apart, A (2008). Articles>Web Design>CSS>DHTML

Why Use DITA to Produce HTML Deliverables?

The Darwin Information Typing Architecture (DITA) is an XML-based format for structuring and authoring technical content. This article explores advantages DITA provides for producing HTML content -- including easy global changes, portability through standards, superior linking and Web management, conditional processing, content and design reuse, and better writing through focused content. DITA consolidates all of the benefits in a consistent, overall information architecture that can evolve and grow along with your product information needs and delivery modes, and with the evolution of standard tools for delivering XML as the presentation mechanism.

Hunt, John, Don Day, Erik Hennum, Michael Priestley and Dave Schell. IBM (2005). Articles>Information Design>HTML>DITA

Migrating HTML to DITA, Part 2: Extend the Migration for More Robust Results

The Darwin Information Typing Architecture (DITA) holds many advantages over information authored directly in HTML, including better reuse, easily changed presentation styles, and easy single sourcing. In Part 2 of this two-part series on how to quickly migrate HTML topics to DITA, the author explains the details of migration, and shows you how to override parts of this process for ideal results.

Anderson, Robert. IBM (2005). Articles>Information Design>HTML>DITA

Easy CSS Dropdown Menus

Attractive dropdown menus have long been the realm of Flash developers and advanced JavaScript gurus. But that needn’t be the case. This tutorial will walk you through developing a clean, semantic dropdown menu using XHTML and CSS that works in all modern browsers!

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>DHTML>CSS

Perma-Closing Message Boxes with JavaScript + CSS

Earlier this week I talked a bit about message boxes – how to style them and position them on your page to get them noticed. But a message that pops up every single time your website is loaded could get annoying. It’d be useful to give your users the ability to close those messages. For that, we’ll turn to our friend JavaScript.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>DHTML>JavaScript

Horizontal CSS Dropdown Menus

Last week, CSSnewbie reader Andrea Pluhar wrote in with an interesting problem: she wanted to use CSS dropdown menus like the ones we featured last week on a website that she was building, but the design called for the submenu to be arranged horizontally, not vertically. She sent me a mockup of what she was after (excerpted above) and wondered if there was a way to accomplish this effect using CSS.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>DHTML>CSS

Intelligent Navigation Bars with JavaScript and CSS

I’ve developed a trick over the years that I’ve used on a number of websites now for making my sites’ navigation bars “intelligent” or “self-aware.” By that, I mean that the navigation bar automatically knows which tab/button/whatever should be considered the currently active link, without having to manually specify a class or ID on either the body tag or on the links themselves.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Information Design>DHTML

Tab-Based Navigation in Six (or Seven) Easy Steps

Navigation bars are the signposts of the web world: we take them for granted because of their ubiquity, but we’d all have a much harder time getting around without them. On most websites, nav bars hold a position of honor near the very top of the page, meaning they’re one of the first things your users see upon entering your site. As such, there’s a lot of pressure on navigation bars to look clean, act sophisticated, and ply the client’s wife with small talk and Manhattans while you close the deal.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>DHTML>CSS

The Basics of HTML

In this article you will learn the basics of HTML—what it is, what it does, its history in brief, and what the structure of an HTML document looks like.

Francis, Mark Norman. Opera (2008). Articles>Web Design>HTML>XHTML

POSH: Plain Old Semantic HTML

POSH, in case you haven’t heard of it already, is short for “Plain Old Semantic HTML”, and is obviously much quicker and easier to say than “valid, semantic, accessible, well-structured HTML”. Unfortunately POSH - semantic markup - is also something most people building websites or creating content for the Web have yet to discover.

Johansson, Roger. 456 Berea Street (2008). Articles>Web Design>Standards>HTML

The HTML HEAD Element

This article deals with a part of the HTML document that does not get the attention it deserves: the markup that goes inside the head element. By the end of this tutorial you’ll have learnt about the different parts of this section and what they all do, including the doctype, title element, keywords and description (which are handled by meta elements).

Heilmann, Christian. Opera (2008). Articles>Web Design>HTML>Metadata

Choosing the Right Doctype for Your HTML Documents

In this article I will look at the doctype in a lot more detail, showing what it does and how it helps you validate your HTML, how to choose a doctype for your document, and the XML declaration, which you’ll rarely need, but will sometimes come across.

Johansson, Roger. Opera (2008). Articles>Web Design>HTML>Metadata

Marking Up Textual Content in HTML

In this article I will take you through the basics of using HTML to describe the meaning of the content within the body of your document.We will look at general structural elements such as headings and paragraphs and embedding quotes and code. After that we will look at inline content, such as short quotes and emphasis, and finish with a quick examination of old-fashioned presentational content.

Francis, Mark Norman. Opera (2008). Articles>Web Design>Information Design>HTML

Can the alt Attribute Be Omitted Without Hurting Accessibility?

In the current editor’s draft of the HTML 5 specification, the alt attribute for images is no longer required. I am not convinced that this is a good idea.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>HTML5

Accessible Expanding and Collapsing Menu

A website’s navigation should, in my opinion, be visible and straightforward, not hidden away like this or in flyout/dropdown menus. But...

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>DHTML

Use Only Block-Level Elements in Blockquotes

The blockquote element is not allowed to have text or inline elements as direct descendants. Only block-level (and in HTML 4.01 Strict, script) elements are allowed unless you use a Transitional Doctype, in which case both block-level and inline elements are allowed. But there are plenty of sites that use a Strict Doctype and still have blockquote elements that contain inline elements.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Standards>XHTML

Another Look at HTML 5

It has become evident to me that some of my previous comments about HTML 5 and what is going on in the HTML Working Group are the result of misunderstanding and overreacting on my part. I no longer think things are quite as bad.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Standards>HTML5

Is HTML 5 a Slippery Slope?

Tommy Olsson comments on the possibility of backwards compatibility and standardised error handling being bad for overall code quality.

Olsson, Tommy. 456 Berea Street (2007). Articles>Web Design>Standards>HTML5

Help Keep Accessibility and Semantics in HTML

If you think accessibility and semantics are important and should be improved in the next version of HTML, you need to act.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Standards>HTML

How to Prevent HTML Tables from Becoming Too Wide

The layout model of tables differ from that of block level elements in that they will normally expand beyond their specified width to make their contents fit. At first that may sound like a good thing – and it often is – but it makes it possible for oversized content to make text unreadable or completely break a site’s layout, especially in Internet Explorer.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Document Design>HTML

Guidelines for Creating Better Markup

I’ve mentioned several times here that I feel writing markup (or any other code, for that matter) is a craft. I take pride in writing as lean and clean code as possible. From the looks of things there aren’t a whole lot of other Web professionals that feel that way, but we do exist.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Standards>HTML

Improve Your Forms Using HTML 5!

HTML hasn't really been updated since HTML version 4 was released back in 1998. However, the WHATWG community has been working on HTML since 2004 and this will hopefully result in some much needed improvements. This article shows some of the new functionality of the proposed form chapter of HTML5: Web Forms 2.

Van Kesteren, Anne. Opera (2008). Articles>Web Design>Forms>HTML5

Building a More Semantic Web With Microformats

This paper will introduce the Semantic Web, the next stage in the development of the web. We will explain why semantics are important, how they can help computers catalogue data, and how this will benefit us as individuals. We will also look at microformats, an ongoing project the aims to help us create a more semantic web. We assume you have a good knowledge of XHTML.

Mercurytide (2006). Articles>Web Design>Information Design>XHTML

Free Your Embedded Data With SearchMonkey

Arguing for web standards and semantically clean and rich websites is an uphill battle. For years we had to deal with browsers that needed us to mess around with HTML just to display a document in several columns and the visual outcome was much more important than the structure.

Heilmann, Christian. Digital Web Magazine (2008). Articles>Web Design>Standards>HTML

Improve Your Page Performance With Lazy Loading

The important things to address are page weight and load time. Both of these factors have a negative impact on the user, and we should be working towards minimizing it.

Heuser, Jakob. Digital Web Magazine (2008). Articles>Web Design>DHTML