Creating HTML Text Practice

[00:00:00]
>> Even if you're working in JavaScript, even if you're working with all of the tools of modern web development, you should always be starting with semantic meaningful HTML. It will overcome a lot of the problems that you encounter later on. We have all kinds of people these days talking about how they're using ARIA to compensate for things that are built into native HTML.

[00:00:21]
So always start with good markup. But what can we do before we even start with good markup? We have to start with good content, and so this is what we're going to start with here. We're going to start in this very first code pen right here. So if you click on the link for the beginning code pen, you'll see that we have some pretty basic looking kind of stuff here.

[00:00:45]
And what I've done over here on the side is I've given you sort of a mad lib as we used to say in the old days. So hi my name is, fill it in with your name, and then some kind of verb. I do something, I teach, I develop, I create, I design, whatever verb you want, those are suggestions, fill in something else if you like.

[00:01:06]
And then fill in the other thing that you happen to do, just so you know what ultimately this is going to look like. We're building this little piece of text right here on the screen. So you don't want this to go and be a great big huge long thing.

[00:01:20]
How can you condense what you do into four, five words, maybe six words tops, okay? What is the focus of what it is that you're doing? And then you can give yourself a title. You're an educator or a student, a developer, a designer who specializes in whatever it is that you specialize in.

[00:01:38]
And then currently what are you doing? And so that's the formula that I want you to go ahead and fill in. Go, don't worry about the markup yet. Hopefully that went well for you. You were able to fill in that information and you have at least some starting text to go from.

[00:01:58]
By the way, that code pen that I've given you, you'll see in the instructions I give you a lot of beginning and ending code pens. From that very first codepen, if you're following along the whole way through this text example, you don't need to keep checking in with the additional codepens.

[00:02:13]
Those are mostly there for people who might wanna jump in along the way or skip over parts of this process. So you can just continue to work in the same codepen as you move on to the next particular exercise. So hopefully you have about this much text, in other words, not a whole lot.

[00:02:30]
Hopefully it reflects something that is very personal and accurate about you. So once you have that great content in place, the next thing to do is to start thinking about your markup. How are we going to mark this up? And I've given you, this is the end result that we're going for here, so we have tiny text on the top and we have bigger text underneath and then we have some more little text.

[00:02:57]
But remember, HTML stands for what, the hypertext markup language, right? Nowhere in that does that say design, nowhere in that does that say colors or size or boldness or anything else. HTML is all about communicating the message behind this information. So I'm gonna give you again five minutes to take your first pass at how to mark this up.

[00:03:24]
It's trickier than you think and that's your hint. [LAUGH] And so what I want you to think about here is, what is the most important thing, okay? I'll give another hint. The h1 is not gonna be located in this text. We're going to put the h1 in the nav bar later on.

[00:03:43]
But for right now, so start with something like h2 for a heading. What is the most important part of this information that's here? So what gets the h2? What is less important information? That might get something like a paragraph tag for example. Is there any other information in here?

[00:03:59]
Maybe you wanna make a link, for example, where would that go? What resources are going to and what does that markup look like? Take a look at this, think really hard about what the HTML might be to mark this up, and I'm gonna go through the answer with you in just a second.

[00:04:15]
Go ahead and give it a try. How would you do with that? Hopefully things went okay for you. And so I'm gonna talk you through the answer here. And before I go into that, the thing to remember about semantic HTML is that, what is the meaning that you are trying to convey, that is behind everything that you do in semantic HTML.

[00:04:39]
So in other words, there is no one correct answer. If you are trying to convey certain types of information, that should drive the choice of HTML elements that you use to convey that information. And your choices may be different than mine because you're trying to convey something else.

[00:04:57]
So let's go through what I have here for an answer for this. We won't worry about how this looks because that doesn't matter, we can make it look however we want with CSS. So here is my particular text here. So first of all I've surrounded this whole thing with a section tag, because this is going to be a section of my webpage.

[00:05:18]
This isn't really information that could stand by itself who would make an interesting webpage, although maybe you could argue that it does. If it did it could be an article, but in this particular case, I'm just considering this part of a larger whole. So I've used my section element here and I've given it an ID, an intro, because I may ultimately wind up making a link to this particular part of the page.

[00:05:43]
So that's why I've used an ID as opposed to a class. If that doesn't make sense to you as to how to make a link within the page, we will of course talk about that later when we get to the nav bar. The next thing is hi my name is Jen Kramer and I suspect many of you probably put a heading around this.

[00:06:01]
But I gave you a hint that the h1 is going to be in the nav bar. So as you look at the final version of the webpage, you know that I have my name up here in the upper left hand corner, kind of like a logo. That is actually going to take the h1 later.

[00:06:17]
And while you can have multiple h1's on a web page, generally speaking, the trend in front end web development is to have only one. So if you're taking that approach of only one h1 on the page, then you need to figure out where the h2 is going to do.

[00:06:32]
If my name is the most important thing in the h1 on top, I've decided that I teach the web is the most important part of this introduction, because that tells you what you do. Nobody cares who Jen Kramer is unless you are gonna pair that with something that gives you context because by the way there's a Jen Kramer who ran for political office in Chicago and there's a Jen Kramer who's a magician in Las Vegas and there's many other Jen Kramers out there.

[00:06:57]
So this is the one who teaches the web, that's why I've made that the h2. As for hi my name is, I mark that up as a paragraph and I did put a span tag around the words Jen Kramer because clearly we're gonna have to sell that differently than everything else that's there in that sentence.

[00:07:14]
Then I have a paragraph with the information about what it is that I do for work, and another paragraph talking about what I'm doing currently which is creating courses for Frontend Masters, and I link to my information there on the Frontend Masters website and then I closed my section.

[00:07:31]
Why span and not h2 and h3? Great question. Why span and not h2 and h3, because this is a full sentence. Hi my name is Jen Kramer. That is a whole sentence. If we used an h2 for whatever, Jen Kramer and hi my name is is an h3, then we are actually nesting two headings inside of each other, which is kind of weird.

[00:07:57]
The other part of that is it's one complete sentence that is kind of a paragraph. We wouldn't want to break that up into multiple headings. So you're probably thinking about the HTML is more of a sailing mechanism here, as opposed to the meaning that you're trying to convey.