HTML có rất nhiều thẻ khác nhau cho văn bản. Các thẻ này cho phép chúng tôi hiển thị văn bản trong tài liệu HTML theo cách chúng tôi muốn nó được hiển thị. Mặc dù là một tính năng cơ bản của HTML, nhưng có rất nhiều điều để tìm hiểu về các thẻ này. Hầu hết các thẻ cho văn bản là nội tuyến nhưng có những ngoại lệ. Khi một phần tử là nội tuyến, điều đó có nghĩa là theo mặc định, chúng có dòng CSS này được áp dụng cho chúng

display: inline;

Phần tử nội tuyến trong HTML là gì?

Các thẻ nội tuyến cho văn bản hoạt động khác với các phần tử khối. Chúng không phá vỡ dòng nội dung và chỉ chiếm nhiều dung lượng cần thiết. Mặt khác, các phần tử khối có xu hướng chiếm toàn bộ chiều rộng của trang

Do đó, các thẻ HTML cho văn bản đều ở trong dòng, vì chúng được sử dụng để viết văn bản và chúng chạy cùng với các thành phần nội tuyến khác trên trang

Có bất kỳ thẻ chặn nào cho văn bản không?

Một số thẻ chúng tôi sử dụng cho văn bản là các phần tử khối. Điều này chủ yếu đề cập đến các tiêu đề và đoạn văn, thường chiếm toàn bộ một dòng hoặc một phần trên trang. Như vậy, một đoạn mới sẽ xuất hiện bên dưới đoạn cuối cùng, thay vì bên cạnh nó như bạn mong đợi

Bây giờ chúng ta đã tìm hiểu những điều cơ bản, Hãy xem xét một số thẻ nội tuyến chính mà chúng tôi sử dụng cho văn bản trong HTML, một số trong số đó có thể bạn chưa từng nghe đến trước đây

Các thẻ tiêu đề

Trong HTML, chúng ta có thể biểu thị các tiêu đề bằng các thẻ tiêu đề được đánh số. Đây là tất cả các yếu tố khối.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Dưới đây là một ví dụ về tất cả các thẻ tiêu đề, từ quan trọng nhất và lớn nhất, đến ít quan trọng nhất và nhỏ nhất

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Thẻ <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> 9

Thẻ này là thẻ khối cho văn bản, dùng để biểu thị một đoạn văn. Một đoạn văn trong HTML thường có một lề để tách nó khỏi các thẻ đoạn khác. một ví dụ đã được biểu diễn ở dưới

    <p>I am a paragraph</p>

Các thẻ danh sách. <p>I am a paragraph</p> 0, <p>I am a paragraph</p> 1 và <p>I am a paragraph</p> 2

Nếu chúng ta muốn tạo một danh sách trong HTML như ví dụ bên dưới, chúng ta sử dụng các thẻ danh sách

• Chào bạn
• tôi là một danh sách

Có hai loại danh sách -

    <p>I am a paragraph</p>

 <p>I am a paragraph</p>

Trong các danh sách

    <p>I am a paragraph</p>

    <p>I am a paragraph</p>

    <p>I am a paragraph</p>

<ul>
    <li>Hi there</li>
    <li>I am a list</li>
</ul>
<ol>
    <li>Hi there</li>
    <li>I am a list</li>
</ol>

Thẻ <p>I am a paragraph</p> 8

Thẻ

    <p>I am a paragraph</p>

<ul>
    <li>Hi there</li>
    <li>I am a list</li>
</ul>
<ol>
    <li>Hi there</li>
    <li>I am a list</li>
</ol>

<ul>
    <li>Hi there</li>
    <li>I am a list</li>
</ul>
<ol>
    <li>Hi there</li>
    <li>I am a list</li>
</ol>

<ul>
 <li>Hi there</li>
 <li>I am a list</li>
</ul>
<ol>
 <li>Hi there</li>
 <li>I am a list</li>
</ol>

<figure>
    <blockquote>
        I am HTML
    
    <figcaption>HTML, from <cite>HTML in action</cite></figcaption>
</blockquote></figure>

Kết quả trông như thế này

Tôi là HTMLHTML, từ HTML đang hoạt động

Thẻ <ul> <li>Hi there</li> <li>I am a list</li> </ul> <ol> <li>Hi there</li> <li>I am a list</li> </ol> 3

Thẻ em dùng để nhấn mạnh hoặc in nghiêng văn bản. Đây là một ví dụ về giao diện của nó. Trong mã, chúng tôi viết nó như thế này

<em>An emphasised piece of text</em>

Thẻ <ul> <li>Hi there</li> <li>I am a list</li> </ul> <ol> <li>Hi there</li> <li>I am a list</li> </ol> 4

Thẻ Strong dùng để in đậm văn bản. Đây là một ví dụ về giao diện của nó. Nó trông như thế này trong mã

<strong>An emphasised piece of text</strong>

Thẻ <ul> <li>Hi there</li> <li>I am a list</li> </ul> <ol> <li>Hi there</li> <li>I am a list</li> </ol> 5

Phần tử này làm ngắt dòng ở bất cứ đâu bạn muốn. Nó trông như thế này trong mã

<br>

Thẻ <ul> <li>Hi there</li> <li>I am a list</li> </ul> <ol> <li>Hi there</li> <li>I am a list</li> </ol> 6

Phần tử này làm cho văn bản được gạch chân Có vẻ như thế này trong mã

<u>underlined</u>

Thẻ <ul> <li>Hi there</li> <li>I am a list</li> </ul> <ol> <li>Hi there</li> <li>I am a list</li> </ol> 7

Thẻ Strong dùng để in đậm văn bản. Đây là một ví dụ về giao diện của nó. Nó trông như thế này trong mã

<strong>An emphasised piece of text</strong>

Thẻ <ul> <li>Hi there</li> <li>I am a list</li> </ul> <ol> <li>Hi there</li> <li>I am a list</li> </ol> 7

Phần tử này làm nổi bật một đoạn mã trên trang. Nó được tạo kiểu như dưới đây

<ul>
    <li>Hi there</li>
    <li>I am a list</li>
</ul>
<ol>
    <li>Hi there</li>
    <li>I am a list</li>
</ol>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Thẻ <figure> <blockquote> I am HTML <figcaption>HTML, from <cite>HTML in action</cite></figcaption> </blockquote></figure> 0

Phần tử này biểu thị văn bản không được có bất kỳ ngắt dòng nào. Nếu bạn tiếp tục nhập, phần tử này sẽ ngăn văn bản bị ngắt tại bất kỳ điểm nào, thay vào đó sẽ tràn. Một ví dụ được hiển thị trong phần tử mã bên dưới. Văn bản vẫn tiếp tục, mặc dù nó đến cuối vùng chứa

Thẻ HTML cho văn bản là gì?