All language subtitles for 10 - Code, pre, and br.en

- Sometimes you want to put some code on a webpage.

Let's say you're writing an article

about making a webpage or you want to tell people

about some of the syntax encode.

Here, we've got some CSS in the middle of a sentence.

I'd like that code to stand out and look like code.

So I'll use the code element.

I'll type an opening code tag before my bit of CSS

and a closing code tag afterwards.

You can see that the styling changes.

It switches to a monospaced font

and of curse we can make this look however it is

that we want it to look.

Code, by default, is an inline element.

So this part of the CSS

remains part of the sentence that it's in, inline.

Now what if we wanted to write about some HTML as well?

I want to change this word H4

by putting the brackets around it

but oh, it turned the word element into an H4 headline.

It did the thing rather than printing H4 out on the page.

Let me try wrapping this in a code element

but no, that doesn't keep the browser

from interpreting the H4 as an H4.

To do that, we need to type <.

This is a funny thing called HTML entity.

When we type < we'll get a less than sign.

If we type > we'll get a greater than sign.

I'll talk more about HTML entities in a future video,

there are a whole bunch of them.

But for now, these two are helpful

if you want to write about HTML syntax

in a way so that it's shown on the page

instead of being executed.

Next, let's look at the br and pre elements.

Normally, we can type all of the spaces

and return characters that we want in our code

and the browser is going to ignore them all.

I talked about this a bit in a video about lists,

how you can indent your code to help make it more readable

for humans without it having any effect

on the content on the webpage.

But what if you want to have an effect on the content?

What if you want to be able to put a whole bunch of spaces

between words or between lines and have it count?

For a poem, for example,

I've wrapped this poem in a paragraph element.

It's two sentences and as a whole,

it seems like a paragraph.

But the way it's coming out on the page on the right,

it looks all wrong.

The browser is ignoring the line breaks

that are in the poem.

You could see on the left how much meaning is conveyed

by the way it's formatted.

We don't want to make each line into a separate paragraph

because these aren't separate paragraphs.

We just want a line break

at the end of each one of these lines,

something that the browser will respect.

That is what the br element is for,

it gives us a way to break a line.

I'll put a br element at the end of each line

and now this poem looks correct.

Br is just a simple, single tag,

there's no opening or closing to it,

there's nothing that goes inside of it,

it just marks a place for a line break.

Let's look at another poem

where the spacing is even more irregular and meaningful.

The whole poem is coming out

as a mashed up pile of words right now.

I could put a br at the end of each line

but that wouldn't create the indentations

or the flowing white space that we see.

We want to get the spacing into the content itself

because it's inherent to the content,

it's part of the meaning of this content.

So let's do that in HTML with a pre element.

I'll wrap this poem in pre tags and now as you can see,

the browser pays attention to the spacing,

the line breaks and everything.

We can come in here and add a random character

into a random spot and it will stay there.

Pre and code are frequently combined

to provide a way to show a block of code with indentation.

Here's an example that puts these parts together.

I've written some HTML using HTML entities,

I've added indentation to make it easier to understand

and I followed it with some CSS that's also indented.

The whole thing is wrapped in a code element

to tell the browser, hey, this is some code.

And all of that is wrapped in a pre element

which maintains the formatting and the spacing.

That's the code, br and pre elements.

Three elements that can be useful

for communicating semantic formatting for code

and for other kinds of content.