HTML là gì? Div là gì? Span là gì? Những điều cơ bản mà 1 nhà lập trình wed đều phải học qua

HTML là gì?

HTML (viết tắt của từ Hypertext Markup Language, hay là “Ngôn ngữ Đánh dấu Siêu văn bản”). HTML không phải là 1 ngôn ngữ lập trình.

Để hiểu rõ hơn về HTML ta phân tích từng từ của HTML.

Hypertext (siêu văn bản): Là loại văn bản tích hợp nhiều dạng dữ liệu khác nhau như: văn bản, âm thanh, hình ảnh, video,… và các siêu liên kết đến các siêu văn bản khác. Siêu văn bản là văn bản của một tài liệu có thể được truy tìm không theo tuần tự. Người đọc có thể tự do đuổi theo các dấu vết liên quan qua suốt tài liệu đó bằng các mối liên kết xác định sẵn do người sử dụng tự lập nên.

Markup: Ghi chú, đánh dấu.

Giống như việc bạn đọc 1 quyển sách và ghi chú hoặc đánh dấu chúng lại.

Ví dụ: <title>đây là markup</title>

Các phần tử xung quanh nội dung “đây là markup” được gọi là markup.

Language: ngôn ngữ.

Các phần tử HTML cho trình duyệt biết cách hiển thị nội dung.

Các phần tử HTML gắn nhãn các phần nội dung như “đây là một tiêu đề”, “đây là một đoạn văn”, “đây là một liên kết”, v.v.

Cấu tạo 1 phần tử HTML.

Opening tag: Thẻ mở, thẻ này bao gồm tên của phần tử, được bao bọc trong dấu ngoặc nhọn “<title>”. Thẻ này đánh dấu nơi phần tử bắt đầu hoặc bắt đầu có hiệu lực.

Content: Nội dung, là phần được viết sau thẻ opening tag, ở ví dụ này thì content chính là 1 đoạn văn bản.

Closing tag: Thẻ đóng, thẻ này được bao bọc trong dấu ngoặc nhọn “</title>”  thẻ này có tác dụng đánh dấu nơi kết thúc hoặc nơi phần tử hết hiệu lực.

Khối phần tử (Block level element) và nội tuyến HTML.

Phần tử khối là bất kỳ phần tử nào bắt đầu một dòng mới (ví dụ: đoạn văn ) và sử dụng toàn bộ chiều rộng của trang hoặc vùng chứa. Phần tử khối có thể chiếm một dòng hoặc nhiều dòng và có dấu ngắt dòng trước và sau phần tử. Nói dễ hiểu hơn phần tử khối thường là các phần tử cấu trúc trên trang.

Ví dụ: 1 phần tử khối đại diện có thể đại diện cho tiêu đề, đoạn văn, menu điều hướng, v.v. 1 phần tử khối sẽ không được lồng vào bên trong phần tử nội tuyến, nhưng các phần tử cấp khối có thể lồng được vào nhau.

Phần tử nội tuyến là phần tử bên trong khối phần tử và thường được dùng để bao xung quanh 1 đoạn văn bản. Một phần tử nội tuyến không bắt đầu trên một dòng mới.

Một phần tử nội tuyến chỉ chiếm nhiều chiều rộng khi cần thiết.

Thẻ Div trong html là gì?

Thẻ <Div> trong HTML là từ viết tắt của division (nghĩa là khu), thẻ <div> nó không ảnh hưởng đến nội dung hoặc bố cục nó thường được sử dụng để nhóm các phần tử HTML, được sử dụng để tạo 1 khu vực kiểu block level element để tạo kiểu với CSS hoặc thao tác với các tập lệnh.

Span html là gì?

Thẻ Span trong HTML được coi là một phần tử nội tuyến, dùng để định dạng cho chữ hoặc một đoạn văn bản. Nó tương tự như thẻ div nhưng thẻ div được sử dụng cho các khối phần tử trong khi span được sử dụng cho các phần tử nội tuyến. Nó chủ yếu được sử dụng bất cứ khi nào người dùng muốn nhóm các phần tử nội tuyến vào cấu trúc mã của họ.

Thẻ Span được sử dụng để tạo kiểu cho các nội dung cụ thể bằng cách sử dụng lớp phần tử hoặc thuộc tính id. Không thể tự thực hiện thay đổi trực quan bằng cách sử dụng thẻ span trong tài liệu HTML. Việc sử dụng các thẻ span vào mã của bạn sẽ giúp giảm các thuộc tính mã và HTML.

Các yếu tố lồng vào nhau (Nesting elements).

Các phần tử có thẻ đặt bên trong các phần tử khác, có tác dụng như để nhấn mạnh 1 tạo sự chú ý đối với User.

Trong ví dụ trên Isinhvien đã mở 1 phần tử <p> trước, sau đó mở phần tử <strong>, để thích hợp chúng ta có thể xem phần tử <strong> là 1 phần tử cấp của phần tử <p> nên khi đóng thẻ chúng ta phải đóng phần tử <strong> trước, rồi sau đấy đóng thẻ <p>. Phần tử “<strong>nóng</strong>” có tác dụng tô đậm từ “nóng” trong đoạn văn bản “thời tiết hôm nay thật nóng bức”.

Các phần tử rỗng (empty element).

Tuy nhiên, không phải tất cả các phần tử đều tuân theo thẻ mở và thẻ đóng, những phần tử chỉ này gọi là các phần tử rỗng (empty element).

Điều này sẽ xuất ra như sau:

tôi thích ăn kem

<em>: thẻ được sử dụng để xác định văn bản nhấn mạnh. Nội dung bên trong thường được hiển thị bằng chữ nghiêng.

Attributes.

Attributes là 1 thuộc tính của thẻ html, chúng bổ sung thuộc tính cho chính thẻ đó, ví dụ: địa chỉ ID, khoảng cách, v.v.

Như ta thấy trong thẻ opening tag có địa chỉ “id=”menu”” id chính là attribute name (tên của attribute), menu chính là attribute value (giá trị, tên của attribute) ở đây chính là tên của địa chỉ ID.

Một thuộc tính phải có:

• Khoảng trắng giữa nó và tên phần tử. (Đối với một phần tử có nhiều thuộc tính, các thuộc tính cũng phải được phân tách bằng dấu cách.).
• Tên thuộc tính, theo sau là một dấu bằng.
• Một giá trị thuộc tính, được bao bọc bằng dấu ngoặc kép mở và đóng.

Chèn thuộc tính vào 1 phần tử HTML.

Isinhvien sẽ lấy 1 ví dụ cụ thể để đi sâu vào giải thích quá trình chèn thuộc tính vào 1 phần từ HTML.

Thẻ <a> chính là thẻ phần tử của html chứa các thuộc tính href, title, target.

href: là đường link (URL) dẫn tới trang web đích.

title: là tiêu đề cho đường link.

target: là các tùy chọn.

_blank: chuyển link sang 1 tab mới.

_self: chuyển link trên tab hiện tại.

_parent: mở tab cha của tb hiện tại.

_top: thì nó sẽ nhảy tới tab hiện tại và thường dùng trong iframe khi muốn thoát khỏi iframe và chạy tới trang gốc.

Kết luận

Vậy là các bạn đã cùng Isinhvien tìm hiểu HTML và những điều liên quan cần học. Nếu thấy bài này đáp ứng đủ những gì bạn cần tìm, hãy cho isinhvien một like, share hoặc comment để chúng mình có thêm động lực tổng hợp nhiều kiến thức hay hơn nữa nhé!