Bài 2. Tìm hiểu các thẻ trong ngôn ngữ HTML

21/05/2017 Nguyễn Trung Hiếu

Các thẻ trong html giúp định dạng tài liệu, hiểu rõ các thẻ này sẽ giúp các bạn xây dựng lên các trang web có định dạng hợp mắt, giúp người truy cập cảm thấy thân thiện hơn và hoạt động tốt hơn với các cỗ máy tìm kiếm

Thẻ

Mô tả, ý nghĩa

<!--...-->

Tạo phần chú thích trong ngôn ngữ HTML

Ví dụ:

<!--Đây là dòng chú thích, nó không hiển thị trên trình duyệt-->

<p>Còn đây là một đoạn văn bản.</p>

<!DOCTYPE>

Định nghĩa kiểu văn bản HTML, văn bản HTML theo chuẩn nào: Ví dụ:

<!DOCTYPE html> <!-- khai báo văn bản theo chuẩn HTML5 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- Khai báo HTML 4.01 Strict, hỗ trợ đầy đủ các thẻ HTML trử thẻ font và frameset -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- Khai báo HTML 4.01 Transitional, hỗ trợ đầy đủ các thẻ HTML gồm thẻ font nhưng không hỗ trợ frameset -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!-- Khai báo HTML 4.01 Frameset, hỗ trợ đầy đủ các thẻ HTML gồm thẻ font và cả frameset -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- Khai báo HTML 1.0, hỗ trợ đầy đủ các thẻ HTML nhưng không hỗ trợ thẻ font và frameset -->

<a>

Định nghĩa một siêu liên kết.

Ví dụ: <a href="http://thoidaijsc.vn">Ghé thăm trang web Công ty Cổ phần Phát triển số Thời Đại!</a>

Cú pháp: <a target="_blank|_self|_parent|_top|framename">

Theo mặc định, một liên kết sẽ mở ngay trong cửa sổ hiện tại của trình duyệt. Nếu muốn mở ở cửa sổ khác, thực hiện thiết lập bằng thuộc tính target

_blank: mở liên kết tại một cửa sổ mới hoặc một tab mới

_self: mở liên kết tại khung mà nó được click

_parent: mở liên kết trong khung chứa nó

_top: nó sẽ nhảy tới tab hiện tại

Framename: mở liên kết trong một frame

 

Mặc định, các liên kết sẽ được gạch chân và có màu sắc khác trên các trình duyệt

Liên kết chưa thăm có gạch chân và màu xanh da trời

Liên kết đã thăm có gạch chân và màu tím

Liên kết đang chọn, bấm có màu đỏ

Các đặc điểm này có thể thay đổi nếu được định dạng lại bằng CSS hay thiết lập của trình duyệt.

Chú ý: Các thuộc tính type không thể thực hiện nếu thiếu thuộc tính href

<abbr>

Định nghĩa một từ viết tắt

Ví dụ:

Tổ chức <abbr title="World Health Organization">WHO</abbr> được thành lập năm 1948.

-          Khi các bạn di chuột qua từ WHO thì nó sẽ hiển thị một tooltip với nội dung trong thẻ abbr

<acronym>

Không hỗ trợ trong HTML5. Sử dụng thẻ <abbr> thay thế

<address>

Định nghĩa các thông tin, địa chỉ liên hệ

Ví dụ:

<address>
Viết bởi <a href="mailto:webmaster@thoidaijsc.vn">Thoi Dai, JSC</a>.<br> 
Trang Web:<br>
thoidaijsc.vn<br>
404 Hai Bà Trưng, Phúc Yên, Vĩnh Phúc<br>
Việt Nam
</address>

<applet>

Không hỗ trợ trong HTML5. Sử dụng <embed> hoặc <object> để thay thế

<area>

Định nghĩa một vùng bản đồ ảnh, liên kết sử dụng các vùng trong một hình ảnh. Thẻ area phải nằm trong thẻ map

Ví dụ:

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

-          Các thuộc tính

Alt: một đoạn văn bản mô tả về khu vực mà thẻ sử dụng

Coords: xác định tọa độ khu vực

Download: (HTML5)

Href: đường dẫn (liên kết) tới khu vực

Hreflang: (HTML5)

Media: (HTML5)

Nohref:

Rel: (HTML5)

Shape: Xác định hình dạng khu vực (default, Rect, circle, poly)

Target: xác định kiểu của liên kết href (_blank, _parent, _self, _top, framename)

