02.09 - Useful Tags

Loading...

From the course by University of Michigan

Introduction to HTML5

7826 ratings

University of Michigan

Introduction to HTML5

7826 ratings

Course 1 of 5 in the Specialization Web Design for Everybody (Basics of Web Development and Coding)

Thanks to a growing number of software programs, it seems as if anyone can make a webpage. But what if you actually want to understand how the page was created? There are great textbooks and online resources for learning web design, but most of those resources require some background knowledge. This course is designed to help the novice who wants to gain confidence and knowledge. We will explore the theory (what actually happens when you click on a link on a webpage?), the practical (what do I need to know to make my own page?), and the overlooked (I have a page, what do I do now?). Throughout the course there will be a strong emphasis on adhering to syntactic standards for validation and semantic standards to promote wide accessibility for users with disabilities. The textbook we use is available online, “The Missing Link: An Introduction to Web Development and Programming” by Michael Mendez from www.opensuny.org. This course will appeal to a wide variety of people, but specifically those who would like a step-by-step description of the basics. There are no prerequisites for this course and it is assumed that students have no prior programming skills or IT experience. The course will culminate in a small final project that will require the completion of a very simple page with links and images. The focus of this course is on the basics, not appearance. You can see a sample final page at http://intro-webdesign.com/html5-plain.html. This is the first course in the Web Design For Everybody specialization. Subsequent courses focus on the marketable skills of styling the page with CSS3, adding interactivity with JavaScript and enhancing the styling with responsive design. You can see a sample site for the capstone course at http://intro-webdesign.com/

From the lesson

Week Two

This week you will need to take a deep breath and jump into coding. I will cover a large number of HTML tags, but it is important that you do more than just listen to these video and read the text book material. You need to practice (and fail!) in order to learn. Believe it or not, once you master the basic idea of using tags and attributes you will know everything you need to use any HTML5 tag. The page may not look the way you want it to look yet, but you will be able to use text, links, images, tables, and even music and videos! If you want to refer to a textbook this week for reinforcement of concepts, we will be using the Shay Howe online textbook as a reference. I will include links after the lectures, but some students prefer to read before the videos. (My preferred approach is to read/watch/read again.)

02.09 - Useful Tags11:41

Meet the Instructors

Colleen van Lent, Ph.D.
Lecturer
School of Information
Charles Severance
Professor
School of Information

Hi, today we're gonna talk about some of the tags that you may

find extremely useful as you go and try to add blocks of code and

simple snippets of different things to your web page.

I know that it can seem overwhelming how many tags there are in HTML5.

So today, I'm going to try to break down some of the most useful ones.

Now, I realize it may seem overwhelming as I said throwing all these elements at you.

You're not supposed to memorize them all by the end of this lecture.

Instead, I'm really just trying to give you a taste for what's out there so

you can start playing with your own code.

So, one of the first things you need to decide when you're coding is,

which tags are you going to use?

There are the generic kind of what we call block tags, paragraph and

div, that break your code into nice sections.

Paragraph is kind of self-explanatory,

and div gives you a way to put groups of content together.

But the problem with both div and paragraph is that they're very generic.

So we want to move over to the idea of using these semantic tags,

such as header and nav, footer and figure.

And we talked about those in an earlier video.

Some of the other block tags that you may not be familiar with are listed here.

The first one are the containers.

Containers are simple things where you can put like-minded code together.

So you might have an article or an aside, a section made.

Again, they almost seem generic in their names.

But as you grow more comfortable, as you're designing your website,

you can start to see oh, this isn't a generic section.

This really is an aside.

The next block tag is hr, or horizontal rule.

And it's really an interesting idea because it doesn't contain any

text at all.

Just to remind you, block tags are tags that have the display block.

It means it forces a new line above and below.

There's never going to be anything next to it by default.

So our hard rule will just put a single line across your page, simple yet

very much used by many people.

The next one is address.

This will go ahead and be a block tag, and

it doesn't format your address any differently than other text.

