All language subtitles for 16 - Weird characters.en

- The less than sign, the greater than sign

and the ampersand are part of the characters

that we use to write html.

So what happens when we want to use them in our content?

We looked at this a little bit in chapter two

during the video about code and pre,

let's get into it more deeply here.

When I write a greater than or less than or ampersand

symbol with spaces around it, it will show up as content.

But if I start to write something

that might look like an html element, it disappears.

The browser thinks it should do this as part of html

instead of displaying it.

If you are writing inside a content management system

like WordPress or using a tool like markdown,

there's a chance that the layer between your text editor

and the pure html will handle these characters

for you just fine.

Other times, you're going to need a way

to handle this yourself.

This is when we use what's called a character entity.

Html entities are formatted like this.

Ampersand, some kind of short code, and a semicolon.

We type them into an html file and they get converted

into the characters that we want.

This is what we did in the demo for pre.

Every instance of a greater than or less than symbol

is written out as a corresponding character entity.

The W3C keeps a reference chart

of all the character entities where you can mark them up.

Html entities can also be helpful

for typing characters that aren't on your keyboard.

For example, if you want to put a copyright symbol

in your content, you can type ampersand, copy, semicolon.

You don't have to use the character entity.

Frequently, you can just copy and paste the character

or learn the keyboard command for it.

But using these html character entities is one way to do it.

There's one special entity that I want to point out.

The non breaking space.

Normally, spaces provide opportunities

for lines of text to wrap.

The words stay whole, and when there's not enough room

for a whole sentence, the browser looks

for a place to wrap the line of text.

It looks for any space where there's a space between words.

A normal space.

But we can insert what's called a non breaking space

between two words, instead of a regular space,

and the browser will know not to break the line there.

Let's say I want my name to be in a phrase

and to never have my first name, Jen,

on a separate line from my last name, Simmons.

I can type   for non breaking space,

between my first and last names,

and the line will never break there.

People also use the non-breaking space

to force the browser to put

more than one space between words.

As we've already talked about,

if you have a bunch of spaces in your html,

the browser will ignore everything beyond the first space.

The browser won't remove non breaking spaces, however,

so you can put two spaces between each sentence,

for example, if one of those spaces is a non breaking space.

Html character entities give you a way

to ensure that the browser will put the character

that you want on the page, including non breaking spaces.