00:00Hello, welcome to the Transcendent. In this video, we'll learn the structure of HTML elements.
00:20Let's dive straight in. HTML appears like this. Here, P means paragraph. We create this HTML by
00:28beginning with a less than symbol, followed by the right letter or term or short term,
00:33and ending with a greater than symbol. That forms what's called a tag, an HTML tag. Essentially,
00:40all HTML code looks like this. The format itself is quite simple. The harder part is knowing which
00:47tags to use when. There are two types of tags, two varieties, opening tags and closing tags.
00:55This P is an opening tag. The closing tag is nearly identical, but includes a slash,
01:02less than symbol, a forward slash, the letter or term matching the tag we're closing,
01:08and a greater than symbol. To format a paragraph correctly, we place an opening tag at the start
01:13of the paragraph and a closing tag at the end, like this. The opening tag signals the start,
01:19the content sits in the middle, and the closing tag signals the end. These opening and closing tags
01:26always work together as pairs. The entire structure is called an element.
01:34Not every element needs a closing tag. We'll explore some of those later. But many HTML elements
01:41have both an opening and a closing tag. Here are a few examples. A paragraph is enclosed in P tags.
01:48A headline is enclosed in H1 tags. An article is enclosed in an article tag.
01:54We'll cover numerous HTML elements in this course, learning their specific uses. So don't stress
02:01about it now. Just grasp the basic structure for now.
02:06The markup expresses intent and significance. It gives computers a method to comprehend more about
02:13what the content or interface represents to humans. HTML creates a bridge of meaning between the human
02:19realm and the computer realm.
02:24Let's examine another example. Here we have a brief paragraph.
02:29This paragraph contains text that's highlighted for impact.
02:33The entire paragraph is enclosed in opening and closing P tags.
02:37And within the paragraph, we have a phrase that's highlighted, made into another element by enclosing
02:43it in opening and closing M tags. We'll clarify the M element later. Just observe how one HTML
02:51element can be nested within another. In fact, a complete HTML document is a collection of HTML elements
03:00all nested inside one another. If you studied computer science, you may notice that nesting elements like this
03:09forms a tree, a document tree. Or if you're not a tech enthusiast, then perhaps picture a family tree with
03:16parents, children, and siblings. The browser focuses on the structure of how HTML elements are nested,
03:23and it builds a large family, tree-showing who's connected to whom and how.
03:29Or, using precise technical terms, it constructs a DOM or DOM, document object model, tree from the
03:37data framework. The DOM or DOM tree becomes relevant when you write CSS or JavaScript, or when your
03:45developers do. The browser then uses the DOM or DOM tree to form an accessibility tree.
03:52We'll discuss accessibility later. Your selection of HTML elements shapes the experience of users on
04:00your website, including those with a broad range of diverse disabilities. It all begins with nesting
04:06HTML elements. Here is a slightly more concrete example of how HTML is nested. We have a structured
04:16article on our webpage. We observe the opening tag for the article at the start, followed by a prominent
04:22headline, then three distinct paragraphs. The final paragraph includes a phrase of highlighted text
04:28for emphasis within it, and the entire structure is neatly sealed at the end with a closing article
04:34tag. Notice how this clear framework informs the browser that this article comprises one headline and
04:40three paragraphs in a specific order? Anything placed after the closing article tag will still appear
04:46on the same HTML page, but the browser will distinctly recognize it as content outside this article's
04:52boundaries. It follows the article in the page's layout. The placement of opening and closing HTML tags
05:01and how we nest elements within one another is crucial for webpage structure. We utilize this method to
05:07express significance about content and user interfaces in a clear manner. Where does that paragraph begin on
05:14the page? Where does it conclude in the layout? One of the simplest errors in HTML is neglecting to include
05:20the closing tag at an element's end. So, always remember to add the closing tag properly.
Comments