What is HTML and how is it structured?

- [Instructor] HTML: a mysterious thing you've heard about for years. You know it's required in order to make a website work. You know it as maybe a little bit scary or frustrating, and certainly a bit mysterious. Even though it's fundamental to running the Web, you don't know much about it. But now you're being called on to edit some website, and you'd like to know more. So, let's start with the basics. HTML is the hypertext markup language. That's what HTML stands for. But that doesn't mean much, does it? What on earth are we talking about? According to the World Wide Web Consortium, hypertext is a word that was coined in the 1960s to mean text which contains links to other texts. The website Tech Terms defines a markup language as a computer language that uses tags to define elements within a document. HTML is one of the most commonly used markup languages. So, put that all together, and what does that mean? HTML is all about identifying commonly used structural elements like paragraphs, headings, lists, links, and more. We are going to use tags to identify these elements in our text, so computers will understand the structure of the document. This will help with searching documents, search engine optimization, and making documents accessible to those with disabilities. So, let's go over those key points again. First, HTML is all about the page structure. Notice we haven't mentioned making something blue or a different font; that's not part of HTML. That's CSS, or cascading style sheets, which are beyond the scope of this course. Your web browser has a certain horrible ugly look that it assigns to raw HTML, but HTML has no inherent look of its own. CSS can be used to make your webpage look however you want it to look. Second, HTML is all about the tags. There's a tag for every need, it seems like. I'll go over several of the most commonly used tags in this course, but there are many other tags that you can work with. Finally, the right tag for the right structure. If you're representing a paragraph, use a paragraph tag. If it's a quote, use a quote tag. We'll talk more about this in future videos. So, let's quickly go through how HTML is formed. Here's an example of a link in HTML. The link is made up of opening and closing tags, in this case, the "a" tag. "A" stands for anchor, and it's used in creating links. Together, the two tags are called an element. Think of elements as nouns. This is the name of the type of content, in this case, a link. You'll notice, in the opening tag, we have a modifier available to us called an attribute. Attributes are adjectives, providing more information about the tag. The "href" attribute stands for hypertext reference. In other words, where do we want this link to go? The words in between the opening and closing tags are the text affected by the tags. In this case, this text will function on the page as a link. How will it look? Well, that depends on what the CSS says. By default, links are blue and underlined according to our browser's style sheet, but it's likely your website developers have overridden that behavior and made it look somewhat different. Finally, you can have tags nested inside of tags. Here, I've used the paragraph element, or "p" element, to wrap around our text. I moved the location of the "a" tag to just surround the words "LinkedIn Learning website." Notice that tags are nested inside of each other, like wooden dolls. The "a" tag is completely contained within the paragraph. That's the proper way to work with your HTML tags. You can't close the paragraph before all of the tags inside are closed. Occasionally, you'll find a tag that doesn't need to be closed, like the "image" tag. But generally, tags are required to be closed. Now that you've been introduced to the concepts of a tag, and attribute in how tags nest, let's look at other tags in our HTML document.