Các thẻ HTML cho văn bản

Khám phá các thẻ HTML khác nhau mà bạn có thể sử dụng để in văn bản trên một trang

Cácpnhãn

Thẻ này xác định một đoạn văn bản.

<p>Some text</p>

Đó là một phần tử khối.

Bên trong nó, chúng tôi có thể thêm bất kỳ phần tử nội tuyến nào mà chúng tôi thích, nhưspanhoặc làa.

Chúng tôi không thể thêm các phần tử khối.

Chúng tôi không thể làm tổpcác phần tử này thành một phần tử khác.

Theo mặc định, trình duyệt tạo kiểu cho một đoạn văn có lề ở trên cùng và ở dưới cùng.16pxtrong Chrome, nhưng giá trị chính xác có thể khác nhau giữa các trình duyệt.

Điều này làm cho hai đoạn văn liên tiếp được cách xa nhau, sao chép những gì chúng ta nghĩ về một “đoạn văn” trong văn bản in.

Cácspannhãn

Đây là một thẻ nội dòng có thể được sử dụng để tạo một phần trong một đoạn văn có thể được nhắm mục tiêu bằng cách sử dụng CSS:

<p>A part of the text <span>and here another part</span></p>

Cácbrnhãn

Thẻ này đại diện cho một ngắt dòng. Đó là một phần tử nội dòng và không cần thẻ đóng.

Chúng tôi sử dụng nó để tạo một dòng mới bên trongpmà không cần tạo một đoạn văn mới.

Và so với việc tạo một đoạn văn mới, nó không thêm khoảng cách bổ sung.

<p>Some text<br>A new line</p>

Các thẻ tiêu đề

HTML cung cấp cho chúng ta 6 thẻ tiêu đề. Từ quan trọng nhất đến ít quan trọng nhất, chúng tôi cóh1,h2,h3,h4,h5,h6.

Thông thường, một trang sẽ có mộth1phần tử, là tiêu đề trang. Sau đó, bạn có thể có một hoặc nhiềuh2các yếu tố tùy thuộc vào nội dung trang.

Các tiêu đề, đặc biệt là tổ chức tiêu đề, cũng rất cần thiết cho SEO và các công cụ tìm kiếm sử dụng chúng theo nhiều cách khác nhau.

Theo mặc định, trình duyệt sẽ hiển thịh1thẻ lớn hơn và sẽ làm cho kích thước phần tử nhỏ hơn khi số gầnhtăng:

Headings

Tất cả các tiêu đề đều là các phần tử khối. Chúng không thể chứa các phần tử khác, chỉ là văn bản.

Cácstrongnhãn

Thẻ này được sử dụng để đánh dấu văn bản bên trong nó làmạnh. Điều này khá quan trọng, nó không phải là một gợi ý trực quan, mà là một gợi ý ngữ nghĩa. Tùy thuộc vào phương tiện được sử dụng, cách giải thích của nó sẽ khác nhau.

Theo mặc định, các trình duyệt tạo văn bản trong thẻ nàyDũng cảm.

Cácemnhãn

Thẻ này được sử dụng để đánh dấu văn bản bên trong nó lànhấn mạnh. Thích vớistrong, nó không phải là một gợi ý trực quan mà là một gợi ý ngữ nghĩa.

Theo mặc định, các trình duyệt tạo văn bản trong nàyin nghiêng.

Báo giá

CácblockquoteThẻ HTML rất hữu ích để chèn các trích dẫn trong văn bản.

Theo mặc định, các trình duyệt áp dụng lợi nhuận choblockquotethành phần. Chrome áp dụng lề trái và phải 40px và lề trên và dưới 10px.

CácqThẻ HTML được sử dụng để trích dẫn nội tuyến.

Đường chân trời

Không thực sự dựa trên văn bản, nhưnghrthẻ thường được sử dụng bên trong một trang. Nó có nghĩa làhorizontal rule, và nó thêm một đường ngang trong trang.

Hữu ích để tách các phần trong trang.

Khối mã

Cáccodethẻ đặc biệt hữu ích để hiển thị mã, bởi vì các trình duyệt cung cấp cho nó một phông chữ monospaced.

Đó thường là điều duy nhất mà các trình duyệt làm. Đây là CSS được Chrome áp dụng:

code {
    font-family: monospace;
}

Thẻ này thường được bao bọc trong mộtprethẻ, bởi vìcodephần tử bỏ qua khoảng trắng và ngắt dòng. Giống nhưpnhãn.

Chrome choprekiểu mặc định này:

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}

điều này ngăn không gian trắng thu gọn và biến nó thành một phần tử khối.

Danh sách

Chúng tôi có 3 loại danh sách:

  • danh sách không có thứ tự
  • danh sách có thứ tự
  • danh sách định nghĩa

Danh sách không có thứ tự được tạo bằng cách sử dụngulnhãn. Mỗi mục trong danh sách được tạo vớilinhãn:

<ul>
	<li>First</li>
	<li>Second</li>
</ul>

Danh sách có thứ tự tương tự, chỉ được tạo vớiolnhãn:

<ol>
	<li>First</li>
	<li>Second</li>
</ol>

Sự khác biệt giữa hai danh sách này là danh sách được sắp xếp có một số trước mỗi mục:

Lists

Danh sách định nghĩa hơi khác một chút. Bạn có một thuật ngữ và định nghĩa của nó:

<dl>
	<dt>Flavio</dt>
	<dd>The name</dd>
	<dt>Copes</dt>
	<dd>The surname</dd>
</dl>

Đây là cách các trình duyệt thường hiển thị chúng:

Definition list

Tôi phải nói rằng bạn hiếm khi nhìn thấy chúng trong tự nhiên, chắc chắn là không nhiềuulvàol, nhưng đôi khi chúng có thể hữu ích.

Các thẻ văn bản khác

Có một số thẻ với mục đích trình bày:

  • cácmarknhãn
  • cácinsnhãn
  • cácdelnhãn
  • cácsupnhãn
  • cácsubnhãn
  • cácsmallnhãn
  • cácinhãn
  • cácbnhãn

Đây là một ví dụ về hiển thị trực quan của chúng được các trình duyệt áp dụng theo mặc định:

Various tags

Bạn có thể tự hỏi, thế nào làbkhác vớistrong? Và làm thế nàoikhác vớiem?

Sự khác biệt nằm ở ý nghĩa ngữ nghĩa. Trong khibvàilà một gợi ý trực tiếp trên trình duyệt để làm cho một đoạn văn bản in đậm hoặc nghiêng,strongvàemcung cấp cho văn bản một ý nghĩa đặc biệt và việc tạo kiểu tùy thuộc vào trình duyệt. Điều này xảy ra hoàn toàn giống vớibvài, theo mặc định. Mặc dù bạn có thể thay đổi điều đó bằng cách sử dụng CSS.

Có một số thẻ khác, ít được sử dụng hơn liên quan đến văn bản. Tôi chỉ đề cập đến những cái mà tôi thấy được sử dụng nhiều nhất.

Tải xuống miễn phí của tôiSổ tay HTML


Các hướng dẫn html khác:


Công nghệ Wiki trực tuyến!