Your dream default stylesheet

An HTML page full of elements

The following navigation menu uses the ul and li elements nested within a nav element. If it's a link, those are wrapped with an a (for "anchor") tag.

Text/Content

HTML has some elements that are used for easy CSS-free styling, like strong elements often have text that is bold in nature and em elements are used to emphasize text. But because they are HTML tags, you can style them to make the text do almost whatever you want.

While there are text/content-related elements throughout this entire page, like this p element you're reading, this particular section includes more of them.

"Like this blockquote, for example." - Santa Claus
This text is inside a div element, and within it are some words wrapped in span elements. All element tag names in this page are wrapped in code tags.

A couple of fun elements:

And above that h4 is a hr, or horizontal rule. hr tags can be really fun to style so you can use them as visual breaks in your HTML content. Another fun, but much more modern, HTML tag set is the below details and summary.

Click this summary to toggle the details widget It's pretty cool that you can make an interactive element like this with only HTML, no JavaScript needed. These are great for spoilers or answers to questions on your webpage.

Lists

HTML enables different kinds of lists, and you can even nest them! This section shows off ol (ordered lists), ul (unordered lists), li (list items), and a fun one after them.

Ordered list:

  1. First item
  2. Second item
  3. Third item with a list within it
    1. First sub-item
    2. Second sub-item

Unordered list:

A couple of fun elements:

The following list type is dl or Description List element. It is used to enclose group of terms, like word definitions, character descriptions, etc.

Definition List:

This is a dt or Description Title element
This is a dd or Description Details element
HTML
HyperText Markup Language
CSS
Cascading Style Sheets

Tables

Tables are two-dimensional (rows, columns) and used for presenting information in tabular form. In the older days of the web, we used to use tables for layouts, but that's very taboo and not accessible.

You start a table with a table element. You use thead for defining the row(s) of the head of the table columns. Each row is within a tr element and within a row you define the cells of each column: the th element is for Table Header cells and td element is for a regular ol' cell.

This is a simple caption element captioning this very simple table.
First head cell Second head cell
first row, first column first row, second column
second row, first column second row, second column

Figures/Images

Images are fun to share on a web page, but adding captions and alt text make it even more fun, informative, and accessible. The following image is added using an img tag with an "alt" attribute for alt text. Additionally, the figcaption element holds the caption next for the image, and both are wrapped in the figure tag.

an illustration of a personified strawberry a thumbs up, holding a butter knife and kneeling on a computer
this is a caption for the above image of the Glitch Community Code Jams mascot

Another fun element:

The following is another figure but the figure is actually some ASCII art within a pre tag, known as the Preformatted Text tag. It presents the text as is written, white spaces and all. It's important to add a caption to these to make them more accessible, as well as attributes "role" and "aria-label". 

           _|w|_
          /     \
          |.  . |
         -\ o   /-
           \___/
           /   \
          `     `
the above image is ASCII art of the Glitch Community Code Jams mascot, a strawberry wearing a crown and has arms, legs, and a face

Forms

Oh boy, can forms on webpages be and get more complicated? This example only scratches the surface of what elements you can use in a form, but it's enough to help you figure out a good style. Remember to keep it readable and understandable!

This form starts with a label for a *required* input element whose "type" attribute is set to "text." There's a few options for input types that you can learn about on MDN.

The following is a fieldset that is a collection of options (input elements whose "type" is set to "radio"). Remember, every input needs a label. And every fieldset more likely than not needs a legend to describe the set.

Choose your favorite fruit

The following is a textarea followed by a submit button.