But what it does is, it allows screen readers and other assisted devices

to quickly and easily find if they're looking for your address.

<blockquote> will be another block tag as well as details.

Now the details tag is very interesting in this kind of quote you get into work.

And what it does is elastic hand having drop down open and

close idea with your text.

Now, just to warn you it is not implemented in Firefox so

if you're someone with Firefox who tries to run it its just gonna kinda

default to this open idea.

Alright, so there's <hr>, <address>, <blockquote> and <detail>s.

I've told you what they were.

My guess is, you still have no idea what they really do, so

let's take a look at a quick example.

So here would be an example of the hr element.

It's just a simple line across the screen, nothing too fancy, but very recognizable.

The next one, the address element.

In this case, the browser does italicize what's inside the content.

I had to put my own end line here, but

otherwise it just looks kind of italicized.

But you can't be sure that it'll be italicized on every browser.

It's really specific to Chrome, Firefox, Safari et cetera.

But the important thing to know is that there is semantic meaning here.

Here we have a block quote, and what block quote does, is it lets, indents the code

and kind of lets people know that there's a quote that you're look at.

One of the things that I put inside my blockquote, was I put in a cite tag, so

someone can know right away that I cited Napoleon Hill.

So if someone's doing a search for Napoleon Hill,

this is going to up the chances that a search engine will link back to your page.

The last one, detail, is kind of combined with a summary tag.

So I'm going to go ahead and click here and you can see that it opens and closes.

So the default is to have it closed and

then open up when someone clicks on the little arrow icon right here.

Now one of the things I mentioned is that it's not supported on Firefox.

So if you're looking at this page on Firefox,

by default you're just going to see it in the open context.

So let's go ahead and go back to some other tags that aren't block tags.

We're gonna do some inline tags.

Again remember, inline tags just means that you can put it into the page and

go all in a line one after the other.

You don't need to break things up.

So span was the original inline tag for plain text.

You would put span around some code, and then you could go ahead and

style it any way you wanted to.

Now, in addition, we have cite, abbreviation, time, code and

then the subscript and the superscript.

Now, if you're watching closely you may have noticed I left a little typo after

abbreviation there.

So make sure you go ahead and put in the less than or greater than sign.

But let's look at examples of this code as well.

Here I have my inline elements.

The site basically makes it easier for people or bots to search your code, so

I went ahead an put this code right inside a site tag.

Now, again, this particular browser happened to style it differently,

but that's not always going to be the case.

Another new tag that has come along recently is the abbreviation tag.

So if you notice, right along here, I've included abbreviation inside the box.

Now, if you can, watch what happens when I put my mouse over the Sunday,

Monday and Tuesday.

As I hover over it, it's very small probably on your screen, but

you can see that the expanded version of the abbreviation pops up, Sunday,

Monday, Tuesday.

Now, from an accessibility screen point, it can actually go ahead and

read the expanded version.

But even for people who aren't using screen meters, I actually find that

you need to do something to let people know that hovering over is even an option.

Most people wouldn't think about that.

The time attribute is another one that is just inline and most of

us won't even know it's there but it allows you to give extra semantic meaning.

So the party starts at 9 PM.

It makes perfect sense to us, but the party took place on New Year's Eve.

Notice again, that's actually a time,

even though it's not our typical numeric time, it is a time.

By putting in different time tags,

it's also much more likely that if someone is accessing your site on a mobile phone,

it'll pop up as knowing that it's an eight.

Sometimes you would like to be able to identify parts of your code as code

fragments.

This happens to me all the time because I'm a computer scientist.

So the code elements tend to be displayed in different font but

it's not always the case.

But code is just a nice way to break it up and

let people know what is this crazy stuff people are typing?

Oh, it's code.

It's not supposed to make sense.

Finally, the last two are subscript and

superscript, and these are used to create, a lot of times, mathematical formulas.

So, you can see here, I've raised up the three, and I've lowered down the two.

So, I've given you kind of the general block tags,

