1.2 HTML tags - Video Tutorials & Practice Problems

<v Instructor>As indicated by the name,</v> HyperText Markup Language, HTML is a markup language, and not a programming language. That means HTML will let us change the appearance of documents, but it doesn't involve using programmatic structures like functions, loops, data structures, and so on. Although it is true that a significant proportion of the HTML on the web is produced by computer programs, and we'll be learning how to do that, later in the learn in our sequence. The HyperText part of HTML, refers to links between documents. This might seem obvious now, but when HTML started in 1993, this was a new idea. And it was novel and important enough to make it into the name of the markup language. One of the great things about HTML is that it is plain text, which means that it can easily be transmitted from one machine to another. It can be processed by computer programs. And it can be edited with a text editor. As a way of demonstrating what HTML looks like, let's get started by opening up a sample document using Atom, the text editor mainly featured in Learn Enough Text Editor to Be Dangerous. Just gonna open up foo.html here. We're not actually gonna keep this. And I'm just gonna give an example of one particular kind of tag. So this is what's known as the strong tag, which is a typical HTML tag. So you can see here that an HTML tag starts with an angle bracket. Then there's the name of the tag and a closing angle bracket. And then the closing tag here, is the same as the opening tag, just with a slash here, forward slash. And inside of the tag is the content. As we'll see later in this tutorial, there's another common tag form called a self-closing tag, but this tag form is the most common. Let's take a quick look at it. You can see here that the strong tag, results in the text being made strong, which in this case, is interpreted by the browser as being bold. We can contrast this text with some regular text as follows. Here's some lorem ipsum text. Actually, let me turn on word wrap here. Soft Wrap in Atom. Let's refresh it. There we go. So you can see this is bold and this is regular. By the way, this strong tag is what's known as a semantic tag because the name of the tag describes what the tag does from a conceptual point of view, rather than from a rendering point of view. In contrast, we could use the bold tag, which is B. This. This is an older tag, but it still works. Let's see here. But nowadays, it's a common convention to use semantic tags whenever possible because they more clearly communicate the meaning of the tag, at a level that could be used say, by an automatic program. And without over specifying how the browser should treat the tag. From a conceptual point of view, this is pretty much all there is to HTML. HTML consists of tags, like strong, that tell the browser how to change the appearance of text or how to format it. But of course, there are a huge number of details, and those details are what we'll be covering through the rest of this tutorial. It's cleaned up here. We don't need this anymore. There we go.