Trong Series bài viết “Những cái mới của HTML5″ mới này, mình sẽ chỉ ra những điểm mới và hay của HTML5 để giúp mọi người phần nào hiểu thêm về HTML5. Biết hết cũng tốt, mà HTML5 thay đổi nhiều lắm, với lại cho dù có học hết, thì chúng ta cũng chỉ dụng một vài cái hữu ích trong số đó mà thôi.
HTML5 và không phải HTML5
Có một số vấn đề cần rạch rồi về HTML5 trước khi chúng ta cùng nhau khám phá HTML5 này. Một số định nghĩa mà mọi người vẫn hay gom chung để nói. Và nghĩ rằng đó là HTML5.
- SVG: Ảnh dạng vector dành cho Web. Không phải HTML5
- CSS3: Không có bà con gì với HTML5. Nó là … CSS
- Geolocation: Có phải một phần của HTML5 không? Câu trả lời
- Client Storage: Không phải HTML5
- Web Sockets: Không phải HTML5
HTML5 chỉ đơn giản là một gói bổ sung thêm các thẻ mới, loại bỏ những rắc rối, dư thừa trong cú pháp của những bản trước, sửa chữa những mặt hạn chế mà chuẩn HTML trước đó mắc phải.
Khai báo Doctype
Doctype là một đoạn mở đầu văn bản HTML, giúp trình duyệt nhận biết được trang web đang mở được viết theo chuẩn HTML nào. Dù nhiều lần phải thiết kế web, nhưng mình mãi vẫn không thể nhớ được đoạn này.
Trên là cách khai báo Doctype của HTML lúc trước (cụ thể là chuẩn XHTML). Còn ngày nay, để khai báo văn bản theo chuẩn HTML5 bạn chỉ cần.
Quá đơn giản và dễ nhớ.
Thẻ <small>
Thẻ này đã xuất hiện từ những phiên bản trước của HTML. Nhưng trong HTML5, nó có một số thay đổi nhỏ. Theo tài liệu chính thức, thẻ small này dùng với ý nghĩa như là “small print”. Giống như những mẫu quảng cáo có dòng chữ nhỏ “Hình ảnh chỉ mang tính chất minh họa” – đấy chính là “small print”.
Thường thì ta sẽ dùng thẻ này cho các thông tin ít quan trọng trên trang. Còn mình thì hay dùng nó trong mấy thẻ heading. Ví dụ như vầy:
Không còn cần phải khai báo type
Đây là một thay đổi quan trọng. Lúc trước bạn phải khai báo đầy đủ như thế này thì trình duyệt mới chịu.
Bạn có thể thấy nó bị dư thừa ở đây, rel=”stylesheet” lại còn phải type=”text/css”. Hay ở thẻ <script>, chỉ có 2 loại duy nhất là Javascript và VBScript, mà cái vbscript thì chỉ có Internet Explorer mới chạy thôi (sau này cũng ít hỗ trợ dần). Vì những sự dư thừa trên, giờ bạn có thể khai báo như vầy.
Trình duyệt sẽ mặc định hiểu đó là CSS và Javascript.
Có nháy hay không nháy
Không cần nháy! Với HTML5 bạn có thể ghi như vầy.
Không cần dùng dấu nháy cho giá trị của các thuộc tính của thẻ. Ngoài ra bạn cũng không còn cần phải dùng ký hiệu self-closed. Ví dụ, 2 đoạn HTML sau đều hợp lệ trong HTML5.
và
Tương tự cho các thẻ img, input, br, hr, meta, …
Bất kỳ nội dung nào cũng có thể biến thành Textbox
Có một thuộc tính khá hay đã được bổ sung vào HTML5, đó là contenteditable. Giờ bạn có thể biến bất kỳ nội dung nào trên web thành nơi nhập dữ liệu.
Mình đã đặt thuộc tính contenteditable cho đoạn chữ này, bạn thử click vào để chỉnh sửa thử xem!
Bên dưới là một đoạn mã HTML, ví dụ cách sử dụng contenteditable.
Bạn thử chạy đoạn HTML trên bằng trình duyệt để xem kết quả (trình duyệt phải hỗ trợ HTML5 nhé).
Input dạng Email
Trình duyệt ngày nay giờ đã chấp nhận type=email cho thẻ <input>, giờ bạn có thể tạo một form như sau.
Trình duyệt sẽ giúp bạn kiểm tra input có phải là email hay không, nếu không thì form này sẽ không được gửi đi. Thật tiện lợi. Nhưng chúng ta cũng không thể trông mong quá vào tính năng này. Kiểm tra lại thông tin một lần nữa ở phía Server là công việc vẫn phải làm.
Trên là một số điểm mới của HTML5. Tuy nhiên vẫn còn nhiều điều thú vị nữa về HTML5 đang chờ chúng ta, mời các bạn đón xem Khám phá những cái mới của HTML5 (Phần 2) vào kỳ sau.
0 comments:
Post a Comment