the general in-line tags that people use.

And there's other tags that people use quite often

that you may see when you're looking at their pages.

The issue with these tags is the thing when I say need more.

It's really weird to use these tags unless you're also incorporating them with

JavaScript or some other elements that you probably don't know a lot with yet.

So these include the button, the <meter>, <progress>, <iframe>,

<bdo>, which stands for bidirectional orientation, and

then the <map> attribute along with <area>.

Now, people really like these, but they tend to need JavaScript.

So I'm gonna show you a quick example.

But I'm not going to include the fancy addons you would need to use then.

Cuz that's not what this course is about.

Right now, we're just learning these tags.

So let's take a look at them so you can see what they look like visually and

understand that there not actually functioning yet.

So, my special tags that need more, I called it.

Little word that you might not even be able to see it because it's so

light in screen but you can see I've included some open and close buttons.

They don't do anything but they look really nice.

So go ahead and put them in if you want but

it may confuse people that there not actually operational.

The next one is meter, and you've probably seen this before.

Basically how this one works, let me actually bring up the code for this one.

You can see for the meter one I've actually gone in here and put in meter

minimum value of zero, maximum value of 100 and my current value is 50.

So you can see it's colored in until about pretty much half way through all right?

Same here with the next one, I've set it to 25% Here I just want to

show you that it doesn't always have to be 0 to 100.

You can start at 5 and go to 10, and I've set it to 8, which is 60%.

So that's kind of how the meter works.

Progress is very similar to meter in that it shows kind of a proportional value.

Now, with progress, you're expecting that you're doing something where

eventually you'll get to 100.

So you've taken the surveys before where as you filled in,

the progress bar fills in.

Again both meter in progress tend to use JavaScript to update them.

The next one I was going to show you is iframe.

Iframe is used to nest content in each other.

It is not equal well supported by all the browsers, so

you really want to explore who can use it and the best way to use it.

And you would definitely want look into options, such as height and width.

So right here in my iframe, I've said hey, let's go ahead and link back to my page.

And it puts my whole web page inside this little block of the page.

Down here, I went ahead and said hey, let's do that iframe again, but

this time let's go ahead and have it take up a much bigger width, all right?

Now, one thing to notice is I can still click in here.

I can do all the things.

It's as if I have a webpage inside of a webpage.

The last one.

Let's go down here.

I want to show you is a bidirectional orientation.

And this one would be something you would use if your particular language tends

to not just go from left to right and instead goes right to left.

So bidirectional orientation take either rtl which stands for

right to left or ltr which stands for left to right.

And you can go ahead and put in the text.

So here is my going from left to right and

here's that same thing going right to left.

I didn't really give examples of the map with the area.

Because, again, this is one where you would really need to understand JavaScript

to really embrace what it's doing.

So I realize I went over a lot of tags with you just right now.

And some of the code, you probably understood and some of it, you didn't.

But all of the code is online,

so you can go ahead, you can download it, you can play with it, you can change it.

But as you code, you're not supposed to go in and be like, oh,

I'm going to try to use every possible tag I can to show how much I know about HTML.

No, use the most specific tag possible.

Whenever you're not sure go and ask somebody else say what would happen if I'd

trying to look at this page with my eyes closed, what I understand what's going on.

The second thing you need to understand is that sometimes your tags just don't work.

Now, there are two reasons that your tags may or may not work.

The first one might just be that you have a syntax error.

So, make sure you run your code through a validator, and

that will help you find places where you haven't closed tags.

This is especially important if you nest tags,

meaning you put one inside the other.

The other thing you really want to do,

is you want to run your code in multiple browsers.

So, even if your page looks great when you're running it in Chrome,

make sure you check it out on Firefox.

If it looks great on Safari, make sure you check it on Chrome.

It's really important that you make sure that your pages

can be reachable to the greatest number of people possible.

And really, the only way you can do this is by keeping your code simple,

succinct, and you're always validating.

Thanks.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play