HTML, XHTML & CSS For Dummies Cheat Sheet - dummies
Cheat Sheet

HTML, XHTML & CSS For Dummies Cheat Sheet

From HTML, XHTML and CSS For Dummies, 7th Edition

By Ed Tittel, Jeff Noble

Hypertext Markup Language (HTML) and its cousin, XHTML, along with the Cascading Style Sheet (CSS) language are the lifeblood of Web pages. Even experienced Web designers and authors need help sometimes, and this Cheat Sheet provides many helpful online resources, a quick color code guide, and a peek at the future of HTML with new HTML 5 elements.

Named Colors and Hex Values in HTML

The following table contains a list of named colors you can use in HTML and CSS code to create a more colorful Web site. The colors are given with their corresponding RGB hexcode values and a representative color swatch.

Name Hexcode
Aqua #00FFFF
Black #000000
Blue #0000FF
Fuchsia #FF00FF
Gray #808080
Green #008000
Lime #00FF00
Maroon #800000
Navy #000080
Olive #808000
Purple #800080
Red #FF0000
Silver #C0C0C0
Teal #008080
Yellow #FFFF00

HTML, XHTML, and CSS Resource Sites

There’s no shortage of good HTML resources online, but some are simply so superlative that you’ll want to check them all out. The following sites provide help on HTML, XHTML, and CSS, as well as Web graphics and design:

  • The World Wide Web Consortium is not just the fountain whence HTML, XML, XHTML, CSS, and a whole lot more springs, it’s also a great source of information, tutorials, and tools.

  • The Web Design Group has the motto “Making the Web accessible to all,” but they’ve also got great references and tools, as well as help forums, FAQs galore, and some great design guides and color code info.

  • W3 Schools has lots of free and useful stuff — including HTML and XML tutorials that cover the basics of markup, plus CSS, tons of XML applications, numerous scripting languages for client- and server-side scripts, and a whole lot more.

  • Webmonkey has an extensive how-to library that covers lots of interesting topics in (for openers) Web authoring, design, multimedia, and e-business, as well as quick references for everything from JavaScript to special characters and color codes.

  • A List Apart Magazine has great content (and ideas for aspiring Web designers and developers) to share. Lots of full-time, professional developers, designers, architects, and project managers are active on this site.

  • WebDesignerDepot is a Web design site that seeks out and describes new and different graphic design techniques. Additionally, it provides great examples and best practices for Web and graphics design.

  • Smashing Magazine aims its coverage squarely at Web designers and developers. It seeks to keep them abreast of the latest trends, tools, and techniques related to their design and development interests.

  • The Web Developer’s Virtual Library is a treasure trove of information, tutorials, and tools coverage, with Web design and programming techniques.

  • Noupe is a Web-based magazine that targets Web designers and developers with the latest info, design approaches, and tips for HTML, CSS, AJAX, JavaScript, graphics, typography, and so forth.

  • CSS-Tricks is “curated” by über Web (and CSS) geek Chris Coyier. Look to this site for an outstanding collection of articles, how-to’s, tutorials, and screen casts, and for an active set of forums on CSS, JavaScript, PHP, and content management systems (CMS).

New HTML 5 Elements

Below is a list of all the new elements proposed for introduction in the HTML5 specification in alphabetical order, with a brief description and an associated markup category.

(Structure element)
Provides section formatting for short expository items like
articles, blogs, etc.
(Block semantic)
Slightly related piece of content for host page
audio *
(Embedded media)
Used to add audio for playback associated with Web page
(Dynamic graphics)
Use to define a page region in which drawing can occur
command *
Use to define user GUI elements
(Forms & user input)
Use to create a list of input
elements for pull-down menus
(Forms & user input)
Provides additional information or controls to users on
embed *
(Dynamic behavior)
Links to external application or interactive content
Provide a caption for a figure
Standalone flow content element; may be static or dynamic
(Structure element)
Concluding information for a document section
(Structure Element)
Introductory or navigational aids at the start of any page
(Structure Element)
Header for a section, or a collection of pages within a
(Forms & User input)
User-accessible control to generate key pairs for security or
(Semantic structure)
Mark or highlight a run of text in one document, for reference
in another document
Define a visual indicator for some type of measurement
(Structure element)
Use to define a navigation bar or area in a Web page
(Dynamic content)
Some kind of output from script calculation or API call
A visual meter for task completion (progress bar)
Use to annotate ideographic languages like Chinese or
(Structure element)
Generic document or application section; works with h1…h6
to delineate document structure
(Forms & user input)
Summary, legend, or caption for input details information
(Dynamic content)
Value for representing date and/or time
video *
(Embedded media)
Use to playback video content in Web page
wbr *
(Semantic structure)
Use to denote possible line break point for text flow

* This is an empty element.