DONATE  
MENU
MYSQL
CSS
JSON
HTML
JAVASCRIPT
AJAX
PHP

HTML Tutorials

INTRODUCTION

» Introduction to HTML

» PRACTICE IT Editor

» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols

TAGS/ELEMENTS

» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata

ATTRIBUTES

» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width

HTML FORMS

» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select

HTML EXAMPLE

» Login Page

.. » HTML » Introduction » Nesting Tags
Share Tweet WhatsApp

Nesting Tags

Nesting of tags is the act of having other tags inside a tag. Most of your defined HTML elements will also have tags inside of them defining other elements. Such tags are known as nested tags.
<div>Hello, <p><b>How may I help you?</b></p></div>

Copy PRACTICE IT

In the above, the <div> element have inside of it some elements which comprises of another element created with the <p> tag and inside that <p> element is another element, the <b> element. In this case, the <div> tag is the parent tag while the <p> tag is its child. The <p> tag also has a child, the <b> tag. The importance of understanding the nesting of tags is that it will help you in understanding how to properly close tags whose concept is for you to close the child element first before the parent element. WRONG NESTING
<p><b></p></b>
RIGHT NESTING
<p><b></b></p>
Study How The Below Was Nested. Identify The Parents & Children
<!DOCTYPE html>
<html>
<head>
<title>My WebPage</title>
</head>
<body>
<h1>Welcome To My Webpage</h1>
</body>
</html>

Copy PRACTICE IT

SUMMARY
  1. Nesting of tags is the process of having a tag inside another. For example, <p><img/></p>.
  2. A tag created inside another tag is called a nested tag and is a child to the tag it was nested in.
  3. Building elements involves the nesting of tags to achieve what we want.
  4. Understanding how to nest tags translates to understanding how to properly close tags because the rule stipulates that a child tag be close before a parent tag.
    <div><p><b>Hello Jay</p></div></b> <!-- WRONG -->
    <div><p><b>Hello Jay</b></p></div> <!-- CORRECT -->
Take a short quiz on Nesting Tags.
Ask a question or tell us if Nesting Tags is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode