Sự khác biệt giữa DIV và SPAN

và là các thẻ HTML xác định các thành phần trong mã HTML.

HTML (Ngôn ngữ đánh dấu siêu văn bản) là mã có cấu trúc được sử dụng để xây dựng và hiển thị các trang web chúng tôi truy cập trực tuyến, hàng ngày, trên mọi thiết bị.

Các công nghệ và ngôn ngữ lập trình khác có thể được tích hợp với HTML để cung cấp các tính năng động và nâng cao trên trang web.

Hiểu HTML

Ngôn ngữ đánh dấu siêu văn bản (HTML) là ngôn ngữ đánh dấu được sử dụng rộng rãi và đề cập đến cấu trúc và mã 'phía sau' một trang web, được hiển thị trong trình duyệt web.

HTML là một tệp văn bản sử dụng mã (cú pháp) cụ thể để xác định kiểu, nội dung, bố cục và định dạng của trang. Các Đánh dấu thuật ngữ chỉ ra văn bản / mã đang được chuẩn bị để xử lý và trình bày tức là trên một trang web, trong trình duyệt web.

World Wide Web Consortium (W3C) [i] công nhận HTML là ngôn ngữ đánh dấu chính thức trong phát triển trang web và do đó, HTML được hầu hết các trình duyệt hỗ trợ. Vì vậy, các trang web có thể được phát triển bằng ngôn ngữ được công nhận, dễ dàng được giải thích bởi các trình duyệt khác nhau để hiển thị trang theo dự định của nhà thiết kế.

Phiên bản hiện tại vẫn được sử dụng là HTML4, nhưng nó đang dần bị loại bỏ khi HTML5 nhận được nhiều sự hỗ trợ và chấp nhận hơn cho các trang web năng động và đáp ứng.

Sự đáp ứng đang trở thành một thành phần cơ bản trong phát triển web để cung cấp trải nghiệm người dùng dễ dàng hơn, năng động hơn, phải được cung cấp trên nhiều thiết bị như điện thoại thông minh, máy tính bảng và máy tính xách tay.

Biểu định kiểu xếp chồng (CSS) đang trở thành một phần không thể thiếu để xây dựng các trang năng động và đáp ứng. Đó là một tệp riêng xác định các thuộc tính cho mọi thành phần như phông chữ, màu sắc, căn chỉnh - vì vậy nhà phát triển không chỉ ra kiểu dáng của phần tử mỗi khi nó được sử dụng trong mã HTML.

Cấu trúc cơ bản của HTML

Để tận dụng tối đa mọi ngôn ngữ phát triển, việc tuân thủ cấu trúc tệp tiêu chuẩn và xem xét sử dụng cú pháp tốt nhất là chìa khóa trong việc cung cấp nội dung web ổn định, có mục đích và hấp dẫn trực quan.

Một trang HTML có cấu trúc được xác định bởi các yếu tố (còn được gọi là thẻ). Khi viết mã HTML, các yếu tố này được hiển thị theo cặp - điều đó có nghĩa là, mọi thẻ đều cần mở và đóng. Bắt đầu và kết thúc.

Một phần tử được mở với cú pháp: và đóng cửa với.  Các / đường xiên chỉ sự kết thúc của định nghĩa của phần tử đó.

Các thuộc tính và nội dung của phần tử được xác định giữa hai điểm đó.

Các yếu tố tối thiểu cần thiết cho một tệp HTML là định nghĩa, (chỉ HTML4) và thẻ.

• Định nghĩa DOCTYPE

Định nghĩa (DTD) trước tiên phải được khai báo là thẻ đầu tiên trong tệp HTML, vì vậy khi trang được xử lý, trình duyệt web sẽ biết loại tệp đó là gì và do đó có thể diễn giải và hiển thị chính xác trang.

Trong HTML4, có các biến thể của DTD (tùy thuộc vào các thuộc tính và thành phần của trang) nhưng các câu lệnh điển hình hơn sẽ được đưa vào như:

hoặc là

DTD trong HTML5 đơn giản hơn nhiều:

· HTML, ĐẦU và CƠ THỂ

• Thẻ cho biết đó là tệp HTML và đây là thư mục gốc của phần tử HTML có chứa tất cả các phần tử tiếp theo khác được xác định trong đó; và bao gồm một thuộc tính ngôn ngữ được khuyến nghị là cách thực hành tốt nhất; ví dụ:

