The em trong HTML

Question

The HTML element marks text that has stress emphasis. The element can be nested, with each level of nesting indicating a greater degree of emphasis.

Nội dung chính Show

1) Thẻ trong HTML
2) Định dạng CSS mặc định
1) Thẻ trong HTML
2) Định dạng CSS mặc định
1. Khái niệm thẻ em trong HTML
2. Sự khác biệt giữa thẻ em và thẻ i
3. Khi nào nên sử dụng thẻ em
Khái niệm về đơn vị em và rem
Sử dụng thực tế
Giải thích chi tiết
Lời kết

This element only includes the global attributes.

The element is for words that have a stressed emphasis compared to surrounding text, which is often limited to a word or words of a sentence and affects the meaning of the sentence itself.

Typically this element is displayed in italic type. However, it should not be used to apply italic styling; use the CSS font-style property for that purpose. Use the element to mark the title of a work (book, play, song, etc.). Use the element to mark text that is in an alternate tone or mood, which covers many common situations for italics such as scientific names or words in other languages. Use the element to mark text that has greater importance than surrounding text.

Some developers may be confused by how multiple elements seemingly produce similar visual results. and are a common example, since they both italicize text. What's the difference? Which should you use?

By default, the visual result is the same. However, the semantic meaning is different. The element represents stress emphasis of its contents, while the element represents text that is set off from the normal prose, such a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning. (The title of a work, such as the name of a book or movie, should use .)

This means the right one to use depends on the situation. Neither is for purely decorative purposes, that's what CSS styling is for.

An example for could be: "Just do it already!", or: "We had to do something about it". A person or software reading the text would pronounce the words in italics with an emphasis, using verbal stress.

An example for could be: "The Queen Mary sailed last night". Here, there is no added emphasis or importance on the word "Queen Mary". It is merely indicated that the object in question is not a queen named Mary, but a ship named Queen Mary. Another example for could be: "The word the is an article".

The element is often used to indicate an implicit or explicit contrast.

<p>
  In HTML 5, what was previously called
  <em>block-levelem> content is now called <em>flowem> content.
p>

Content categories, , palpable content.Permitted content.Tag omissionNone, both the starting and ending tag are mandatory.Permitted parentsAny element that accepts .Implicit ARIA rolePermitted ARIA rolesAnyDOM interface7 Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the 8 interface for this element.

1) Thẻ trong HTML
- Thẻ dùng để xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng.
Nội dung chính Show
Tài liệu học lập trình web từ cơ bản đến nâng cao
Khi đó, màn hình trình duyệt sẽ hiển thị:
Tài liệu học lập trình web từ cơ bản đến nâng cao
- Lưu ý: Thẻ có chức năng giống với thẻ . Tuy nhiên, về mặt làm SEO website thì thẻ hỗ trợ tốt hơn.
2) Định dạng CSS mặc định
- Hầu hết các trình duyệt sẽ hiển thị phần tử với định dạng CSS như sau:
em { font-style: italic; }
1) Thẻ trong HTML
- Thẻ dùng để xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng.
Nội dung chính Show
1) Thẻ trong HTML
2) Định dạng CSS mặc định
1. Khái niệm thẻ em trong HTML
2. Sự khác biệt giữa thẻ em và thẻ i
3. Khi nào nên sử dụng thẻ em
Khái niệm về đơn vị em và rem
Sử dụng thực tế
Giải thích chi tiết
Lời kết
Tài liệu học lập trình web từ cơ bản đến nâng cao
Khi đó, màn hình trình duyệt sẽ hiển thị:
Tài liệu học lập trình web từ cơ bản đến nâng cao
- Lưu ý: Thẻ có chức năng giống với thẻ . Tuy nhiên, về mặt làm SEO website thì thẻ hỗ trợ tốt hơn.
2) Định dạng CSS mặc định
- Hầu hết các trình duyệt sẽ hiển thị phần tử với định dạng CSS như sau:

em { font-style: italic; }
Nếu là một người thường xuyên soạn thảo văn bản cho website, chắc chắn bạn đã quen thuộc với thẻ em trong HTML. Tuy nhiên, liệu bạn đã hiểu rõ về loại thẻ định dạng này, cũng như cách sử dụng chính xác? Hãy cùng giải đáp những thắc mắc trên qua bài viết dưới đây.
Mục lục
1. Khái niệm thẻ em trong HTML
2. Sự khác biệt giữa thẻ em và thẻ i
3. Khi nào nên sử dụng thẻ em
1. Khái niệm thẻ em trong HTML
Khái niệm thẻ em trong HTML?
Là một trong số các công cụ định dạng văn bản, thẻ trong HTML hỗ trợ người dùng xác định một đoạn nội dung nào đó dưới dạng chữ in nghiêng.
2. Sự khác biệt giữa thẻ em và thẻ i
Sự khác biệt giữa thẻ em và thẻ i trong HTML
Trong HTML, người sử dụng sẽ được cung cấp sẵn 2 loại thẻ in nghiêng là và với hiển thị hoàn toàn giống nhau trên trình duyệt. Dù vậy, về mức độ ưu tiên, thẻ vẫn được nhiều người lựa chọn hơn bởi khả năng nhấn mạnh tầm quan trọng của nội dung, khiến người đọc không thể bỏ qua.
3. Khi nào nên sử dụng thẻ em
Khi nào nên sử dụng thẻ em?
Trước khi quyết định sử dụng bất cứ loại thẻ định dạng nào, người dùng cần cân nhắc kỹ càng về mặt hình thức cũng như ý nghĩa, để tránh gây mất tập trung cho người đọc. Dưới đây là một số trường hợp mà bạn nên gắn thẻ em:
Đưa đường link dẫn từ bên ngoài vào trong văn bản
Giới thiệu các tên sản phẩm, địa chỉ, thông tin,… cần lưu ý
Chú thích hoặc lời dẫn dưới ảnh (nếu có)
Nhờ vậy, người đọc sẽ biết được những thông tin nào cần lưu ý và tra cứu một cách nhanh chóng hơn.
Học soạn thảo văn bản chưa bao giờ là một việc đơn giản. Do đó, bạn hãy bắt đầu luyện tập từ những điều nhỏ nhất, như ứng dụng thẻ em trong HTML. Từ đó tạo nên được một nội dung thu hút và hấp dẫn người đọc.
Đã đăng vào thg 7 21, 2019 1:15 CH 4 phút đọc
Có không ít các bạn khi code web thường sử đơn vị css làm sao để code trên desktop mà khi view trên mobile không bị vỡ layout, cơ chữ do đơn vị cố định cho các element...
Có một vài đơn vị như %, px, vw, vh, pt, em, rem, ... thì có 2 đơn vị luôn làm nhiều bạn trong đó có cả mình nhầm lần chưa biết cách sử dụng nó vào việc responsive.
Thì để giải quyết vấn đề trên thì mình sẽ chia sẻ 1 chút về cách dùng 2 đơn vị này nhằm giúp các bạn có thể hiểu rõ và áp dụng chúng vào việc code giao diện.
Khái niệm về đơn vị em và rem
em: là đơn vị tham chiếu tỷ lệ so với phần tử cha trực tiếp chứa nó hoặc chính nó dựa vào giá trị của thuộc tính là font-size
rem: là đơn vị tham chiếu tỷ lệ so với phần tử gốc của website ở đây là thẻ
Tài liệu học lập trình web từ cơ bản đến nâng cao
0 dựa vào giá trị của thuộc tính font-size