Type: (HTML5)

<article>

(HTML5)

Là một thẻ mới trong HTML5, dùng định nghĩa một bài viết, phần nội dung độc lập so với phần còn lại của trang web (như 1 bài viết trong blog, forum, tin tức, bình luận)

Ví dụ:

<article>
  <h1>Học ngôn ngữ HTML</h1>
  <p>Tìm hiểu về ngôn ngữ HTML </p>
</article>

<aside>

Định nghĩa phần nội dung liên quan tới bài viết chính

Ví dụ:

<p>Chúng tôi đã đặt hàng dịch vụ thiết kế web tại Thoi Dai,. JSC để xây dựng hình ảnh trực tuyến của mình.</p>

<aside>
  <h4>Thoi Dai,. JSC</h4>
  <p>Công ty cổ phần Phát triển số Thời Đại, chuyên cung cấp dịch vụ thiết kế Web, domain, hosting, digital marketing..</p>
</aside>

<audio>

Chèn âm thanh từ file vào trang web

Ví dụ:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Trình duyệt không hỗ trợ thẻ audio.
</audio>

Hiện tại, thẻ có 3 định dạng file được hỗ trợ là ogg, mp3 và wav

-          Thuộc tính

Autoplay: xác định tự động chơi audio
controls: xác định hiển thị các nút điều khiển audio

Loop: xác định chơi lặp lại audio

Muted:

Preload:

Src: chỉ định đường dẫn tới file audio

<b>

Tạo văn bản in đậm

Ví dụ: Chúng tôi, <b>Thoi Dai, JSC</b> luôn cố gắng mang đến dịch vụ tốt nhất cho các bạn.

<base>

Xác định phần đường dẫn cơ sở cho các liên kết tương đối url/target trong tài liệu, thẻ này nằm trong phần head

Ví dụ:

<!DOCTYPE html>

<html>

<head>

  <base href="http://www.thoidaijsc.vn/images/" target="_blank">

</head>

<body>

<p><img src="logo.png" width="24" height="39" alt="Thoi Dai, JSC logo"> - Logo có địa chỉ tại " http://www.thoidaijsc.vn/images/logo.png".</p>

 

<p><a href=" http://www.thoidaijsc.vn">Thoi Dai, JSC</a> - Liên kết này sẽ mở trong cửa sổ mới dù không có thuộc tính target="_blank". Vì target mặc định được đặt bởi thẻ base "_blank".</p>

 

</body>

</html>

<basefont>

xác định màu sắc, font chữ, kích thước mặc định của toàn bộ văn bản trong trang

Thẻ này không hỗ trợ trong HTML5, mà dùng CSS để thay thế

<bdi>

Thẻ <bdi> là một phần tử phân biệt có tính hai chiều mà được sử dụng để nhúng văn bản với một phương hướng khác từ một văn bản khác.

<bdo>

Thay đổi hướng hiển thị văn bản hiện tại

Ví dụ:

<bdo dir="rtl">
This text will go right-to-left.
</bdo>

-          Thuộc tính

Dir: chỉ định hướng hiển thị văn bản (ltr: từ trái qua phải, rtl: từ phải qua trái)

<big>

Không hỗ trợ trong HTML5. Dùng CSS để thay thế
Định nghĩa văn bản in đậm

<blockquote>

Định nghĩa một đoạn trích dẫn từ một nguồn khác

<body>

Định nghĩa phần nội dung của trang web

<br>

Tạo một dấu ngắt dòng trong văn bản

<button>

Chèn một nút ấn vào tài liệu HTML

<canvas>

Dùng vẽ các đối tượng đồ họa, sử dụng script thường là javascript

Ví dụ:

<!DOCTYPE html>

<html>

<body>

 

<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

 

<script>

 

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = "#FF0000";

ctx.fillRect(0, 0, 80, 100);

</script>

<p><strong>Note:</strong> The canvas tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>

</html>

-          Thuộc tính

Height: chiều cao

Width: chiều ngang

<caption>

Định nghĩa tiêu đề cho bảng, thẻ này hải chèn ngay sau thẻ table, mặc định tiêu đề bảng ở trên và căn giữa, có thể thay đổi vị trí bởi thuộc tính CSS caption-side

Ví dụ:

<table>
<caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

-          Thuộc tính

Align: xác định căn chỉnh văn bản

                Left: căn trái mặc định

                Right: căn phải

                Top: trên

                Bottom: dưới

<center>

Thẻ này không được hỗ trợ trong HTML5, sử dụng CSS để thay thể.
Căn giữa

<cite>

Defines the title of a work

<code>

Hiển thị văn bản dạng mã lệnh máy tính

Ví dụ:

<html>

<body>

<em>Emphasized text</em><br>

<strong>Strong text</strong><br>

<code>A piece of computer code</code><br>

<samp>Sample output from a computer program</samp><br>

<kbd>Keyboard input</kbd><br>

<var>Variable</var>

</body>

</html>

 

<col>

Xác định các thuộc tính định dạng cho mỗi cột trong một nhóm, nhóm bởi thẻ <colgroup>

<colgroup>

Nhóm một hay nhiều cột trong một bảng để định dạng

Ví dụ:

<table>

  <colgroup>

    <col span="2" style="background-color:red">

    <col style="background-color:yellow">

  </colgroup>

  <tr>

    <th>ISBN</th>

    <th>Title</th>

    <th>Price</th>

  </tr>

  <tr>

    <td>3476896</td>

    <td>My first HTML</td>

    <td>$53</td>

  </tr>

  <tr>

    <td>5869207</td>

    <td><em>My first CSS</em></td>

    <td>$49</td>

  </tr>

</table>

 

<data>

 

<datalist>

Tạo một danh sách chọn cho thẻ input

Ví dụ:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

<dl>

<dt>

<dd>

dl: Tạo một danh sách khái niệm, mô tả

dt: Tạo một mục khái niệm trong danh sách

dd: Mô tả cho khái niệm

Ví dụ:

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

<del>

Hiển thị văn bản bị xóa trong tài liệu (có đường kẻ ngang)

Ví dụ:

<p>Hiện nay, hầu hết các trình duyệt đều hỗ trợ <del> HTML4.1</del> <ins>HTML5</ins>!</p>

<details>

Tạo phần thông tin chi tiết mà người dùng có thể ẩn/hiện, dùng cùng với thẻ summary

Ví dụ:

<details>
  <summary>Copyright 2015-2017.</summary>
  <p> - by Thoi Dai, JSC. All Rights Reserved.</p>
  <p>Toàn bộ mội dung và hình ảnh đồ họa trên website này thuộc bản quyền của Thoi Dai, JSC.</p>
</details>

<dfn>

Trình bày định nghĩa của một khái niệm

Ví dụ:

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

<dialog>

Tạo một hộp thoại hay cửa sổ

Ví dụ:

<dialog open>This is an open dialog window</dialog>

-          Thuộc tính open xác định ẩn hoặc hiện hộp thoại

<dir>

Không hỗ trợ trên HTML5 lên sử dụng <ul> để thay thế

<div>

Tạo một vùng trong tài liệu, định dạng các thành phần trong vùng bởi CSS, trong thẻ div có thể chứa các thẻ HTML khác và cả thẻ div.

Ví dụ:

<div style="color:#0000FF">
  <h3>Đây là tiêu đề mức 3</h3>
  <p>Đây là một đoạn văn bản.</p>
</div>

<em>

Tạo chữ dạng nhấn mạnh (in nghiêng)

Ví dụ:

<em>Thiết kế web/nội dung này nghiêng</em>

<embed>

Nhúng một ứng dụng khác vào tài liệu HTML

Ví dụ:

<embed src="helloworld.swf">

<fieldset>

Nhóm các phần tử liên quan trong một biểu mẫu

Ví dụ:

<form>

  <fieldset>

    <legend>Personalia:</legend>

    Name: <input type="text"><br>

    Email: <input type="text"><br>

    Date of birth: <input type="text">

  </fieldset>

</form>

<figcaption>

Tạo tiêu đề cho thẻ <figure>

Ví dụ:

<figure>

  <img src="tintuc.jpg" alt="Tin tức" width="300" height="228">

  <figcaption>Steve Jobs Những cống hiến</figcaption>

</figure>

<figure>

Sử dụng thẻ này để đánh dấu hình ảnh

Ví dụ:

<figure>

  <img src="tintuc.jpg" alt="Tin tức" width="300" height="228">

  <figcaption>Steve Jobs Những cống hiến</figcaption>

</figure>

<font>

Không hỗ trợ trên HTML5 sử dụng css để định nghĩa font

<footer>

Định nghĩa phần cuối của tài liệu hoặc một phần

<form>

Định nghĩa một biểu mẫu nhận dữ liệu từ người dùng

Ví dụ:

<form action="/action_page.php" method="get">

  Họ tên: <input type="text" name="fname"><br>

  Cơ quan: <input type="text" name="lname"><br>

  <input type="submit" value="Submit">

</form>

<frame>

Không hỗ trợ trên HTML5, khai báo cửa sổ con trong cửa sổ trình duyệt nằm trong frameset

<frameset>

Không hỗ trợ trên HTML5
Khai báo khung chứa các cửa sổ con

Ví dụ:

<frameset cols="25%,50%,25%">

  <frame src="frame_a.htm">

  <frame src="frame_b.htm">

  <frame src="frame_c.htm">

</frameset>

<h1> to <h6>

Các mức tiêu đề trong tài liệu

<head>

Khai báo những thông tin về tài liệu HTML

<header>

Định nghĩa phần đầu của tài liệu hoặc một vùng

<hr>

Tạo một đường kẻ ngang

<html>

Khai báo gốc của tài liệu HTML

<i>

Khai báo một đoạn trong văn bản chữ nghiêng

Ví dụ:

<p>Thiết kế web <i>thật vui</i></p>

<iframe>

Chèn nội dung một trang khác vào trang HTML hiện tại

Ví dụ:

<iframe src="https://tinhocthoidai.vn"></iframe>

<img>

Chèn một hình ảnh

Ví dụ:

<img src="vidu.gif" alt="Vi du" height="50" width="50">

<input>

Định nghĩa một điều khiển form

Ví dụ:

<form action="/action_page.php">

  First name: <input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  <input type="submit" value="Submit">

</form>

-          Thuộc tính

Accept:

Align:

Alt:

Autocomplete:

Autofocus:

Checked:

Dirname:

Disable:

Form:

Formation:

Formenctype:

Formmethod:

Formnovalidate:

Formtarget:

Height:

List:

Max:

Maxlength:

Min:

Multiple:

Name:

Pattern:

Placeholder:

Readonly:

Required: (HTML5) buộc người dùng phải nhập dữ liệu mới submit đc

Size:

Src:

Step:

Type:

                Button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week

Value:

Width:

<ins>

Báo hiệu đoạn văn bản được thêm vào tài liệu

<kbd>

Định dạng văn bản dạng ký tự bàn phím

Ví dụ:

<em>Emphasized text</em><br>

<strong>Strong text</strong><br>

<code>A piece of computer code</code><br>

<samp>Sample output from a computer program</samp><br>

<kbd>Keyboard input</kbd><br>

<var>Variable</var>

<keygen>

xác định một cặp trường khóa chính sử dụng cho <form>

Ví dụ:

<form action="/action_page.php" method="get">

  Username: <input type="text" name="usr_name">

  Encryption: <keygen name="security">

  <input type="submit">

</form>

<label>

Tạo nhãn cho một thẻ <input>

<legend>

Định nghĩa một chú thích cho các phần tử <fieldset>

Ví dụ:

<form>

  <fieldset>

    <legend>Personalia:</legend>

    Name: <input type="text" size="30"><br>

    Email: <input type="text" size="30"><br>

    Date of birth: <input type="text" size="10">

  </fieldset>

</form>

<li>

Định nghĩa một mục trong danh sách

<link>

xác định mối quan hệ giữa một tài liệu HTML và các tài nguyên bên ngoài, được dùng phổ biến nhất là link tới tài liệu css, được viết bên trong tag <head>

Ví dụ:

<head>

  <link rel="stylesheet" type="text/css" href="theme.css">

</head>

-          Thuộc tính

Charset: (không hỗ trợ trong html5)

Crossorigin: (HTML5)

Href:

Hreflang:

Media:

Rel:

                alternate, author, dns-prefetch, help, icon, license, next, pingback, preconnect, refetch, preload, prerender, prev, search, stylesheet

rev: (Không hỗ trợ trong HTML5)

sizes: (HTML5) xác định chiều cao, ngang và chỉ dung cho rel=”icon”

Target:

Type:

<main>

(HTML5)

Xác định nội dung chính của tài liệu, thẻ mới trong HTML5

Ví dụ:

<main>

  <h1>Web Browsers</h1>

  <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

 

  <article>

    <h1>Google Chrome</h1>

    <p>Google Chrome is a free, open-source web browser developed by Google,

    released in 2008.</p>

  </article>

 

  <article>

    <h1>Internet Explorer</h1>

    <p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>

  </article>

 

  <article>

    <h1>Mozilla Firefox</h1>

    <p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>

  </article>

</main>

<map>

Được dùng để định nghĩa một vùng có thể click được bên trong một image. Trong tag <map> bắt buộc phải có thuộc tính name, thuộc tính này kết hợp với thuộc tính của image (image có sử dụng map) để tạo ra mối quan hệ giữa image và map

Thẻ <map> chứa một số thành phần <area>, những thành phần này xác định những khu vực có thể click được trên map

Ví dụ:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

 

<map name="planetmap">

  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

</map>

<mark> (HTML5)

Xác định văn bản được đánh dấu, sử dụng khi muốn làm nổi bật văn bản của mình.

Ví dụ:

<p>Thiết kế web <mark>Thời Đại</mark>.</p>

<menu>

(HTML5)

Được dùng để tạo một danh sách menu mà khi chúng ta phải chuột vào tài liệu, chú ý nó chỉ hoạt động trên firefox

Ví dụ:

<menu type="context" id="mymenu">

  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">

  </menuitem>

  <menu label="Share on...">

    <menuitem label="Twitter" icon="ico_twitter.png"

    onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">

    </menuitem>

    <menuitem label="Facebook" icon="ico_facebook.png"

    onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">

    </menuitem>

  </menu>

  <menuitem label="Email This Page"

  onclick="window.location='mailto:?body='+window.location.href;"></menuitem>

</menu>

<menuitem>

Tạo các tùy chọn lệnh command/menu thay thế cho menu chuột phải (menu ngữ cảnh)

<meta>

Cung cấp thông tin dữ liệu về văn bản HTML, thông tin dữ liệu sẽ không được hiển thị trên trình duyệt.

Thường được sử dụng để xác định mô tả trang (description), từ khóa (keywords), tác giả của văn bản (author), sửa đổi lần cuối (last modified) và thông tin dữ liệu khác.

Có thể được sử dụng bởi các trình duyệt (hiển thị nội dung hoặc tải lại trang), công cụ tìm kiếm (từ khoá), hoặc các dịch vụ web khác.

Luôn truyền dưới dạng các cặp tên và giá trị.

Ví dụ:

<head>

  <meta charset="UTF-8">

  <meta name="description" content="Free Web tutorials">

  <meta name="keywords" content="HTML,CSS,XML,JavaScript">

  <meta name="author" content="John Doe">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<meter>

(HTML5)

Định nghĩa một phép đo. Nó giống thanh process trên lập trình window

Ví dụ:

<meter value="2" min="0" max="10">2 out of 10</meter><br>

<meter value="0.6">60%</meter>

<nav>

Định nghĩa link danh mục (navigation).

Thường sử dụng cho global menu, local link, topic path, pager link ...

Ví dụ:

<nav>

  <a href="/html/">HTML</a> |

  <a href="/css/">CSS</a> |

  <a href="/js/">JavaScript</a> |

  <a href="/jquery/">jQuery</a>

</nav>

<noframes>

Không hỗ trợ trên HTML5

<noscript>

Được dùng để hiển thị nội dung thay thế, khi trình duyệt không hỗ trợ <script>, hoặc vô hiệu hóa <script>.

Noscript có thể chứa tất cả các tag HTML khác.

Nội dung bên trong tag <noscript> chỉ được hiển thị nếu <script> không được hỗ trợ hoặc bị vô hiệu hóa trong trình duyệt của người dùng.

Ví dụ:

<script>

document.write("Hello World!")

</script>

<noscript>Your browser does not support JavaScript!</noscript>

<object>

Được sử dụng để chứa các đối tượng như hình ảnh, âm thanh, video, Java applet, ActiveX, PDF, và Flash. Dự định để thay thế các yếu tố <img /> và <applet>. Tuy nhiên, do lỗi và thiếu hỗ trợ trình duyệt nên điều này đã không xảy ra.

Ví dụ:

<object width="500" height="500" data="helloworld.swf"></object>

 

Thuộc tính

Giá trị

Mô tả

align

top
bottom
middle
left
right

Not supported in HTML5.
Specifies the alignment of the <object> element according to surrounding elements

archive

URL

Not supported in HTML5.
A space separated list of URL's to archives. The archives contains resources relevant to the object

border

pixels

Not supported in HTML5.
Specifies the width of the border around an <object>

classid

class_ID

Not supported in HTML5.
Defines a class ID value as set in the Windows Registry or a URL

codebase

URL

Not supported in HTML5.
Defines where to find the code for the object

codetype

media_type

Not supported in HTML5.
The media type of the code referred to by the classid attribute

data

URL

Specifies the URL of the resource to be used by the object

declare

declare

Not supported in HTML5.
Defines that the object should only be declared, not created or instantiated until needed

form

form_id

Specifies one or more forms the object belongs to

height

pixels

Specifies the height of the object

hspace

pixels

Not supported in HTML5.
Specifies the whitespace on left and right side of an object

name

name

Specifies a name for the object

standby

text

Not supported in HTML5.
Defines a text to display while the object is loading

type

media_type

Specifies the media type of data specified in the data attribute

usemap

#mapname

Specifies the name of a client-side image map to be used with the object

vspace

pixels

Not supported in HTML5.
Specifies the whitespace on top and bottom of an object

width

pixels

Specifies the width of the object

<ol>

Sử dụng để tạo danh sách có thứ tự

Ví dụ:

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

 

<ol start="50">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

Thuộc tính

Giá trị

Mô tả

compact

compact

Not supported in HTML5.
Specifies that the list should render smaller than normal

reversed

reversed

Specifies that the list order should be descending (9,8,7...)

start

number

Specifies the start value of an ordered list

type

1
A
a
I
i

Specifies the kind of marker to use in the list

<optgroup>

Dùng để nhóm các tùy chọn (option) trong danh sách chọn lựa select (danh sách thả xuống). Nếu có một danh sách tùy chọn dài, việc nhóm các tùy chọn cùng loại sẽ dễ dàng quản lý và sử dụng hơn. Sử dụng thuộc tính bắt buộc "label" để đặt tiêu đề cho các nhóm tùy chọn.

Ví dụ:

<select>

  <optgroup label="Swedish Cars">

    <option value="volvo">Volvo</option>

    <option value="saab">Saab</option>

  </optgroup>

  <optgroup label="German Cars">

    <option value="mercedes">Mercedes</option>

    <option value="audi">Audi</option>

  </optgroup>

</select>

<option>

Định nghĩa một tùy chọn trong danh sách chọn lựa (danh sách thả xuống).

Ví dụ:

<select>

  <option value="volvo">Volvo</option>

  <option value="saab">Saab</option>

  <option value="opel">Opel</option>

  <option value="audi">Audi</option>

</select>

Thuộc tính

Giá trị

Mô tả

disabled

disabled

Specifies that an option should be disabled

label

text

Specifies a shorter label for an option

selected

selected

Specifies that an option should be pre-selected when the page loads

value

text

Specifies the value to be sent to a server

<output>

(HTML5)

Đại diện cho kết quả của phép tính (giống như được thực hiện bởi script).

Ví dụ:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" id="a" value="50">100

+<input type="number" id="b" value="50">

=<output name="x" for="a b"></output>

</form>

<p>

Định nghĩa một đoạn văn bản.

<param>

Được dùng để xác định tham số cho thành phần <object> hoặc <applet>.

(không được hỗ trợ trên HTML5)

<picture>

(HTML5)

Thẻ này giúp thay đổi đường dẫn ảnh theo tỷ lệ chiều ngang của khung đối tượng

Ví dụ:

<picture>

  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">

  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">

  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">

</picture>

<pre>

Định dạng một đoạn văn bản theo định dạng mà nó được định sẵn, nếu các bạn không dùng thẻ này khi các bạn nhập một đoạn văn bản vào sẽ bị trình duyệt xóa nhưng ký tự như xuống dòng hoặc tab để chuyển thành một đoạn văn bản, nhưng nếu sử dụng thẻ này cho đoạn văn bản đó thẻ định dạng sẽ được dữ nguyên

Ví dụ:

<pre>

Buoi trua an buoi chua

Trong dam       j         dep bang sen

</pre>

<progress>

(HTML5)

Mô tả tiến trình làm việc, giống thanh progress bar trong lập trình window

Ví dụ:

<progress value="22" max="100"></progress>

<q>

Định nghĩa một đoạn trích dẫn ngắn

Ví dụ:

<p>Maketing online:

<q>Sự bùng nổ internet tại Việt Nam</q>

Cơ hội tiếp cận công nghệ maketing.</p>

<rp>

(HTML5)

Hiển thị những nội dung bên trong khi trình duyệt không hỗ trợ tag <ruby>.

<rt>

(HTML5)

Định nghĩa một lời giải thích hoặc cách phát âm của các kiểu chữ Đông Á.

<ruby>

Định nghĩa một chú thích ruby (đối với kiểu chữ Đông Á).

<s>

Xác định đoạn văn bản sai

<samp>

Các thẻ <tt>, <i>, <b>, <big>, <small>, <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var> và <cite> được dùng để định dạng kiểu cho font, dùng phổ biến trong html4, khuyến cáo sử dụng css để thay thế.

<script>

Dùng để xác định một kịch bản (script) phía máy khách (clien), chẳng hạn như javascript.

Ví dụ:

<script>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

<section>

(HTML5)

Định nghĩa một khu vực (vùng bao) trong văn bản HTML.

Ví dụ:

<section>

  <h1>Thiết kế web</h1>

  <p>Thiết kế giao diện HTML</p>

</section>

<select>

Được dùng để tạo một danh sách chọn lựa (danh sách thả xuống).

<small>

Định nghĩa một đoạn văn bản chữ nhỏ

<source>

(HTML5)

Xác định nguồn cho thành phần media, như tag <video>, <audio>.

Ví dụ:

<audio controls>

  <source src="horse.ogg" type="audio/ogg">

  <source src="horse.mp3" type="audio/mpeg">

  Your browsser does not support the audio element.

</audio>

<span>

Được sử dụng để nhóm các inline trong văn bản HTML.

<strike>

Không hỗ trợ trên HTML5

<strong>

Các thẻ <tt>, <i>, <b>, <big>, <small>, <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var> và <cite> được dùng để định dạng kiểu cho font, dùng phổ biến trong html4, khuyến cáo sử dụng css để thay thế.

<style>

Được dùng để định dạng một văn bản HTML.

Ví dụ:

<head>

<style type="text/css">

</style>

</head>

<sub>

Tạo một ký tự nhỏ bên dưới.

<summary>

(HTML5)

Xác định một tiêu đề cho tag <details>, được sử dụng để mô tả chi tiết về tài liệu, hoặc các bộ phận của tài liệu.

<sup>

Tạo một ký tự nhỏ bên trên.

<table>

Định nghĩa một bảng

Tag <table> đơn giản có chứa một hoặc nhiều <tr>, <th> và <td>, trong đó:

<tr> xác định hàng của table.

<th> xác định phần tử tiêu đề của table.

<td> xác định phần tử nội dung của table

Một table phức tạp có thể bao gồm nhiều thành phần khác, gồm: <caption>, <col>, <colgroup>, <thead>, <tfoot>, và <tbody>.

<tbody>

Được dùng để nhóm các thành phần nội dung trong <table>.

<tbody> nên được kết hợp với tag <tfoot> và tag <thead>, trong đó:

Thẻ <tfoot> được dùng để nhóm các thành phần cuối trong <table>.

Thẻ <thead> dùng để nhóm các thành phần đầu trong <table>.

Ví dụ:

<tbody>

  <tr>

     <td>January</td>

     <td>$100</td>

  </tr>

  <tr>

      <td>February</td>

      <td>$80</td>

  </tr>

</tbody>

<td>

Định nghĩa cột trong table

<textarea>

Định nghĩa một ô nhập liệu nhiều dòng

<tfoot>

Nhóm các thành phần cuối trong bảng

<th>

Định nghĩa các cột tiêu đề trong bảng table

<thead>

Nhóm các thành phần trên trong bảng

<time>

(HTML5)

Xác định thời gian, ngày tháng, hoặc năm sinh.

<title>

Định nghĩa tiêu đề của tài liệu

Ví dụ:

<head>

                <title>Thiết kế web Thời Đại</title>

</head>

<tr>

Định nghĩa hàng trong bảng table

<track>

Chỉ định đường dẫn văn bản cho các phần tử media (<audio> và <video>).

<tt>

Không hỗ trợ trên HTML5

<u>

Xác định chữ gạch chân trong một đoạn văn bản

Ví dụ:

<p>Chữ <u>gạch chân</u>.</p>

<ul>

Sử dụng để tạo danh sách không có thứ tự.

<var>

<tt>, <i>, <b>, <big>, <small>, <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var> và <cite> được dùng để định dạng kiểu cho font, dùng phổ biến trong html4, khuyến cáo sử dụng css để thay thế.

