Quan hệ giữa các thẻ html cơ bản

Một tài liệu html hoàn chỉnh bao gồm các thẻ html, có quan hệ với nhau tạo thành. Ở bài trước, chúng ta đã được học về cấu trúc các thẻ html. Và hôm nay, chúng ta sẽ học về mối quan hệ giữa các thẻ html. Về cơ bản thì các thẻ html khi kết hợp với nhau sẽ tạo nên các quan hệ cha - con, và trước - sau. 

Quan hệ cha - con

Thẻ A được gọi là con của thẻ B khi thẻ A nằm trong phần nội dung của thẻ B. Và khi này, thẻ B đồng thời được gọi là cha của thẻ A. 

Lưu ý: 

Thẻ không đầy đủ thì không có thẻ con vì không có phần nội dung.

Quan hệ cha - con trực tiếp

Thẻ A là con trực tiếp của thẻ B khi thẻ A là con của thẻ B và không tồn tại thẻ C thoả điều kiện sau:

1. Thẻ C là cha thẻ A.

2. Thẻ C là con của thẻ B.

Khi này, thẻ B đồng thời là cha trực tiếp của thẻ A.

Xét ví dụ sau về mối quan hệ cha - con, cha - con trực tiếp của các thẻ html:

<div>
    <p>
        <a href='htpps://tutrithuc.com' title='Truy cập website cộng đồng chia sẻ tri thức'>Tủ Tri Thức</a>
        Là cộng đồng chia sẻ tri thức miễn phí hàng đầu tại Việt Nam.
    </p>
</div>

Khi này: 

• Thẻ div là cha của thẻ p và a.
• Thẻ div là cha trực tiếp của thẻ p.
• Thẻ div không là cha trực tiếp của thẻ a.
• Thẻ a là con của thẻ p và div.
• Thẻ a là con trực tiếp của thẻ p.
• Thẻ a không là con trực tiếp của thẻ div.

Quan hệ trước - sau

Thẻ A được gọi là sau thẻ B khi cả A và B đều là con trực tiếp của cùng thẻ C nào đó. Khi này, thẻ B đồng thời được gọi là trước thẻ A.

Quan hệ liền trước - liền sau

Thẻ A được gọi là liền sau thẻ B khi thẻ A nằm sau thẻ B và không tồn tại thẻ C thoả điều kiện sau:

1. Thẻ C nằm trước thẻ A.

2. Thẻ C nằm sau thẻ B.

Khi này, thẻ B đồng thời được gọi là liền trước của thẻ A.

Xét ví dụ sau về mối quan hệ trước - sau, liền trước - liền sau của các thẻ html:

<h1>
    Đăng nhập vào Website tutrithuc.com
</h1>
<form>
    <input type='text' placeholder='Username' />
    <input type='password' placeholder='Password' />
    <button type='submit'> Đăng nhập </button>
</form>
<div>
    <a href='register' title='Đăng ký tài khoản mới'>Đăng ký</a>
</div>

Khi này: 

• Thẻ h1 nằm trước thẻ form và div
• Thẻ h1 nằm liền trước thẻ form
• Thẻ h1 không nằm liền trước thẻ div
• Thẻ input không nằm trước thẻ a
• Thẻ div nằm sau thẻ form và h1
• Thẻ div nằm liền sau thẻ form
• Thẻ div không nằm liền sau thẻ h1
• Thẻ a không nằm sau thẻ button

Lưu ý khi các bạn học về mối quan hệ giữa các thẻ html thì cần phân biệt rõ :

• Cha - con với cha - con trực tiếp
• Trước - sau với liền trước - liền sau

Nắm vững lý thuyết về các mối liên hệ giữa các thẻ html với nhau sẽ giúp chúng ta rất nhiều trong quá trình thao tác với DOM bằng javascript, và tạo bộ chọn phần tử html bằng css mà chúng ta sẽ được học ở những bài học sau. 

Bài học tiếp theo chúng ta sẽ học về các thẻ html hiện có, được cập nhật mới nhất 2019. Bạn nào quan tâm thì có thể theo dõi để tìm học.

Luận bàn html:

Html quy định một trang sẽ bao gồm những nội dung gì, sắp xếp ra sao.  Cụ thể là:

+ Gồm những nội dung gì -> tương ứng với có những thẻ html nào

+ Sắp xếp ra sao -> tương ứng các thẻ html đó có quan hệ với nhau như thế nào.