Khi bạn tải một trang web, hình ảnh sẽ bật lên nhanh chóng. Và đương nhiên, những hình ảnh trực quan và đầy màu sắc sẽ thu hút sự chú ý cũng như mang lại sự hứng thú cho chúng ta khi tìm hiểu về một vấn đề nào đó.
Những hình ảnh đó được nhắc bởi thẻ img, một loại mã cho máy chủ của trang web biết nơi tìm hình ảnh, cách tải chúng và phải làm gì với chúng sau khi chúng được tải.
Ở bài viết này, hãy cùng HTH tìm hiểu rõ hơn về thẻ img, cả về khái niệm, lẫn cách thêm thẻ hình ảnh trong HTML nhé. Bắt đầu thôi!
Nội dung chính
Thẻ img HTML là gì?
Thẻ img hay thẻ hình ảnh là hướng dẫn về cách hiển thị hình ảnh, vì hình ảnh không thực sự được nhúng vào một trang. Hình ảnh là các tệp được tìm nạp và hiển thị trên trang tùy thuộc vào mã hoặc thẻ hình ảnh được sử dụng. Mã có thể thay đổi các thuộc tính hoặc chức năng của hình ảnh khi nó tải.
Bạn có thể gửi một số tín hiệu SEO quan trọng bằng cách tối ưu hóa hình ảnh trang web của mình.
Xem thêm: SEO hình ảnh và thẻ Alt: 7 mẹo tối ưu hóa hình ảnh giúp tăng traffic với hình ảnh
Các thẻ hình ảnh trong HTML có dạng:
<img src=”https://technicalaudit.net/wp-content/uploads/2021/06/dich-vu-technical-seo-audit-tai-hth-digital-0-1080×675.jpg” alt=”Dịch vụ Technical SEO Audit tại HTH Digital” width=”1080″ height=”675″>
Trong đoạn mã trên, bạn có thể thấy 2 thuộc tính: SRC và ALT.
- SRC cho biết đường dẫn đến hình ảnh đang được hiển thị.
- ALT cho biết văn bản thay thế sẽ hiển thị nếu bản thân hình ảnh không thể được hiển thị.
Sau thuộc tính ALT, bạn có thể thấy các thuộc tính height (chiều cao) và width (chiều rộng). Bạn có thể đặt kích thước của hình ảnh theo cách thủ công, điều này có thể hữu ích nếu bạn có yêu cầu nghiêm ngặt về không gian trên trang web.
Đảm bảo tránh làm cong hình ảnh khi thiết lập kích thước hình ảnh của bạn; điều này có thể tạo ra trải nghiệm người dùng kém.
Thuộc tính SRC
Thuộc tính nguồn (SRC) tạo một đường dẫn đến tệp hình ảnh. Nếu liên kết bị hỏng, tệp đã bị di chuyển hoặc có lỗi đánh máy trong mã, bạn sẽ thấy biểu tượng ‘hình ảnh bị hỏng’ trên trang.
Thuộc tính ALT
Thuộc tính ALT chỉ định văn bản thay thế cho hình ảnh nếu chúng không thể hoặc không tải. Văn bản thay thế rất hữu ích cho những người có tầm nhìn hạn chế. Công cụ chuyển văn bản thành giọng nói có thể cho người xem biết hình ảnh nào đang được hiển thị.
Nó cũng tốt cho kết quả SEO, nhưng ai tìm kiếm hình ảnh trên Google.
Width và Height
Các thuộc tính này quy định chiều cao và chiều rộng của hình ảnh. Nếu sử dụng các thuộc tính này với thẻ hình ảnh, cách tốt nhất là đặt cả chiều cao và chiều rộng để trang biết có bao nhiêu không gian trên trang là cần thiết để hiển thị hình ảnh.
Nếu bạn không chỉ định cả hai, bạn có thể gặp sự cố trong khi trang cố gắng tải hình ảnh.
Các thuộc tính chiều rộng và chiều cao xuất hiện như sau:
<img src=”hth-logo.jpg” alt=”Logo HTH Digital” width=”500″ height=”600″>
Mã này tải hình ảnh logo HTH với tên tệp hth-logo.jpg. Hình ảnh sẽ có chiều rộng 500 pixel và chiều cao 600 pixel.
Các thuộc tính khác
Có một số thuộc tính khác mà bạn có thể sử dụng trong thẻ hình ảnh. Một cách khác mà bạn có thể sử dụng để định dạng là thuộc tính “Align”. Thuộc tính này đặt hình ảnh của bạn ở nơi bạn muốn trên trang.
Với những người tạo và chỉnh sửa trang web hiện đại ngày nay, thẻ này được xem là khá thừa. Bạn có thể nhấp và kéo và chèn hình ảnh vào nơi bạn muốn. Tuy nhiên, một số lập trình viên vẫn sử dụng thẻ align để căn chỉnh hình ảnh của họ ở nơi họ muốn.
Ví dụ về việc sử dụng thuộc tính này bao gồm “left” và “right”, đặt hình ảnh ở bên trái hoặc bên phải của trang.
“Text top” căn chỉnh hình ảnh với ví dụ văn bản cao nhất; “Abs bottom” căn chỉnh hình ảnh của bạn với phần cuối của dòng hiện tại mà nó được đặt.
Cách thêm Thẻ img HTML
Nếu bạn muốn thêm hình ảnh vào trang của mình theo cách thủ công, HTH sẽ hướng dẫn bạn cách thực hiện.
Thêm hình ảnh chuẩn
<img src=”hth-logo.jpg” alt=”Logo HTH Digital” width=”50″ height=”50″ style=”vertical-align: bottom”>
Mã này sẽ tìm và chèn một hình ảnh của logo HTH, với chiều rộng và chiều cao là 50 x 50 pixel. Hình ảnh này sẽ được căn chỉnh với cuối màn hình.
<img src=”hth-logo.jpg” alt=”Logo HTH Digital” width=”50″ height=”50″ style=”float:right”>
Mã này cũng chèn một hình ảnh 50 x 50 pixel của logo HTH. Kiểu là ‘float right’, có nghĩa là hình ảnh sẽ nằm ở phía bên tay phải của trang. Các phần tử gần đó sẽ chảy xung quanh hình ảnh, giống như bọc văn bản trong trình xử lý văn bản.
Thêm đường viền hình ảnh
<img src=”hth-logo.jpg” alt=”Logo HTH Digital” width=”50″ height=”50″ style=”border: 10px solid white”>
Đoạn mã trên sẽ thêm hình vuông 50 x 50 pixel của biểu tượng Semrush và thêm đường viền màu trắng dày 10 pixel.
Điều này có thể giúp làm nổi bật các hình ảnh quan trọng trên trang và thu hút ánh nhìn đến nơi bạn muốn người dùng nhìn vào.
Thêm lề trái và lề phải vào hình ảnh
<img src=”hth-logo.jpg” alt=”Logo HTH Digital” width=”50″ height=”50″ style=”vertical-align: middle;margin:0px 50px”>
Mã này tải logo HTH, căn chỉnh nó theo chiều dọc ở giữa trang và thêm lề chiều rộng 50 pixel vào bên trái và bên phải của hình ảnh. Bây giờ, không có văn bản nào sẽ xuất hiện trong vòng 50 pixel ở hai bên của hình ảnh.
Thêm lề trên và lề dưới vào hình ảnh
Giống như ở trên, logo HTH sẽ tải, căn chỉnh lại với giữa trang, nhưng bây giờ sẽ có lề 50 pixel ở trên và dưới hình ảnh. Không có yếu tố nào khác nằm trong phạm vi 50 pixel của hình ảnh này, trên cùng hoặc dưới cùng.
Tại sao thẻ img HTML lại quan trọng và cách sử dụng chúng
Yếu tố hình ảnh thêm vào trải nghiệm người dùng của một trang. Nếu một trang trông hấp dẫn, mọi người sẽ ở lại lâu hơn và Google sẽ lưu ý điều này.
Thẻ img cố định hình ảnh để hình ảnh xuất hiện trong mối quan hệ với các phần tử khác trên trang web. Bạn có thể sử dụng thẻ img để định cấu hình cách hình ảnh xuất hiện và tối ưu hóa cho cả bot công cụ tìm kiếm và người dùng.
Các thẻ bạn sử dụng ảnh hưởng đến tốc độ tải trang của bạn, điều này có thể ảnh hưởng đến trải nghiệm người dùng trên trang web của bạn.
Tất cả các trình duyệt hiện tại đều hỗ trợ các mã thẻ hình ảnh này, vì vậy sẽ không quan trọng bạn hoặc khách truy cập của bạn sử dụng trình duyệt nào. Thẻ hình ảnh dịch sang tất cả các trình duyệt để có trải nghiệm nhất quán.
Khi nào sử dụng Thẻ img HTML
Bạn sử dụng thẻ hình ảnh khi hình ảnh là một phần của nội dung – không phải là một phần của chính thiết kế trang.
Ví dụ: nếu bạn có một mẫu trang bao gồm hình ảnh biểu trưng của bạn hoặc một cái gì đó tương tự, thì bạn sẽ không sử dụng thẻ hình ảnh trong mã. Mẫu có hình ảnh cần phải nhất quán trên trang web của bạn.
Trang web của bạn sẽ tải mẫu bao gồm hình ảnh, sau đó bạn sẽ thêm nội dung của mình vào trang đó.
Thẻ hình ảnh chỉ định cách thức và vị trí hình ảnh sẽ được sử dụng và trình bày trong nội dung.
Kết luận
Thẻ img là một phần của việc tạo và tối ưu hóa trang web, trải nghiệm người dùng và SEO của bạn.
Bạn có thể điều chỉnh hoặc định vị hình ảnh của mình bằng cách thêm các thuộc tính bổ sung – như “width” hoặc “align” – vào thẻ hình ảnh của bạn.
Luôn xem trước trang web của bạn khi thực hiện thay đổi để đảm bảo bất kỳ thuộc tính nào bạn thêm vào mã hình ảnh không làm hỏng hình ảnh hoặc trang web của bạn.