HTML Cơ Bản

[Bài 4] Các thẻ trong trong phần HEAD file HTML – khai báo website

4.8/5 - (6 bình chọn)
Phần tử HEAD trong file HTML

Phần tử HEAD trong file HTML

Trong bài này chúng ta sẽ tìm hiểu các thẻ nằm trong thẻ <head> trong file html. Đây là các thẻ để khai báo website, nó ảnh hưởng rất nhiều đến SEO Engine.

Trong thẻ <head> ta sẽ có các thẻ cơ bản:

  • <title></title>: Khai báo tiêu đề website
  • <meta />: Khai báo các thông tin về website.
  • <link />: Thẻ này về cơ bản thường dùng để thêm file css vào website, ngoài ra nó còn có dùng để khai báo 1 số thứ khác nữa.
  • <script></script>: Thẻ này đề chúng ra thêm file javascript vào website hoặc viết javascript trực tiếp trên file html.
  • <style></style>: Thẻ này đề chúng ra viết css trực tiếp trên file html.

Chúng ta cùng tìm hiểu về các thẻ này, cách viết ra sao, các thuộc tính như thế nào?

    • Thẻ <title>

Ví dụ:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <title>Lập trình PHP - Thủ thuật wordpress - Thủ thuật internet</title>
  </head>
  <body>
    <!-- Nội dung website trong đây -->
  </body>
</html>

Khi chúng ta khai báo như vậy thì nó sẽ có các tác dụng:
– Định nghĩa một tiêu đề trong thanh công cụ của trình duyệt

Các thẻ trong thẻ head – khai báo website
– Hiển thị tiêu đề cho trang web trong kết quả của các công cụ tìm kiếm

Các thẻ trong thẻ head – khai báo website
– Cung cấp một tiêu đề cho trang khi nó được thêm vào mục yêu thích

Các thẻ trong thẻ head – khai báo website

    • Thẻ <meta />

Ví dụ:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="Chia sẻ thủ thuật wordpress, thủ thuật web, php, html, css, get link cURL, API, hướng dẫn lập trình cơ bản đến nâng cao, SEO marketing online."/>
    <meta name="keywords" content="HTML, CSS, XML, PHP, JavaScript">
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Lập trình PHP - Thủ thuật wordpress - SEO marketing online" />
    <meta name="twitter:title" content="Lập trình PHP - Thủ thuật wordpress - SEO marketing online"/>
    <meta name="twitter:site" content="@blogit_vn"/>
  </head>
  <body>
    <!-- Nội dung website trong đây -->
  </body>
</html>

– meta charset: khai báo kiểu ngôn ngữ trong trang
– meta name=”viewport”: cái này để website có thể hiển thị trên tất cả thiết bị (responsive).
– meta name=”description”: định nghĩa các mô tả cho website của bạn
– meta name=”keywords”: định nghĩa các từ khoá cho bộ máy tìm kiếm
– meta property=”og:…”: thuộc tính property giá trị og: này là dành cho facebook, khi các bạn share link bài viết lên facebook thì nó sẽ dựa vào đây để hiện thị, có rất nhiều thuộc tính như: og:type, og:locale, og:title, og:description, og:url, og:site_name…
– meta name=”twitter:…”: thuộc tính name=”twitter:…” cũng giống như property=”og:…” nhưng nó dành cho twitter.
…Và còn rất nhiều thẻ meta với các thuộc tính khác các bạn tự tìm hiểu nhé.

    • Thẻ <link />

Thẻ này hay được dùng nhất để liên kết đến mội file css cho trang web.

<!DOCTYPE html>
<html lang="vi">
  <head>
    <link rel="icon" href="http://data.blogit.vn/images/logo-ico.png" type="image/x-icon" />
    <link rel='stylesheet' id='stylesheet-css' href='./css/style.css' type='text/css'/>
  </head>
  <body>
    <!-- Nội dung website trong đây -->
  </body>
</html>

Đoạn code trên còn có thẻ link rel="icon" thẻ này là để thêm icon lên thanh công cụ trình duyệt, bạn để ý trước title nó có cái icon trên trình duyệt đó.

    • Thẻ <script>

Nếu bạn muốn viết script trực tiếp trên website:

<script type='text/javascript'>
 script viết tại đây
</script>

Hoặc bạn viết jquery ở 1 file riêng rồi thêm file này vào website

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Có thể bạn chưa biết javascript là gì? Hãy qua phần học javascript cơ bản nhé.(Serie đang update)

    • Thẻ <style>

Thể này để bạn viết css trực tiếp trên website:

<style type="text/css">
 css viết tại đây
</style>

Lời kết:
Các thẻ thông dụng thường được sử dụng vào trong <head></head> mình đã giới thiệu cho các bạn rồi, bài tiếp mình sẽ giới thiệu các thẻ định dạng font chữ, headline… được nằm trong <body></body>

Từ khóa tìm kiếm:

  • thêm thẻ <head> vào html
Tags:

Related Posts

Add Comment