Join James Williamson for an in-depth discussion in this video Basic HTML syntax, part of HTML Essential Training.
Earlier I stated that you could learn the basics of HTML syntax in about five minutes. Well, in this exercise I'm going to put that to the test. Now I'll be honest. It's probably going to take me a little bit longer than five minutes. But I think you're going to be pleasantly surprised at how quickly you can pick up the basics of HTML syntax. Now to do this I'm going to be using the file syntax.htm. You can find this file in the Exercise_files > Chapter_01 > 01_02 folder. And I've got it opened in two places.
First, I've got it opened in text edit. I'm on a Mac. For this exercise, I'm just going to use the default text editor, which happens to be Text Edit. If you want to do this along with me, if you're on Windows, open it up in, say, Notepad. Or you could use a different program like TextWrangler. You just want to make sure you're using a basic text editor that can handle raw TXT files. The reason I'm using this and not some code editor. Is I want to reinforce the concept that HTML is really nothing other than a TXT file. There's no special encoding going on with it.
It's simply a TXT file with a .htm or .html extension. That's all it is. Now on the right hand side, I had the same file opened up in a browser. In this case, Google Chrome. So, when I make an edit to the file, I can come over here and refresh the page. And you can see what that edit does to it as far as rendering in the browser gets. So let's talk about the basics of HTML syntax. Now, remember that HTML stands for hypertext markup language. That means that we use tags to mark up content on the page to identify it.
You can see this text, for example as a paragraph. Well, it's not a paragraph yet, and in order to make it one, we're going to have to mark it up using a paragraph tag. So, to do that I'm going to go right over here to the very front of the document and I'm just going to open up a paragraph tag. To do that I'm going to use a left angle bracket. Followed by the character that represents the element I want, P for paragraph. And then, close the opening tag with a right angle bracket. So, that is the makeup, or the syntax if you will, of an opening tag.
You've got the left angle bracket, you've got the character, or characters, that represent that particular element. In this case, P for paragraph, and then, the right angle bracket. Now everything a browser's basically going to look at this. And it's going to know that everything after this is contained within that paragraph. Most elements are going to have both an opening and a closing tag. When your browser or user agent is looking at this, it says okay, this is the beginning of a paragraph. But you also need to tell it where the paragraph ends. So in this case I'm going to go to the very end of the paragraph and I'm going to do what's known as a closing tag.
Now closing tags look almost exactly the same so I'm going to open it using a left-angle bracket. But then I'm going to do a forward slash followed by the P followed by the right-angle bracket. So they're almost exactly the same. The only difference. From the opening and closing tag is that forward slash. And it always precedes the character that it identifies. So essentially we have an opening paragraph tag right here. We have a closing paragraph tag. And then we have the contents of the tag right in the middle. And then the entire thing is considered a paragraph element.
So when you hear HTML referred to as elements. Basically, elements refer to the tags and their contents, whereas this is simply the tag itself. But in addition to the tags, each of the tags can also have certain attributes. Some attributes are specific to the elements, whereas other attributes are what we call global attributes. Now the paragraph tag doesn't really have. Any specific attributes to it, but it does have some global ones that we could apply. If I wanted to apply an attribute to the paragraph tag, I would go under the opening tag, and right after the character, I would open up a space.
And then I would type in the attribute that I wanted. Paragraphs don't have that many, so let's just pick language. So I'm going to type in L-A-N-G. So of course you'll have to learn the attributes themselves. Then you type in an equals to assign a value to it, and then in quotation marks you give it a value. In this case I'm going to say en for english. So here I'm telling the user agent that the contents of this paragraph are in english. Now, don't panic. You don't have to do this for every element. It's just kind of a nice thing to do if this paragraph had Spanish in it. I could say language equals Spanish, and then spell checkers would know.
To either check it using a Spanish dictionary or ignore it for English spellings. What we're looking at is the syntax of the attributes. So you have the name of the attribute. Then you have an equals sign, which is basically an assignment operator. And then you have the value. And the value's always going to be contained within quotation marks. Now there is basically two types of attributes. There is informative, which is this in giving extra information about the element and there is functional. So, for something like a link which is done using an anchor element. There is a attribute called href.
And the href attribute tell the browser were to go when the link is clicked. So, some attributes are really important and functional. Whereas other attributes are merely just giving the browser or user agent a little bit more information about that element. I don't need this attribute, so I'm going to get rid of it. Now just to kind of show you that what we're doing does make a difference, I'm going to save this and if I go over to my browser and refresh this. Nothing really happens. The reason for that is that paragraphs are kind of the default elements in HTML. If a browser sees text that's outside of an element.
It's going to assume that you wanted that to be a paragraph, and it's going to render it like that. So if you want to actually see your tag making a difference, then we're just going to change it. So if I come over here, and change paragraph to h1. And I have to do that both for the opening and closing tags. H1 stands for heading one. That's a top level heading. So now I have an opening and a closing h1 tag instead of a p tag. If I save this. Go back to my browser and refresh. Now we see a difference, because the browser is saying, oh. That's a heading one, and so you get its default H1 rendering, which is sort of big and bold.
So I'm going to go ahead and get rid of that and just change this back to a paragraph. So at this point, we've talked a little bit about how we can identify content on the page. Simply by using the tag that represents the type of content we want to display. Easy enough. Now, HTML syntax also allows us to create more complicated structures by nesting one element inside of another one. So let's say within this paragraph that we had some text that we wanted to emphasize, for example, this last sentence. Well, if in front of the second sentence here I added an emphasis tag, or em,.
If I started an instance tag, I could close that before the closing paragraph tag. And then what I've done, is I've emphasized this last sentence. Now, this is called nesting, and essentially, it makes the paragraph tag a parent tag, and it makes the emphasis element a child element. So we have parent elements, and we have child elements. And we can nest them together to create these more complex structures. If I save this and test it you can see that the last sentence is now italicised which is being emphasized. Now there are rules around this nesting.
Certain tags for example can't nest inside of other tags and that's just one of those thing you have to learn. The other thing that you have to learn is the syntaxual rule that if you open a child element the child element has to close before its parent element. For example, let's take this word paragraph maybe I want it to strongly emphasize that text. So in front of paragraph if I gave it a strong tag. And you can see that the characters that are used to identify the tags are not always single characters. In fact it's very rare that they are single characters.
In this case strong for a strong tag. Well if I wanted to close that I couldn't come out here. And close the strong tag. This wouldn't work. But this would be invalid code. So essentially, if I wanted to close the strong tag. Because the strong tag was inside the emphasis tag, and also inside the paragraph tag. It would have to close before the emphasis tag. So I would need to move this right here. In order to have proper syntax. So now my strong tag is closing fist, followed by the m-tag, followed by the paragraph tag.
And if I save this and refresh my browser you can see that that's rendered within the browser itself. Okay, so those are the basics of HTML syntax, and it took us a little longer than five minutes, but not too much longer. So, just remember, content in HTML is identified by wrapping it in an HTML tag. You can also further enhance those usually with attributes. That can either tell you more about the element, or it can provide additional functionality for you. So from this point forward, it's really just a matter of learning the different HTML tags.
When it's appropriate to nest them, and which tags you can nest inside of one another. And then the attributes that you can use with each of them.
- Why is HTML important?
- Exploring an HTML document
- Formatting content
- Displaying images
- Using nav, article, and div elements
- Linking to pages and downloadable content
- Creating lists
- Controlling styling (fonts, colors, and more)
- Writing basic scripts