Hướng dẫn how to section html - làm thế nào để phần html

  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học HTML/HTML5

Định nghĩa và sử dụng

Tag định nghĩa một khu vực (vùng bao) trong văn bản HTML.

Tag bên trong thường chứa một và nội dung.

Cấu trúc

Tiêu đề section

...

Ví dụ

HEADER
CONTENT
ARTICLE
  • BOX 1
  • BOX 2
  • BOX 3
  • BOX 4
FOOTER

Hướng dẫn how to section html - làm thế nào để phần html

  • Trang chủ
  • Tham khảo
  • Tag html
  • html5

Định nghĩa và sử dụng

Tag định nghĩa một khu vực (vùng bao) trong văn bản HTML.

Sự khác nhau giữa HTML4.01 và HTML5

HTML4.01HTML5
● Không hỗ trợ ● Đây là tag mới trong HTML5

Cấu trúc

Định nghĩa và sử dụng

Tag định nghĩa một khu vực (vùng bao) trong văn bản HTML.

Tiêu đề section


Nội dung section


Sự khác nhau giữa HTML4.01 và HTML5

● Không hỗ trợ

● Đây là tag mới trong HTML5

Cấu trúc

Html viết:

section {
    display: block;	
}

Tiêu đề section Nội dung section

Trình duyệt hỗ trợ

