Mã lập trình trong HTML


Định dạng cho mã lập trình trong HTML

Những văn bản thông thường được hiển thị lên trang web theo mặc định. Font chữ, kích thước hay khoảng cách chữ có thể quy định bằng CSS hoặc nếu không do trình duyệt đảm nhận.

Tuy vậy, nếu muốn trình duyệt hiểu những văn bản bạn viết là mã lập trình, hãy sử dụng các thẻ <kbd>, <samp> hay <code>


Định dạng mã bằng thẻ <kbd>

Thẻ <kbd> dùng để định nghĩa văn bản nhập từ bàn phím. kbd là viết tắt của keyboard.

Ví dụ:

<p>Để mở một file, bạn chọn:</p>
<p><kbd>File | Open...</kbd></p>

See the Pen oXYwVN by Nguyễn Duy Hiếu (@hieu3210) on CodePen.


Định dạng mã bằng thẻ <samp>

 Thẻ <samp> viết tắt của sample (ví dụ) dùng để định nghĩa dữ liệu ra cho mã:

Ví dụ:

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

See the Pen waoeZq by Nguyễn Duy Hiếu (@hieu3210) on CodePen.


Dùng thẻ <code> cho mã lập trình

Thẻ <code> dùng để định nghĩa các dòng mã lập trình.

Ví dụ:

<code>
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" }
</code>

See the Pen xGRreo by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 


Thẻ <pre> giúp giữ nguyên định dạng mã

Thẻ <pre> thường dùng để bao đóng đoạn mã định nghĩa bởi thẻ <code>. Việc dùng thẻ <pre> sẽ giúp cho định dạng dấu cách, xuống dòng giống như trong mã của bạn.

Ví dụ:

<code>
<pre>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

See the Pen jPVwoz by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 


Thẻ <var> dùng định nghĩa biến số

Thẻ <var> được dùng để định nghĩa các biến trong toán học.

Ví dụ:

<p>Einstein đã tìm ra:</p>

<p><var>E = m.c<sup>2</sup></var></p>

See the Pen doORBo by Nguyễn Duy Hiếu (@hieu3210) on CodePen.