• Điều này là bắt buộc trong HTML4, nhưng không bắt buộc trong HTML5. Đây là một yếu tố có chứa các yếu tố khác có liên quan đến phần tài liệu này, chẳng hạn như tiêu đề, tập lệnh tham chiếu, xác định kiểu và siêu dữ liệu. Thẻ đóng phải được sử dụng trước khi xác định 
• Phần tử giữ nội dung chính cho trang, bao gồm bảng, văn bản hình ảnh, danh sách, v.v ... Sau khi đóng thẻ, phần tử có thể kết thúc. Sử dụng phần tử HTML5 mới là tùy chọn cho trang hoặc trong một phần khác của nội dung.

Các yếu tố HTML

HTML5 đã tạo ra các yếu tố mới để dễ phát triển và thiết kế và nó cũng đã loại bỏ các yếu tố được sử dụng trong HTML4. Danh sách các khác biệt giữa HTML4 và HTML5 được World Wide Web Consortium (W3C) công bố [ii].

TAG DIV TAG

Cùng với các cải tiến và các yếu tố mới, kết hợp với các tiến bộ CSS, một số yếu tố nhất định có thể được sử dụng theo những cách khác nhau, tốt hơn trước đây và các trang web đang trở nên nhanh hơn, phong phú hơn và đẹp hơn! với CSS, được sử dụng với HTML5 có thể thay thế các yếu tố nhất định được sử dụng quá mức, như .

Thẻ này phổ biến khi tách biệt nội dung trên một trang. Khi tạo phần tử này, nó sẽ tự động chèn dấu ngắt
để giữ văn bản hoặc nội dung cùng nhau, thay vì tiếp tục văn bản trên trang.

Với khả năng truy cập trang web và tối ưu hóa công cụ tìm kiếm, các kỹ thuật đang trở nên khá khoa học và được WC3 khuyến nghị không nên luôn luôn quay trở lại sử dụng trong HTML5.

Để làm ví dụ cho định dạng blog đơn giản nhưng có cấu trúc gọn gàng, hãy xem xét các yếu tố HTML5 mới bằng CSS thay vì sử dụng phần tử; sử dụng phần tử cho nội dung chính, phần tử để tô sáng hoặc tách bất kỳ nội dung nào trên trang, tiêu đề hoặc chân trang (bất cứ nơi nào!) và phần tử có thể được sử dụng để giữ một liên kết menu hoặc nhóm để duyệt từ trang.

Các yếu tố mới này dễ dàng xác định loại nội dung bằng HTML5. Tuy nhiên, thẻ cũng được sử dụng với CSS để tạo các trang web phản hồi.

Tạo từng phần tử (với id hoặc lớp riêng của nó), tệp CSS có thể được xác định để thao tác với từng phần tử.

Ví dụ HTML dưới đây cho thấy một ví dụ về việc sử dụng nhiều yếu tố:

Ví dụ của tôi

Các yếu tố có thể có các thuộc tính khác nhau, cụ thể là các kích thước khác nhau để tương tác đáp ứng tùy thuộc vào kích thước màn hình của thiết bị được sử dụng.

Dưới đây là một ví dụ về cách mỗi phần tử có thể được tạo kiểu trong tệp CSS tương ứng của HTML - bằng cách tham khảo từng thẻ.

#Head

chiều rộng: 800px;

chiều cao: tự động

lề trái: tự động;

lề trái: tự động;

#Đặc sắc

chiều cao: 150px;

Màu nền: #CCC;

TAG SPAN TAG

Phần tử này là một phần tử nội tuyến và không chia thành các dòng trừ khi ngắt
thẻ được sử dụng và văn bản được xác định (nội dung) giữa các thẻ mở và đóng được hiển thị dưới dạng một dòng (theo mặc định mà không sử dụng các yếu tố khác).

Các phần tử nội tuyến là các phần tử văn bản trong tệp HTML và có thể được xác định trong dòng của phần tử khác.

Giống như, phần tử không có Ý nghĩa để tham khảo tối ưu. Về cơ bản, nó hiển thị nội dung phần tử, nhưng tất cả các trường hợp có thể được xác định trong CSS để tạo kiểu nếu được gắn thẻ chính xác và được làm giàu với các thuộc tính khác hoặc được xử lý bằng JavaScript.

Trong ví dụ dưới đây, văn bản màu xanh làm nổi bật cách phần tử span có thể được lồng vào như một phần tử nội tuyến với các thuộc tính khác với phần tử cha của nó - đoạn p>:

Để mở ví dụ, nhấp vào biểu tượng ở cuối trang.

Khi được xem trong trình duyệt web, văn bản trong phần tử ở trên sẽ được hiển thị ở một phông chữ khác với đoạn văn để nhấn mạnh nơi người dùng phải nhấp để truy cập vào ví dụ.

Lưu ý rằng không có sự khác biệt giữa HTML4 và HTML5.