Original subtitles

- So far we've just been looking at the basics

of an HTML element.

The simple version.

Like the paragraph element,

but HTML does have a bit more complexity than this.

More power that can be added to any element

through what's called an attribute.

We did look at one attribute so far,

When learning about the time element.

Some attributes only work on certain elements,

like the day time attribute.

We only use it on the time element.

Other attributes work on several of the elements,

but not all of them.

We'll get into some examples of those when we learn

about images and video.

Lets look at a few global attributes.

Global Attributes are attributes in HTML

that will work on any element.

I'm going to cover four of the most useful

global attributes.

The most commonly used attribute is the class attribute.

It gives us a way to attach a reusable name to any element.

So, we can address that name in our CSS and apply styling

to all the elements that have that class.

Id is another popular one,

it's similar to class but we're only allowed to use unique

names once in an entire HTML page.

You can use an ID for targeting CSS,

but it's much more specific and that can be a problem.

So most of the times CSS developers

tend to stick to classes.

Ids are particularly helpful for addressing

particular elements with JavaScript

or, with a targeted link.

The fact that there will only ever be one element

with any particular ID name, becomes useful

when interacting with JavaScript or links.

Whatever the use case, class and ID attributes

give us a way to name certain HTML elements

and refer to them in other parts of the stack up code.

Lets look at the same demo from the last video,

but I made a copy of it and added

classes and IDs to the code.

I use the classes in my CSS and I've added a table

of contents with links that jump to the elements

that have the matching ID.

Other attributes do things.

Content editable lets a visitor to a page

edit the content of that page.

This block quote element can now be edited.

As a user I can change the content on this web page.

Now you noticed that this doesn't change the content

in the HTML and if I refresh the webpage,

it goes back to the original.

That's because HTML alone just provides

the functionality for editing.

Back end developers have to set up a way

for that new content to be captured and saved.

There are many different ways a site

could handle saving content.

So, that needs to be uniquely programmed

for each website, usually in JavaScript.

HTML provides a lot with the content editable attribute.

The interaction for the user.

The way the page becomes editable

and it interacts with focus.

The screen, keyboards,

assistive devices, it's a hook into the power

of the browser, provided by HTML.

There are many attributes like this.

Ones that provide the browser APIs to JavaScript.

Check out other courses for more.

The Lang Attribute gives us a way to tell the browser

what language the content is in.

L-A-N-G= and the short code for the language.

We'll get deeper into how to support languages

on the web and where to find these short codes

in chapter seven.

The dir attribute gives us a way to explicitly

tell the browser in which direction the text flows.

D-I-R stands for direction.

DIR= LTR for scripts that run left to right

and DIR= RTL for right to left.

These are Global Attributes that can be used

on any element in HTML.

There's a list of all the Global Attributes on MDM web docs.

For now just remember what might just be the four

most important Global Attributes:

Class, ID, Lang and Dir.

And consider using them on any element in your (mumbling).