HTML Text Formatting

📝 HTML Text Formatting

Tìm hiểu các thẻ HTML để định dạng văn bản với semantic meaning. Từ emphasis và importance đến code snippets và quotations.

Phân loại Text Formatting

💪
Emphasis Elements

Nhấn mạnh tầm quan trọng và ngữ điệu

strongemmark
💻
Code Elements

Code snippets và technical content

codekbdsampvar
✏️
Edit Elements

Thể hiện thay đổi và cập nhật

delins
💬
Quotation Elements

Trích dẫn và quotations

qcite
🔤
Special Elements

Abbreviations và special formatting

abbrdfnsmallsubsup
🎯
Semantic Focus

Ý nghĩa quan trọng hơn styling

Semantic > Visual

Tham khảo thẻ Text Formatting

<strong>Strong ImportanceSEMANTIC

Thể hiện nội dung có tầm quan trọng cao, mang ý nghĩa semantic mạnh

EMPHASISBASIC

Mục đích sử dụng

Nhấn mạnh tầm quan trọng của nội dung

Attributes chính

idclassstyletitle

Ví dụ thực tế

HTML Code:
<p>Lưu ý: <strong>Việc backup dữ liệu là rất quan trọng</strong>
trước khi thực hiện update hệ thống.</p>

<p><strong>Cảnh báo bảo mật:</strong> Không bao giờ chia sẻ
password với người khác.</p>

<p>Trong lập trình, <strong>debugging</strong> là kỹ năng
cần thiết mà mọi developer phải có.</p>
💡 Giải thích:

Strong khác với <b> vì có ý nghĩa semantic, giúp screen readers nhận biết nội dung quan trọng

HTML Code:
<article>
  <h2>Hướng dẫn bảo mật</h2>
  <p>Có <strong>3 quy tắc vàng</strong> trong bảo mật:</p>
  <ol>
    <li><strong>Mật khẩu mạnh:</strong> Ít nhất 12 ký tự</li>
    <li><strong>Xác thực 2 bước:</strong> Luôn bật khi có thể</li>
    <li><strong>Cập nhật thường xuyên:</strong> Phần mềm và hệ điều hành</li>
  </ol>
</article>
💡 Giải thích:

Strong trong lists giúp tạo emphasis cho key terms và concepts

Bảng tham khảo nhanh

ThẻTênMục đíchSemanticCategory
<strong>Strong ImportanceNhấn mạnh tầm quan trọng của nội dungemphasis
<em>EmphasisNhấn mạnh ngữ điệu và cảm xúcemphasis
<mark>Mark/HighlightHighlight text relevant đến user query hoặc current contextemphasis
<small>Small TextSide comments, disclaimers, copyright, fine printspecial
<sub>SubscriptSubscript notation cho science, math, footnotesspecial
<sup>SuperscriptSuperscript notation cho math, dates, footnotesspecial
<del>Deleted TextShow removed content, price changes, correctionsedit
<ins>Inserted TextShow added content, updates, correctionsedit
<code>Inline CodeInline code, technical terms, programming elementscode
<kbd>Keyboard InputKeyboard shortcuts, user input examplescode
<samp>Sample OutputProgram output, error messages, system responsescode
<var>VariableVariables, placeholders, mathematical notationcode
<q>Inline QuotationShort quotes, inline citationsquotation
<abbr>AbbreviationAbbreviations, acronyms với explanationsspecial
<dfn>DefinitionTerm definitions, first usage of technical termsspecial

Best Practices cho Text Formatting

✅ Semantic Best Practices
Ưu tiên semantic elements: <strong> thay vì <b>
Dùng <abbr title="..."> cho abbreviations với full expansion
Sử dụng <code> cho inline code, <kbd> cho keyboard input
Combine elements semantically: <dfn><abbr> cho first usage
Dùng <del>/<ins> với datetime cho tracking changes
❌ Common Mistakes
Dùng <b>/<i> thay vì semantic alternatives
Overuse <strong>/<em> - mất ý nghĩa emphasis
Nested emphasis elements: <strong><em>...</em></strong>
Dùng <small> chỉ để make text smaller (không semantic)
Missing title attribute trong <abbr> elements

Câu hỏi phỏng vấn về Text Formatting

12 câu hỏi
Level:
Category:
JUNIORSEMANTIC
Sự khác biệt semantic giữa <strong> vs <b> và <em> vs <i>?
JUNIORSEMANTIC
Khi nào dùng <mark> vs <strong> vs <em>?
MIDSEMANTIC
<code> vs <pre> vs <kbd> vs <samp> - khi nào dùng gì?
MIDACCESSIBILITY
Best practices cho <abbr> và accessibility?
MIDSEMANTIC
<del> và <ins> với datetime attribute và version control?
MIDSEMANTIC
<q> vs <blockquote> và automatic quote marks?
MIDSEMANTIC
<small> semantic meaning vs just smaller text?
SENIORBEST-PRACTICES
<dfn> và <abbr> trong technical documentation?
SENIORBEST-PRACTICES
Text formatting performance và semantic HTML impact?
SENIORBEST-PRACTICES
Custom styling vs semantic elements trade-offs?
SENIORACCESSIBILITY
Internationalization (i18n) với text formatting elements?
SENIORACCESSIBILITY
ARIA attributes với text formatting cho complex documents?

📝 Tóm tắt bài học

  • • Text formatting elements có semantic meaning, không chỉ là visual styling
  • • Ưu tiên semantic elements: strong/em thay vì b/i cho better SEO và accessibility
  • • Mỗi element có purpose cụ thể: mark=relevance, strong=importance, em=emphasis
  • • Code-related elements: code (inline), kbd (keyboard), samp (output), var (variables)
  • • Edit elements del/ins với datetime attribute cho tracking changes
  • • Abbreviations với title attribute quan trọng cho accessibility

Mục lục bài học

Tiến độ: 4/8 phần
Không có mục lục