1. Giới thiệu

Trong HTML, file path (đường dẫn tệp) được sử dụng để xác định vị trí của các tệp như hình ảnh, video, tệp CSS, tệp JavaScript và các tài nguyên khác. Việc hiểu và sử dụng đúng đường dẫn tệp trong HTML rất quan trọng để hiển thị đúng nội dung và tài nguyên trên trang web.

Có hai loại đường dẫn trong HTML:

  • Đường dẫn tuyệt đối (Absolute Path)
  • Đường dẫn tương đối (Relative Path)

Bài viết này sẽ hướng dẫn cách sử dụng hai loại đường dẫn này cùng với các ví dụ minh họa cụ thể.

2. Đường dẫn tuyệt đối trong HTML

Đường dẫn tuyệt đối là một đường dẫn đầy đủ chỉ rõ vị trí chính xác của tệp trên internet, bao gồm cả giao thức (HTTP/HTTPS) và tên miền.

Ví dụ:

html
Thử online
<img src="https://codetuthub.com/example/file_JPG_500kB.jpg" alt="Ảnh tuyệt đối">

Trong ví dụ này, đường dẫn chỉ rõ tệp ảnh photo.jpg nằm trên trang example.com. Đây là đường dẫn tuyệt đối vì nó bao gồm tên miền đầy đủ và đường dẫn đến tệp.

Khi nào nên sử dụng đường dẫn tuyệt đối?

  • Khi bạn muốn tham chiếu đến các tài nguyên bên ngoài, chẳng hạn như hình ảnh hoặc tập tin từ một máy chủ hoặc trang web khác.
  • Khi bạn cần tham chiếu chính xác đến tài nguyên mà không bị ảnh hưởng bởi cấu trúc thư mục nội bộ.

3. Đường dẫn tương đối trong HTML

Đường dẫn tương đối là đường dẫn tham chiếu đến tệp nằm trong cùng thư mục hoặc các thư mục con của tài liệu hiện tại. Đường dẫn này không cần chỉ định tên miền hoặc giao thức.

a. Đường dẫn tương đối từ thư mục gốc

Nếu tệp của bạn nằm trong cùng thư mục gốc với trang HTML hiện tại, bạn chỉ cần tham chiếu trực tiếp đến tên tệp.

Ví dụ:

html
<img src="images/photo.jpg" alt="Ảnh tương đối từ thư mục gốc">

Trong ví dụ này, tệp ảnh photo.jpg nằm trong thư mục images, và thư mục này nằm cùng cấp với trang HTML hiện tại.

b. Đường dẫn tương đối đến thư mục cha

Nếu bạn muốn tham chiếu đến một tệp nằm trong thư mục cha của thư mục hiện tại, bạn có thể sử dụng ../ để chỉ định thư mục cha.

Ví dụ:

html
<img src="../images/photo.jpg" alt="Ảnh từ thư mục cha">

Ở đây, ../ di chuyển lên một thư mục so với vị trí hiện tại và sau đó vào thư mục images.

c. Đường dẫn tương đối giữa các thư mục khác nhau

Nếu tệp của bạn nằm trong một thư mục khác với tệp HTML, bạn có thể sử dụng đường dẫn tương đối để tham chiếu đến tệp đó bằng cách chỉ định đường dẫn từ vị trí hiện tại đến vị trí của tệp đích.

Ví dụ:

html
<img src="assets/images/photo.jpg" alt="Ảnh từ thư mục khác">

Trong ví dụ này, tệp ảnh photo.jpg nằm trong thư mục images bên trong thư mục assets.

4. Cách phân biệt đường dẫn tuyệt đối và tương đối

  • Đường dẫn tuyệt đối thường bắt đầu bằng http:// hoặc https:// hoặc có thể là một đường dẫn từ thư mục gốc của hệ thống.
  • Đường dẫn tương đối dựa trên vị trí của tệp HTML hiện tại và không bao gồm tên miền.

5. Các loại đường dẫn phổ biến trong HTML

a. Đường dẫn tệp hình ảnh

Đường dẫn tệp hình ảnh được sử dụng với thẻ <img> để hiển thị hình ảnh.

html
<img src="images/photo.jpg" alt="Ảnh minh họa">

b. Đường dẫn tệp CSS

Đường dẫn tệp CSS được sử dụng trong thẻ <link> để kết nối tệp CSS bên ngoài với trang HTML.

html
<link rel="stylesheet" href="css/styles.css">

c. Đường dẫn tệp JavaScript

Đường dẫn tệp JavaScript được sử dụng trong thẻ <script> để nhúng tệp JavaScript bên ngoài vào trang HTML.

html
<script src="js/script.js"></script>

d. Đường dẫn tệp video

Đường dẫn tệp video được sử dụng trong thẻ <video> để nhúng video vào trang HTML.

html
<video width="320" height="240" controls>
  <source src="videos/movie.mp4" type="video/mp4">
  Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

6. Ví dụ về cấu trúc thư mục và đường dẫn tệp

Giả sử bạn có cấu trúc thư mục như sau:

shell
/website
    /images
        photo.jpg
    /css
        styles.css
    /js
        script.js
    index.html

a. Tham chiếu từ index.html đến ảnh photo.jpg:

html
<img src="images/photo.jpg" alt="Ảnh">

b. Tham chiếu từ index.html đến tệp CSS styles.css:

html
<link rel="stylesheet" href="css/styles.css">

c. Tham chiếu từ index.html đến tệp JavaScript script.js:

html
<script src="js/script.js"></script>

7. Kết luận

Hiểu rõ và sử dụng đúng file paths trong HTML là yếu tố rất quan trọng để đảm bảo tài liệu của bạn hiển thị đúng hình ảnh, video, tài liệu CSS, và JavaScript mà không gặp phải lỗi. Sử dụng đường dẫn tuyệt đối khi tham chiếu đến tài nguyên bên ngoài và sử dụng đường dẫn tương đối khi làm việc với các tài nguyên trong cùng hệ thống tệp.

Hãy đảm bảo rằng bạn đã kiểm tra kỹ lưỡng cấu trúc thư mục và đường dẫn trước khi triển khai trang web để tránh các lỗi hiển thị tài nguyên.