I wanted to do a cat stylesheet but I'm lazy 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
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:
- First item
- Second item
-
Third item with a list within it
- First sub-item
- Second sub-item
Unordered list:
- An item
-
Another item, with a list also within it
- Sub-item
- You can use CSS to style these bullets!
- You can even mix list types when nesting
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
dtor Description Title element - This is a
ddor 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.
| 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.
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 /-
\___/
/ \
` `
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!