Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

Thẻ span và thẻ div trong HTML

4.2/5 - (8 bình chọn)

Thẻ <span> </span>

Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm vào đoạn văn nhưng không làm thay đổi thuộc tính cũng như hiển thị của đoạn văn đó. Vì vậy chúng được gọi là thẻ trung tính trong HTML. Sự thay đổi của chúng chỉ được thay đổi khi chúng ta tác động chúng bằng CSS. Một điều quan trọng nữa là thẻ <span> là một thẻ inline

Điểm mạnh của thẻ này chính là tính chất trung tính của chúng. Nó chỉ bị thay đổi khi chúng ta tác động bằng CSS. Tôi sẽ lấy ví dụ thế này.

Thẻ span và thẻ div trong HTML the-span-trong-html

Kết quả là:Thẻ span và thẻ div trong HTML kq-the-span-trong-html

Xem thêm: Form trong HTML

Thẻ div

Không giống như thẻ <span> được dùng cho các thành phần nội tuyến, thẻ <div> được sử dụng để định nghĩa một khu vực trong trang web của bạn. Không đặc biệt như thẻ <a>,<img>,<ul>…dùng để hiển thị link, ảnh, danh sách.nhưng thẻ <div> lại có chức năng rất lớn trong việc thiết kế website như: Phân chia hoặc gộp các thẻ, khu vực khác nhau để tiện cho việc quản lý cũng như css cho chúng.

Theo mặc định thì thẻ <div> là một thẻ block, thẻ <div thường được sử dụng kết hợp với CSS để tùy chỉnh layout cho trang web. Hay xem ví dụ sau để hiểu  hơn về cách sử dụng thẻ <div> trong thiết kế website là như thế nào nhé

Khi chưa có CSS:

Thẻ span và thẻ div trong HTML the-div-chua-style-trong-html

Thẻ span và thẻ div trong HTML kq-the-div-chua-style-trong-htmlNhìn đây chúng ta không biết thẻ nào với thẻ nào phải không? Để nhận biết xem thẻ nào nằm ở khu vực nào thì chúng ta cần đến sự trợ giúp của CSS. Tôi có thêm một số thuộc tính của CSS vào đoạn code như thế này, chúng ta cùng xem sự thay đổi của chúng như thế nào nhé

Thẻ span và thẻ div trong HTML the-div-trong-html

Kết quả:

Thẻ span và thẻ div trong HTML kq-the-div-trong-html

Xem thêm: Các thẻ heading và định dạng chữ viết trong văn bản

Chỉ một vài dòng code thôi chúng ta đã biến đổi chúng thành các layout ngăn cách nhau một cách rất rõ ràng và khoa học phải không nào. Tới đây chắc các bạn cũng thắc mắc là lúc thì tôi bảo là thẻ block, lúc thì thẻ inline. Vậy block là gì? Inline là gì?

BlockInline là hai khái niệm cơ bản nhưng rất quan trọng khi bạn bắt tay vào thiết kế website. Hầu hết các thành phần trong HTML đều thuộc block hoặc inline.

Block là thuật ngữ chỉ chung các thẻ HTML có chức năng tạo ra một khối và khối này sẽ hiển thị mở mỗi dòng riêng biệt và trong HTML có một số thẻ block như: <h1>, <p>, <ul>, <table>.

Inline là thuật ngữ chỉ chung các thẻ HTML mà khi khai báo vào nội dung thì nó sẽ vẫn nằm chung một dòng với các thẻ khác trong văn bản. Khi muốn gộp các thẻ inline lại với nhau ta dùng thẻ <span> mà chúng ta vừa nghiên cứu ở trên. Một số thẻ inline như: <i>, <u>, <span>, <a>, <img>

VD: Hai đoạn viết giống nhau nhưng một thẻ block và một thẻ inline, chúng ta cùng xem kết quả thu được như thế nào nhé.

Thẻ span và thẻ div trong HTML the-inline-block-trong-html

Kết quả là:

Thẻ span và thẻ div trong HTML kq-the-inline-block-trong-html

Các bạn thấy sự khác biệt chưa nào, tôi viết chúng trên cùng một dòng nhưng khi hiển thị ra ngoài trình duyệt thì nó lại hiển thị khác nhau. Đó là sự khác nhau giữa thẻ block và inline đó, khá hay phải không nào. Các bạn hãy nắm vững tính chất của mỗi thẻ này để áp dụng cho đúng nhé.

Qua bài này mình đã giải thích cho các bạn thuật ngữ thế nào là thẻ inline, thẻ block trong HTML vì thuật ngữ này rất hay được dùng, và điển hình cho hai thẻ quan trọng đó là thẻ <span> và thẻ <div>. Mình cũng đã hướng dẫn cụ thể qua các ví dụ rồi. Các bạn cố gắng xem kỹ và học theo nhé. Chúc các bạn thành công!

Tin mới nhất

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Bạn là SEOer hay là 1 copywriter chính hiệu? Một trong những công việc khiến bạn nhiều phen đau đầu,...
    23 giây trước
  2. Google là công cụ tìm kiếm lớn nhất hành tinh với lượng truy cập rất lớn mỗi ngày. Để hỗ...
    2 giây trước
  3. Bạn đã bắt đầu một blog, và vài bài đăng đầu tiên của bạn thật tuyệt vời. Từ khoá của...
    20 giây trước
  4. Cách thêm trường tải ảnh trực tiếp vào bảng tùy chỉnh trên website Bảng tùy chỉnh trong trang quản trị...
    14 giây trước
  5. Việt Nam hiện nay đang là thị trường game lớn nhất trong khu vực Đông Nam Á. Tuy chỉ mới...
    17 giây trước
  6. Chắc chắn là hỏi anh em SEO với một câu hỏi dễ ợt thậm chí nhiều bạn coi là dở...
    25 giây trước
  7. Với kinh nghiệm nhiều năm trong việc thiết kế website, Lâm vờ tờ đã trở thành một một quen thuộc...
    18 giây trước
  8. Sau khi đầu tư một loạt thời gian trong việc học những điều cơ bản về SEO. Các chiến thuật mà...
    13 giây trước
  9. Website kinhvietnhathailong.vn là một trong những trang web về các sản phẩm về kính. Bao gồm vách kính cường lực,...
    19 giây trước
  10. Microbelift.vn là website cung cấp những sản phẩm Microbe-Lift của Ecological Laboratories Inc - công ty công nghệ sinh học...
    28 giây trước