Writing Semantic Markup

The history of front-end development
is not a short one
as computer history goes,
but it wasn’t until recently
that it has started to get
the tools and attention it deserves.
Writing markup was mostly ignored
as being both cumbersome
and yet simplistic.
The practice of crafting “the view layer”
is more enjoyable and exciting now
than it ever has been
and it is giving us
better user experiences.

Traditionally, most layout in HTML
has been done with only a handful of tags:

<table> :
Misused for years
to get around the shortcomings
of CSS layouts,
the backlash against them
has led some designers
to stop using them altogether.
Tabular data belongs in tables.
Don’t be afraid to use them.

<div> :
This is the catch-all element
and used as a default
when other tags won’t do.

<span> :
Similar to div,
but this is an inline-level
element useful for text.

As you can imagine,
these few elements
don’t give us a lot
of differentiation
and don’t reflect
the structure of the application
and the purpose of their parts.
They do get the job done,
but it could be better.

These tags are meant to be meaningful
but also flexible in their usage.
You may notice that the definitions
of these elements
are somewhat vague,
and that is intentional.
They don’t have any inherent styles
of their own
and can be used in any combination
that makes sense to you.
These elements have great browser support,
but you may need a polyfill
to enable support in older browsers
(such as Internet Explorer 8 and below).

To get an idea of
how this looks in practice,
let’s look at a few examples.

A blog article can use a header and footer
to separate the title and meta information
from the post itself.

These elements can be nested.
this is especially helpful for section tags.

<section><h1>Pangolins</h1><section><h2>Habitat</h2><p>Pangolins live in two regions: Southern Africa and South-East Asia</p></section><section><h2>Diet</h2><p>They are insectivorous, mainly eating ants and termites.</p></section><section><h2>Conservation</h2><p>Pangolins are endangered and protected under international laws.</p></section></section>

Headers and footers can be used
for global elements
and also inside other elements.

We should take a moment
to talk about the difference
between block-level and
inline-level elements.
Inline-level elements are used for text
and will not (by default) add a line break before and after.
These are tags like <a>, <strong>, and <img>.
Block-level elements are your more typical layout tags
like <div>, <header> and <h1>.
Each can be styled like the other
by using the display property in your styles.

a{display:block;}

There is also a hybrid between the two
called inline-block.
This will cause the element
to remain inline,
but accept things like top and bottom padding.
In some situations,
this is a simpler approach
than using floats
and can be very helpful
when aligning elements with text.