All language subtitles for 05 - Headlines.en

- Let's talk about headlines.

Webpages often have a lot of titles,

headlines and sub-headlines.

In long passages of text,

they help break up the pages content

to make it easier for people to understand

the structure of what's on the page.

On Landing pages,

those headlines are the content.

Titles of things people can click

and go on to read more.

There are headlines everywhere.

Let's look at the HTML elements

for marking up headlines.

There isn't just one element for headlines,

there are six,

h1, h2, h3, h4, h5, and h6.

Let's look at these running in a browser.

You can see that each headline

has a different effect visually.

These ideas of hierarchy

also carry through to all the non-visual ways

the browser understand and communicate

about the page.

H1 is the biggest,

or rather the loudest,

the most prominent,

h6 is the smallest, the quietest,

the most sub, sub, sub-headline,

and the rest fits somewhere in-between

in a range of importance or prominence.

In some ways,

this is pretty straight forward,

and fairly easy to understand,

choose which level of headline to mark something.

Type the opening tag, the h1 at the beginning,

and type the closing tag at the end.

In other ways, it can be quite tricky to figure out

which level of headline to use when.

Let's look at an example.

I've got several paragraphs of text

that are all marked up with paragraph tags,

and before those, there are two headlines,

the first is marked up with an h1 and the second with an h2.

We can see that the h1 is larger than the h2,

the h1 is the main title,

and the h2 is the subtitle for this content.

If I come over to the CSS window, I can apply some CSS

that I wrote earlier and you see this style

to look more modern.

HTML without any CSS looks very 1994,

but don't get confused, every website uses CSS

to make the HTML elements look

however it is the designer wants them to look visually.

We're not going to pick a headline level based on how it looks,

we're going to make a choice based on what it means.

It makes sense that we created the main title into an h1

and created the subheading

with the next level down after the title in h2.

Let's look at how the New York Times

uses three levels of headlines

to mark up this section landing page.

The title for the whole page, Dance, is an h1 headline,

all of the article titles are h2 headlines,

and the little kicker headlines

with the little labels like FALL PREVIEW

which tell the reader which type of content it is,

those are all h3 headlines.

You'll notice that some of the article titles

are displayed in a larger font size,

and some of them are displayed smaller,

but all of them are semantically h2.

You can that this hierarchical system of headlines

provides the browser with meaning.

It conveys what's most important

versus what's less important.

It lets all the article headlines be the same kind,

all of them are h2.

This is incredibly important for anyone

who is navigating the page with a screen reader.

Making headline levels into

an intentional system of hierarchy

provides a key interface

for navigating a site through sound.

It may be that someone else on your team

has already defined use cases

for each different level of headline,

and you want to follow their guidance.

Many big teams these days

have already created a design system,

and when everyone follows that system,

the site has more consistency and semantic success.

If you are creating such a system for your team,

or perhaps just for yourself,

it pays off to spend a little bit of time

thinking about how you want to use

the different levels of headlines across the whole site

and come up with a plan.

You do have some freedom here to decide how and when

you want to use each of the six levels of headline.

There isn't a strict formula.

You just want to use the six levels of options

to create semantic hierarchy in your use of headlines.