Sử dụng thực tế
Mình nghĩ là các bạn nhìn vào sơ đồ chắc vẫn chưa hiểu lắm. Mình lần đầu cũng vậy thôi. Và muốn hiểu được nó chúng ta phải bắt tay vào code thôi.
Các bạn hãy xem ví dụ demo nho nhỏ để dễ hình dung nhé.
Đầu tiên là
Tài liệu học lập trình web từ cơ bản đến nâng cao
1 như thế này:
<html> <head><title>Cách dùng đơn vị Em vs Remtitle>head> <body> <div class="container"> <div class="em">EMdiv> <div class="rem">REMdiv> div> body> html>
Tiếp đến là
Tài liệu học lập trình web từ cơ bản đến nâng cao
2:
html { font-size: 15px; } .container { color: white; display: flex; } .em { width: 10em; height: 10em; background-color: red; } .rem { width: 10rem; height: 10rem; background-color: blue; }
Và đây là kết quả
Giải thích chi tiết
Đầu tiên mình tạo html layout gồm có 1 div có class container bọc ngoài và có 2 div bên trong tương ứng với class em rem sau đó mình set cho thẻ
Tài liệu học lập trình web từ cơ bản đến nâng cao
0 có thuộc tính font-size là 15px và lần lượt 2 ô là màu đỏ xanh cho các bạn dễ phân biệt.
Cho nên lúc này 1em = 1rem = 15px. Như các bạn nhìn vào demo ở trên thì 2 ô đều bằng nhau là 10(em-rem) x 15px = 150px của mỗi ô.
Mình xin giải thích là vì do lúc này chính nó(class em) và phần tử cha chứa nó là thẻ div có class container mình chưa set thuộc tính font-size nên nó sẽ phụ thuộc phần tử lớn hơn ở ngoài đó là thẻ
Tài liệu học lập trình web từ cơ bản đến nâng cao
4 nhưng thẻ
Tài liệu học lập trình web từ cơ bản đến nâng cao
4 cũng chưa set thuộc tính font-size nên nó cứ thế lấy ra ngoài cùng cho tới thẻ
Tài liệu học lập trình web từ cơ bản đến nâng cao
0. Nên ở trên 1em = 1rem = 15px là theo thẻ
Tài liệu học lập trình web từ cơ bản đến nâng cao
0 đấy.
Tuy nhiên bây giờ mình sẽ set cái thuộc tính font-size của thẻ div có class container là 20px thì chắn chắn sẽ có thay đổi. Các bạn nhìn dưới đây nha.
.container { font-size: 20px; }
Ô màu đỏ có đơn vị em sẽ to hơn ban đầu vì như mình đã nói ở trên là đơn vị em phụ thuộc vào giá trị thuộc tính font-size của chính nó hoặc phần tử cha trực tiếp chứa nó. Cho nên lúc này ô màu đỏ sẽ có kích thước là 10em x 20px = 200px.
html { font-size: 25px; }
Còn ô màu xanh(rem) do phụ thuộc vào thẻ
Tài liệu học lập trình web từ cơ bản đến nâng cao
0 nên khi mình thay đổi giá trị font-size của thẻ
Tài liệu học lập trình web từ cơ bản đến nâng cao
0 sang 25px thì ô màu xanh cũng sẽ thay đổi kích thước. Và lúc này giá trị của nó sẽ là 10rem x 25px = 250px. Nhìn vào demo bạn sẽ thấy nó to hơn ban đầu và to hơn ô màu đỏ luôn.
Lời kết
Hi vọng với giải thích và ví dụ demo của mình sẽ giúp các bạn dễ dàng hiểu hơn về 2 đơn vị em và rem này. Cám ơn các bạn đã đọc và chúc các bạn một ngày làm việc tốt lành.

programming html

The em trong HTML

1) Thẻ trong HTML

2) Định dạng CSS mặc định

1) Thẻ trong HTML

2) Định dạng CSS mặc định

1. Khái niệm thẻ em trong HTML

2. Sự khác biệt giữa thẻ em và thẻ i

3. Khi nào nên sử dụng thẻ em

Khái niệm về đơn vị em và rem

Sử dụng thực tế

Giải thích chi tiết

Lời kết

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội