[Bài đọc] Hợp nhất mã nguồn (Merging) và Đồng bộ giao diện

1. Mục tiêu của bài đọc

• Vận dụng được kỹ thuật hợp nhất (Merging) trong Git để gộp các tính năng đã hoàn thiện vào mã nguồn chính một cách an toàn.

• Sử dụng được các thẻ HTML ngữ nghĩa (Semantic tags như <header>, <main>, <section>) để xây dựng bố cục tổng thể của trang web.

• Kết hợp thành công Danh sách điều hướng (<ul>/<ol>) từ nhánh phụ vào đúng vị trí bên trong cấu trúc Semantic của nhánh chính.

2. Giới thiệu

Ở bài học trước, bạn đã "photo" ra một bản sao (nhánh feature-menu) để an tâm xây dựng thanh Điều hướng (Navigation) mà không lo làm hỏng mã nguồn gốc.

Bây giờ, thanh Menu của bạn đã hoàn thiện. Câu hỏi đặt ra là: Làm sao để đưa nó trở lại bản gốc? Quá trình "kẹp" bản nháp đã hoàn thiện vào cuốn sách chính thức được gọi là Hợp nhất (Merging).

Tuy nhiên, bạn không thể cứ thế ném bừa thanh Menu vào trang web được. Một ngôi nhà cần có móng, có tường, có mái nhà rõ ràng. Trang web cũng vậy, nó cần các khu vực phân minh: phần đầu trang để chứa Menu, phần thân để chứa nội dung chính. Đó là lúc chúng ta cần đến sức mạnh của các Thẻ ngữ nghĩa (Semantic Tags).

Bài học này sẽ giúp bạn đóng vai một "tổng công trình sư", vừa điều phối mã nguồn bằng Git, vừa quy hoạch giao diện bằng HTML.

3. Khái niệm

• Merging (Hợp nhất): Là thao tác trong Git giúp lấy toàn bộ mã nguồn (code) từ một nhánh khác (ví dụ nhánh feature-menu) và gộp (trộn) nó vào nhánh bạn đang đứng (thường là nhánh main).

• Web Semantic (Web ngữ nghĩa): Là cách viết HTML sử dụng các thẻ có "tên gọi mang ý nghĩa rõ ràng" thay vì dùng thẻ <div> vô nghĩa cho mọi thứ.

  • <header>: Đại diện cho phần đầu trang (thường chứa logo và thanh Menu).

  • <main>: Chứa nội dung cốt lõi, quan trọng nhất của trang.

  • <section>: Một phân vùng nội dung cụ thể (ví dụ: Khu vực giới thiệu, Khu vực sản phẩm).

  • <footer>: Phần chân trang (chứa bản quyền, thông tin liên hệ).

4. Giải thích

• Nguyên tắc "Đứng ở đâu, kéo về đó" của Git Merge: Hãy tưởng tượng bạn đang đứng trong phòng khách (main) và muốn mang chiếc ghế bạn vừa đóng ở ngoài sân (feature-menu) vào. Bạn BẮT BUỘC phải đứng ở phòng khách, rồi gọi người mang chiếc ghế vào. Trong Git cũng vậy, muốn gộp nhánh phụ vào main, bạn phải chuyển về nhánh main trước.

• Tại sao phải dùng Semantic Tags? Việc gom thanh Menu (<nav>, <ul>) vào bên trong <header>, và gom các bài viết vào <section> giống như việc xếp đồ đạc vào đúng tủ, đúng phòng. Nó không chỉ giúp Lập trình viên dễ tìm lỗi, mà còn giúp Google hiểu trang web của bạn tốt hơn để xếp hạng cao trên kết quả tìm kiếm (SEO).

5. Ví dụ

Ví dụ 1: Quá trình Hợp nhất (Merge) bằng dòng lệnh

Thanh Menu của bạn đã làm xong trên nhánh feature-menu. Bây giờ, bạn muốn gộp nó vào nhánh main.

Mã lệnh Git:

// Bước 1: Chuyển về nhánh gốc (phòng khách)
git checkout main 
(hoặc git switch main)

// Bước 2: Kéo code từ nhánh feature-menu gộp vào nhánh main hiện tại
git merge feature-menu

Giải thích: Nếu không có lỗi gì xảy ra, Git sẽ báo "Fast-forward" hoặc "Merge made". Vậy là toàn bộ code Menu đã xuất hiện an toàn trên nhánh main!

Ví dụ 2: Xây dựng bộ khung Semantic trên nhánh main

Trước khi gộp Menu vào, nhánh main của bạn cần có một bộ khung nhà vững chãi. Chúng ta sẽ dùng các thẻ Semantic để dựng khung.

Mã nguồn HTML (Bố cục tổng thể):

Ví dụ 3: Sự Đồng bộ giao diện hoàn hảo (Kết quả sau khi Merge)

Sau khi gõ lệnh git merge, mã nguồn Menu của bạn (chứa <nav> và <ul>) đã được kết hợp mượt mà vào bên trong thẻ <header>.

Mã nguồn HTML hoàn chỉnh:

6. Phần chú ý và lỗi hay gặp

• Đứng nhầm nhánh khi Merge: Lỗi kinh điển nhất của người mới học. Đang đứng ở nhánh feature-menu nhưng lại gõ lệnh git merge main. Hệ quả là bạn đang mang toàn bộ phòng khách vứt ra ngoài sân! Hãy luôn gõ git branch để chắc chắn mình đang đứng ở main (có dấu * ở chữ main) trước khi thực hiện merge.

• Căn bệnh "Div Soup" (Súp thẻ Div): Rất nhiều bạn lạm dụng thẻ <div> để làm mọi thứ: <div id="header">, <div id="menu">, <div id="footer">. Trang web vẫn chạy bình thường, nhưng mã nguồn sẽ trông như một mớ hỗn độn (soup) không có ý nghĩa. Hãy thay thế ngay bằng <header>, <nav>, <footer> nhé.