The HTML and CSS Blog:

Posts in category Level 3: Text and Lists

The Oft-forgotten Definition List Tag

definition list puppy

Learn to structure a list of terms and descriptions as an HTML definition list. A definition list can be any list of words and definitions, such as a dictionary, glossary, technical terms, a product list….you may be surprised how many uses you have for a definition list.

Learn HTML Lists: Ordered and Unorder...

ordered list tag animated gif

Learn how to create ordered lists (numbers) and unordered lists (bulleted) with HTML’s list tags. Learn to use attributes to control the start number, style of your numbered list, and the shape of your bullet.

This is the only topic so far that we’ve made two videos for. We’ll sprinkle screenshots throughout this post from our educational videos by Claude Parnell and Ben Laatsch. Ben’s take is a chilled out ukelele tune and Claude has put this HTML lesson to rap. So you can learn HTML during your workout or while you relax.

New HTML5 Tag for Word Breaks

Optional word break

This is the third-in-a-series of lessons on new HTML5 tags. This lesson will teach you how to make your text more readable by controlling how long words break.

New HTML5 Tag: Time

HTML5 Time tag

The new time element is used for unambiguously encoding dates and times for machines, while still displaying them in a human-readable way.

Learn the HTML Tag to Highlight Text

Mark tag

Today I’m going to teach you a new HTML tag that will really impress your friends…at least if your friends are half as geeky as we are. What’s so great about this tag? It is a brand spanking new tag from the latest version of HTML, HTML5. Even experienced coders are still learning HTML5, so new coders have a chance with these next three lessons to get ahead of the game.

Make a Horizontal Line with HTML

hr HTML tag

Today you’ll learn how to create simple horizontal lines to separate sections of your content. When you learn to use the HTML tag for horizontal rules you’ll also come to understand empty tags (in contrast to container tags).

Block-level vs. Inline Elements

There are two kinds of elements. Block-level elements act like separate paragraphs, and everything that is done to them applies to the entire paragraph. Here is the difference, and how to make sure you nest them properly.

HTML Lessons

©2013 Diane Presler. All rights reserved.