<video>

(HTML5)

Định nghĩa video

<wbr>

(HTML5)

Xác định text quá dài sẽ tự động xuống hàng (không tràn layout).

Tag: thiết kế webtự học htmltìm hiểu htmlhọc htmlhọc csshọc lập tình webtìm hiểu javascriptgiới thiệu HTML

Đang phát triển ...

Bài viết liên quan

Hộp trò chuyện tích hợp website, live chat tích hợp website

Là hộp thoại nhỏ hiển thị trên website được tích hợp vào website bằng một đoạn mã javascript, có chức năng chat trực tiếp với khách truy cập website

Bài 1. Tìm Hiểu HTML

Trang mạng (tiếng Anh: website), còn gọi là trang web, là một tập hợp trang web, thường chỉ nằm trong một tên miền hoặc tên miền phụ trên World Wide Web của Internet. Một trang web là tập tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP.

Bảng ký tự đặc biệt trong HTML

Trong ngôn ngữ html có những ký tự đặc biệt mà chưa phải ai học lập trình web cũng biết dưới đây là bảng danh sách các ký tự đặc biệt trong html mà các bạn cần biết hoặc đôi khí sẽ sử dụng tới

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Cuộc tấn công vào NHS đã sử dụng một dạng ransomware có tên Wanacryptor và nhắm mục tiêu vào hàng nghìn tổ chức ở 74 quốc gia. Ransomware là một dạng tấn công mạng có liên quan đến việc các hacker nắm quyền kiểm soát máy tính hoặc thiết bị di động và yêu cầu đòi tiền chuộc. Bằng nhiều cách, những kẻ tấn công tải phần mềm độc hại vào thiết bị và mã hóa thông tin của nạn nhân.

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Trong Word nói riêng, Office nói chung, có lẽ ai cũng biết chức năng tìm kiếm và thay thế nội dung văn bản, nhưng ngoài ra, còn nhiểu chức năng khác trong hộp thoại tìm kiếm và thay thế mà không phải ai cũng biết để sử dụng. Trong đó có tìm kiếm và thay thế định dạng, sử dụng các ký hiệu đại diện, các ký tự đặc biệt… 

Bài 6: Thủ thuật outlook 2010

Bài 6: Thủ thuật outlook 2010

Bài viết giới thiệu đến các bạn một số thủ thuật được dùng trong outlook 2010, để giúp công việc của các bạn được dễ dàng hơn.

Bài 5: Quản lý các thông tin trong  outlook 2010

Bài 5: Quản lý các thông tin trong outlook 2010

Bài viết giới thiệu về phương pháp quản lý thông tinn trong outlook 2010. Chúng ta hãy cùng tìm hiểu xem có điểm gì khác và nổi bật so với outlook 2007

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Để công việc của đạt hiệu quả cao hơn, chúng ta hãy cùng nhau tìm hiểu cách sử dụng lịch làm việc một cách hiệu quả hơn trong outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài viết sau đây sẽ giới thiệu về mục quản lý hộp thư của bạn về dung lượng và lưu trữ trong microsoft outlook 2010.

Hàm SLEEP trong PHP

Hàm SLEEP trong PHP

Có những lúc trong công việc lập trình ta cần mã tạm dừng theo một thời gian định trước thì trong php có hỗ trợ hàm sleep để các bạn làm điều này.

Hàm Rand trong PHP

Hàm Rand trong PHP

Đôi lúc chúng ta lập trình cần đến những con số sinh ngẫu nhiên vào những công việc khách nhau hôm này mình xin giới thiệu với mọi người hàm sinh số ngẫu nhiên trong PHP

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Các bạn tự học PHP nên biết về lập trình hướng đối tượng trong PHP, kỹ thuật lập trình hỗ trợ công nghệ đối tượng

Bài 8: Hàm có sẵn thông dụng trong PHP

Bài 8: Hàm có sẵn thông dụng trong PHP

Hàm thông dụng trong php cần biết, các bạn mới bắt đầu lên nắm rõ ý nghĩa cấu trúc cách dùng những hàm này để bổ trợ kiến thức sau này

Bài 7: Hàm trong PHP

Bài 7: Hàm trong PHP

Hàm do người sử dụng định nghĩa cho phép bạn xử lý những tác vụ thường lặp đi lặp lại trong ứng dụng. cách khai báo, cú pháp của hàm trong php