From the course: HTML Essential Training

The syntax of HTML elements - HTML Tutorial

From the course: HTML Essential Training

Start my 1-month free trial

The syntax of HTML elements

“

- Let's jump right in. HTML looks like this. In this case, p stands for paragraph. We make this HTML by starting out with a less-than symbol, followed by the correct letter, or word, or abbreviated word, and finishing with a greater-than symbol. That makes what's called a tag, an HTML tag. Basically, all HTML markup looks like this. The syntax itself is fairly simple. The trickier part is knowing which tags to use when. There are actually two kinds of tags, two flavors, opening tags and closing tags. This p is an opening tag. The closing tag is very similar, but it has a slash in it. Less-than symbol, a forward slash, the letter or word that matches the tag that we're closing, and a greater-than symbol. To markup a paragraph properly, we use an opening tag at the beginning of the paragraph, and then a closing tag at the end, like this. The opening tag marks the beginning, the content goes in the middle, and the closing tag marks the end. These opening and closing tags travel the world together, in pairs. The whole thing is called an element. Now, not every element has a closing tag. We'll be looking at some of those later. But a lot of the HTML elements do have both an opening and a closing tag. Here are some other examples. There's a paragraph wrapped in p tags. We wrap a headline in h1 tags. An article is wrapped in an article tag. We'll be going through dozens of HTML elements in this course, learning when to use each one, so don't worry about that yet. Just understand the basic mechanics for now. The markup conveys purpose and meaning. It provides computers a way to understand more about what the content, or the interface, means to humans. HTML provides a connection of meaning between the human world and the computer world. Let's take a look at another example. Here, we have a very short paragraph. This paragraph has text that's emphasized for effect. The whole paragraph is wrapped in opening and closing p tags, and then, inside the paragraph, we have another phrase, text that's emphasized. And we made that into another element by wrapping it in opening and closing em tags. I'll explain the em element later, just notice how one HTML element can be nested inside of another. In fact, and entire HTML document is a whole bunch of HTML elements all nested inside of each other. If you've studied computer science, you may recognize that nesting elements like this will create a tree, a document tree. Or if you aren't a comp-sci geek, then maybe imagine a family tree with parents, and children, and siblings. The browser pays attention to the structure of how HTML elements are nested, and it creates a big family tree out of who's related to who, and how. Or, said in the correct technical terminology, it builds a DOM tree from the data structure. The DOM tree comes into play if you write CSS or JavaScript, or when your developers do. The browser then uses the DOM tree to create an accessibility tree. We'll talk about accessibility, too. Your choice of HTML elements affects the experience of users on your website, including people with a wide range of different disabilities. It all starts with nesting HTML elements. Here is a slightly more practical example of how HTML is nested. We've got an article. We can see the opening tag for the article at the beginning, then inside is a headline, followed by three paragraphs. That last paragraph has a phrase of emphasized text inside. And the whole thing is closed at the end with a closing article tag. See how this structure tells the browser that this article is made up of one headline and three paragraphs? Anything that comes after the closing article tag will be displayed on the same HTML page, but it will be understood by the browser to be outside of this article. It's after the article. It matters where we open and close our HTML tags, and how we nest elements inside of each other. We use this to convey meaning about content and interfaces. Where does that paragraph start? Where does it end? One of the easiest mistakes to make in HTML is to forget to put the closing tag at the end of an element. So don't forget, include the closing tag.

Contents