(function (){
    var els = [	'section', 'article', 'hgroup', 'header', 'footer', 'nav', 'aside', 
	'figure', 'mark', 'time', 'ruby', 'rt', 'rp' ];
    for (var i=0; i

Yêu cầu phiên bản trình duyệt với mức tối thiểu được hỗ trợ cho thẻ :

Trình duyệt dành cho PC:

Tag được hỗ trợ trong đa số các trình duyệt, tuy nhiên các trình duyệt IE6, IE7, IE8 muốn hiển thị đúng thì cần phải có thêm css và javascript hỗ trợ:

Css viết:

Javascript viết:

Đoạn javascript này sử dụng chung cho cả các tag: , , , , , , , , , , , ,

Css viết:

Javascript viết:

Đoạn javascript này sử dụng chung cho cả các tag: , , , , , , , , , , , ,

Thiết bị hỗ trợ

Yêu cầu phiên bản hệ điều hành và trình duyệt với mức tối thiểu được hỗ trợ cho thẻ :

ĐIỆN THOẠI (SMARTPHONE)

Điểm bài viết

[Tổng cộng: 9 Trung bình: 4.1]9 Trung bình: 4.1]

Một trong những lý do giúp Mid và Senior khác biệt với trình độ Junior trong phát triển web cơ bản chính là việc đặt tên class cho các element của markup sao cho gọn, dễ nhớ và dễ sử dụng.đặt tên class cho các element của markup sao cho gọn, dễ nhớ và dễ sử dụng.

Tại sao bạn cần đặt tên class?

Mỗi loại element trong website của bạn thường được sử dụng nhiều lần, chẳng hạn ảnh, video hay các đoạn Heading text. Nếu bạn không đặt tên (ở đây là gán class) mà chỉ đơn thuần sử dụng nó như

Hướng dẫn how to section html - làm thế nào để phần html
Ví dụ về các CTA Block (ảnh: elegantthemes.com)

Bạn cần làm gì để đặt tên class đúng?

Điều đầu tiên là bạn cần nắm vững cấu trúc markup của chuẩn HTML5 đang rất phổ biến hiện nay. Ví dụ như bố cục layout default trông sẽ phải gồm các đối tượng nào.

Tiếp đến là bạn phải nắm được quy ước của tổ chức (Code Standards), chẳng hạn như sử dụng BEM, hoặc kiểu đặt tên class composit thì sẽ ra sao.

Sau cùng, bạn cần trải nghiệm nhiều, càng nhiều càng tốt, với nhiều website và các kiểu website khác nhau.

Trong phần giới thiệu sau đây, Code Tốt sẽ đưa ra những ví dụ cơ bản về cấu trúc sắp xếp theo

 để các bạn hình dung.

Các kiểu cấu trúc section phổ biến

Khi nào bạn có thể sử dụng
?

Bạn có thể sử dụng tag này khi có Heading Text và các nội dung trình bày bên trong bố cục layout của bạn. Ví dụ như code dưới đây:

Các element nào sẽ xuất hiện trong
?

Ta sẽ sắp xếp theo thứ tự quan trọng sự xuất hiện nhé.

Heading Text

Heading sẽ xuất hiện theo thứ tự, có thể từ H1 hoặc H2 và đi dần xuống. Thông thường càng Heading nhỏ thì số lượng càng nhiều. Hiếm khi ta có 1 Heading 2 và ở dưới chỉ có 1 Heading 3 vì như vậy tính chất SEO không bền vững.

Ta sẽ đặt lần lượt như sau:

  • Headline (thường là H1 hoặc H2)
  • Title (thường là H3)
  • SubTitle (thường là H4)
  • SubHeading

Ngoài ra, các bạn designer thường đặt tên theo 1 cách khác trong thiết kế:

  • Main Title (H1)
  • Secondary Title (H2)
  • Main Heading (H3)
  • Sub-heading (H4)
  • Label (H5-H6)

Dưới đây là 1 ví dụ, khi ta coi “Heading” ở tầng level 2 (thấp hơn) là Title, chứ không còn là Heading nữa.

Header

Nhiều người biết đến HTML5 và

 tag, nhưng lại chỉ dùng nó để làm Header trên cùng website mà ít sử dụng nó ở chỗ khác. Trong
 hoàn toàn sử dụng được
 nhưng yêu cầu phải là bên trong chứa 1 Heading Text và 1 đoạn paragraph như thế này nhé:

 Article

Thẻ

HEADER
CONTENT
ARTICLE
  • BOX 1
  • BOX 2
  • BOX 3
  • BOX 4
FOOTER
2 cũng là một gợi ý hay nếu bạn có nhiều bài viết và muốn hiển thị dưới dạng trình bày thông tin. Lưu ý các thẻ này cần chứa 1 Heading (thường là Title của bài viết) và 1 đoạn paragraph, và tốt hơn kèm thêm cả ảnh và link tới bài viết đó ở trang riêng (single).

Đặt tên class trong section như thế nào?

Việc đặt tên class cho section có thể ảnh hưởng tới các element bên dưới, nên bạn cần lưu ý một số quy tắc để tránh việc đặt tên class dẫn tới nhập class bị dài và khó nhớ.

Các quy tắc đặt tên class cho section hay 1 module

  1. Tên ngắn gọn, không quá 3 từ và cũng không nên chỉ duy nhất 1 từ hoặc 1 chữ cái. Đừng viết tắt. Các trường hợp đặc biệt cần tính đến là các module/section global scope, ví dụ
    HEADER
    CONTENT
    ARTICLE
    • BOX 1
    • BOX 2
    • BOX 3
    • BOX 4
    FOOTER
    3,
    HEADER
    CONTENT
    ARTICLE
    • BOX 1
    • BOX 2
    • BOX 3
    • BOX 4
    FOOTER
    4 hay
    HEADER
    CONTENT
    ARTICLE
    • BOX 1
    • BOX 2
    • BOX 3
    • BOX 4
    FOOTER
    5 mà thôi. Ví dụ: Hợp lý:
    HEADER
    CONTENT
    ARTICLE
    • BOX 1
    • BOX 2
    • BOX 3
    • BOX 4
    FOOTER
    6,
    HEADER
    CONTENT
    ARTICLE
    • BOX 1
    • BOX 2
    • BOX 3
    • BOX 4
    FOOTER
    7,
    HEADER
    CONTENT
    ARTICLE
    • BOX 1
    • BOX 2
    • BOX 3
    • BOX 4
    FOOTER
    8 Không hợp lý:
    HEADER
    CONTENT
    ARTICLE
    • BOX 1
    • BOX 2
    • BOX 3
    • BOX 4
    FOOTER
    9,
    section {
        display: block;	
    }
    0,
    section {
        display: block;	
    }
    1
    Ví dụ:
    Hợp lý:
    HEADER
    CONTENT
    ARTICLE
    • BOX 1
    • BOX 2
    • BOX 3
    • BOX 4
    FOOTER
    6,
    HEADER
    CONTENT
    ARTICLE
    • BOX 1
    • BOX 2
    • BOX 3
    • BOX 4
    FOOTER
    7,
    HEADER
    CONTENT
    ARTICLE
    • BOX 1
    • BOX 2
    • BOX 3
    • BOX 4
    FOOTER
    8
    Không hợp lý:
    HEADER
    CONTENT
    ARTICLE
    • BOX 1
    • BOX 2
    • BOX 3
    • BOX 4
    FOOTER
    9,
    section {
        display: block;	
    }
    0,
    section {
        display: block;	
    }
    1
  2. Tên class cần phản ánh chức năng hoạt động của module/section về mặt kĩ thuật (hơn là loại content). Lý do là ta tổ chức theo hướng tái sử dụng nên việc truyền dữ liệu gì không quan trọng bằng việc thống nhất bố cục và đáp ứng khả năng hiển thị về mặt kĩ thuật. Ví dụ: Hợp lý:
    section {
        display: block;	
    }
    2,
    section {
        display: block;	
    }
    3,
    section {
        display: block;	
    }
    4 Không hợp lý:
    section {
        display: block;	
    }
    5,
    section {
        display: block;	
    }
    6,
    section {
        display: block;	
    }
    7
    Ví dụ:
    Hợp lý:
    section {
        display: block;	
    }
    2,
    section {
        display: block;	
    }
    3,
    section {
        display: block;	
    }
    4
    Không hợp lý:
    section {
        display: block;	
    }
    5,
    section {
        display: block;	
    }
    6,
    section {
        display: block;	
    }
    7

Hầu hết trong các tình huống ta gặp phải, các module và class sẽ trùng tên nhau để dễ quản lý cả về cấu trúc markup và styling.

Bạn có thể tham khảo demo template miễn phí trên Github này của mình để nắm được các module mình bóc tách ra và gọi vào từng page như thế nào.

Hướng dẫn how to section html - làm thế nào để phần html
Ví dụ về bố cục Grid

Kết hợp từ, cụm từ trong đặt tên class cho section

Những từ và cụm từ sau có thể cân nhắc sử dụng và kết hợp:

  1. Nhóm CTA (có đính kèm 1 button/link dạng CTA): hero, intro, callout, newsletter
  2. Nhóm bố cục (chia cột): list, grid, gallery, mosaic, collection, three-up, four-up, detail, row
  3. Nhóm nội dung: text, menu, single-image
  4. Nhóm đối tượng con: card, item, block
  5. Nhóm tính năng: slider, carousel, search, social-links, social-sharing, testimonials, widget, accordion, nav-trigger

Các gợi ý đặt tên cho element trong

Sau khi đặt tên class cho

section {
    display: block;	
}
9, ta sẽ tiến hành thêm các class cho các element bên trong nó. Dưới đây là các gợi ý giúp bạn hình dung các lớp đối tượng được dễ dàng hơn.

Section Header

  1. Headline
  2. SubHeadline
  3. Description hoặc Intro (thường nên đặt là Description)

Section Navigation

  1. Navigation hoặc Menu
  2. (Nhỏ hơn) Menu Item

Section List

  1. List hoặc Grid
  2. (Nhỏ hơn) Item hoặc Card

Section Layout (Nếu có layout 2 cột, trong đó 1 là sidebar) (Nếu có layout 2 cột, trong đó 1 là sidebar)

  1. Blocks hoặc Layout
  2. (Nhỏ hơn) Block (left + right), Aside và Main

Section Footer (thường chứa button CTA) (thường chứa button CTA)

  1. CTA hoặc Button
  2. Footer Bottom Text

Để tránh việc section chứa quá nhiều level, bạn nên sử dụng việc nhúng module nào vào section khác. Kết quả của việc này chẳng hạn sẽ như sau:

Kết luận

Code Tốt hi vọng bài viết sẽ hữu ích và giúp bạn tránh mất thời gian vào việc đặt tên class cho section và các element. Đừng quên đặt câu hỏi nếu bạn có điều gì chưa rõ nhé.

4.312đánh giá 12 đánh giá

Đánh giá bài viết

Post Views:4.772 4.772

Điều hướng bài viết