The structure of HTML elements #03 | #theTRANSCENDENT - video Dailymotion

the TRANSCENDENT

The structure of HTML elements #03 | #theTRANSCENDENT https://thetranscendent.org/introduction-why-learn-to-code-in-the-age-of-ai-era-english https://www.youtube.com/watch?v=xV-WC4nSf4g    Understanding HTML Elements: The Building Blocks of Web Pages What are HTML Tags? HTML tags are like labels that tell the browser what each piece of content is. They're written inside angle brackets like p for paragraphs or h1 for headings.  The Basic Structure: Opening tag p - This is a paragraph of text - Closing tag slash p  The opening p tag starts the element Content = Your actual text Closing slash p tag ends the element Key Points:    🌍 Visit our Website: https://thetranscendent.org 👍Facebook: https://www.facebook.com/Transcendentofficials 🐦 X (Twitter): https://x.com/tttranscendent 📸 Instagram: https://www.instagram.com/transcendent.officials/ ▶️ YouTube: https://www.youtube.com/@theTranscendent-official ▶️ Rumble: https://rumble.com/c/c-6380966 ▶️ Dailymotion:  https://dailymotion.com/transcendent.officials 🎵 TikTok: https://www.tiktok.com/@thetranscendent.org 📌 Pinterest: https://in.pinterest.com/transcendentofficials 💬 Discord Server: https://thetranscendent.org 📢 Threads: https://www.threads.net/@transcendent.officials 👻 Snapchat: https://thetranscendent.org 🖼️ Behance: https://www.behance.net/thetranscendentorg      #theTRANSCENDENT #theTRANSCENDENTorg #BeTranscendent #TranscendLimits #Innovation #Creativity  #Inspiration #BeyondLimits #NextLevel #TRANSCENDENTMind #AreYouTRANSCENDENT #TranscendenceChallenge #TranscendentArt #BeyondTheOrdinary #TranscendReality  thetranscendent.org Beyond Thing

Transcript

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.

The structure of HTML elements #03 | #theTRANSCENDENT

Category

Transcript

Recommended