HTML Загварчилалын заавирчилгаа болон кодчилолын тогтсон журам

7 min read

Агуулга

Тогтвортой, цэвэр, цэгтэй HTML код нь бусад хүмүүст таны кодыг уншиж ойлгоход хялбар болгодог.

Сайн HTML кодыг бий болгох зарим заавар, зөвлөмжийг энд оруулаж байна.

Баримтын төрлийг үргэлж зарлаж байх #

Баримтын төрлийг үргэлж баримт бичгийн эхний мөрөнд зарлаж байгаарай.

HTML-ийн баримт бичгийн зөв төрөл нь:

<!DOCTYPE html>

Элементийн нэршилд жижиг үсэг ашиглана  #

HTML нь элементийн нэршилд том жижиг үсгийг холих боломжийг олгодог.

Гэсэн хэдий ч бид элементийн нэршилд жижиг үсэг ашиглахыг зөвлөж байгаа шалтгаан нь:

  • Том жижиг үсгийг холих нь  эмх цэгцгүй, муухай харагдуулна
  • Хөгжүүлэгчид ихэвчлэн жижиг үсэг ашигладаг
  • Жижиг үсэг нь илүү цэвэрхэн харагдана
  • Жижиг үсгээр бичих нь илүү хялбар байдаг

Сайн:

<body> <p>This is a paragraph.</p> </body>

Bad:

<BODY> <P>This is a paragraph.</P> </BODY>

Бүх HTML элементийг хаах #

HTML дээр та бүх элементүүдийг хаах шаардлагагүй (жишээлбэл<p> элемент).

Гэсэн хэдий ч бид дараахь шиг бүх HTML элементүүдийг хаахыг зөвлөж байна.

Сайн:

<section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section>

Муу:

<section> <p>This is a paragraph. <p>This is a paragraph. </section>

Шинж чанарын нэршилд жижиг үгс ашиглах #

HTML нь шинж чагарын нэршилд том жижиг үсгийг холих боломжийг олгодог.

Гэсэн хэдий ч бид шинж чанарын нэршилд жижиг үсэг ашиглахыг зөвлөж байгаа шалтгаан нь:

  • Том жижиг үсгийг холих нь  эмх цэгцгүй, муухай харагдуулна
  • Хөгжүүлэгчид ихэвчлэн жижиг үсэг ашигладаг
  • Жижиг үсэг нь илүү цэвэрхэн харагдана
  • Жижиг үсгээр бичих нь илүү хялбар байдаг

Сайн:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Муу:

<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Шинж чанар дахь утганы 2 талд үргэлж хашилт аваарай #

HTML нь шинж чанарын утгыг хашилтгүйгээр зөвшөөрдөг.

Гэсэн хэдий ч бид хашилт авахыг зөвлөж байна учир нь:

  •  Хөгжүүлэгчид ихэвчлэн шинж чанарын утганд хашилт хийдэг
  • Хашилт хийсэн утга нь уншихад амархан
  • Хэрвээ утга зайтай байвал заавал хашилт авна

Сайн:

<table class="striped">

Муу:

<table class=striped>

Маш муу:

<table class=table striped>

Зурганд үргэлж alt, өргөн, өндрийг зааж өгөх хэрэгтэй #

Зургийн alt  шинж чанарыг үргэлж зааж өгөх хэрэгтэй. Хэрэв дүрсийг ямар нэгэн шалтгаанаар харуулах боломжгүй бол энэ шинж чанар нь чухал юм.

Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image before loading.

Мөн зургийн width ба  height-ийг үргэлж тодорхойлж байгаарай. Энэ нь анивчихыг багасгадаг ба учир нь хөтөч ачаалахаасаа өмнө зургийн орон зайг нөөцлөх боломжтой.

Сайн:

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Муу:

<img src="html5.gif">

Зай болон Тэнцүүгийн тэмдэг #

HTML нь тэнцүүгийн тэмдэг нь эргэн тойрон дахь зайг зөвшөөрдөг. Гэхдээ зай багатай байх нь уншихад хялбар бөгөөд нэгж хэсгүүдийг илүү сайн нэгтгэдэг.

Сайн:

<link rel="stylesheet" href="styles.css">

Муу:

<link rel = "stylesheet" href = "styles.css">

Урт кодын мөрнөөс зайлсхийх хэрэгтэй #

HTML засварлагчийг ашиглаж HTML кодыг уншихын тулд баруунаас зүүн тийш гүйлгэх нь амар биш.

Хэт урт кодын мөрөөс зайлсхийхийг хичээгээрэй.

Хоосон мөр болон мөр алгасах #

Хоосон мөр, зай битгий нэмээрэй  

Нэг хэсэг том кодоо уншихаа амарчилж хоосон мөр нэмээрэй

Сайн:

<body> <h1>Famous Cities</h1> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p> </body>

Муу:

<body> <h1>Famous Cities</h1> <h2>Tokyo</h2> <p> Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family. </p> </body>

Хүснэгтийн сайн жишээ:

<table> <tr> <th>Name</th> <th>Description</th> </tr> <tr> <td>A</td> <td>Description of A</td> </tr> <tr> <td>B</td> <td>Description of B</td> </tr> </table>

Жагсаалтын сайн жишээ:

<ul> <li>London</li> <li>Paris</li> <li>Tokyo</li> </ul>

Хэзээ ч битгий <title> элементйиг алгасаарай #

<title> элемент нь HTML-д зайлшгүй шаардлагатай

Хуудасны гарчгийн агуулга нь хайлтын системийн оновчлол (SEO) хийхэд маш чухал юм! Хуудасны гарчгийг хайлтын системийн алгоритмууд ашиглан хайж байгаа хүний хөтөчд үзүүлдэг

<title> элемент:

  • Хөтөчийн хэрэгслийн самбарт гарчгийг тодорхойлдог
  • Дуртай гэсэн хэсэгрүү нэмэгдхэд гарчигийг гаргаж ирнэ
  • хайлтын системийн үр дүнд хуудасны гарчгийг харуулна

Тиймээс гарчгийг аль болох үнэн зөв, утга төгөлдөр болгохыг хичээгээрэй:

<title>HTML Style Guide and Coding Conventions</title>

<html> болон<body>-г орхигдуулах? #

An HTML page will validate without the <html> and <body> tags:

HTML хуудас нь <html> болон <body> тэмдэглэгээгүй ч гэсэн хүчин төгөлдөр байна.

Жишээ #

<!DOCTYPE html> <head> <title>Page Title</title> </head> <h1>This is a heading</h1> <p>This is a paragraph.</p>

Гэхдээ бид үргэлж <html> болон <body> тэмдэглэгээнүүдийг нэмж оруулахыг зөвлөж байна!

<body> -г орхисноор хуучин хөтөч дээр алдаа заадаг.

<html> ба <body> -г орхих нь DOM болон XML програмуудад гэмтэл учруулж болзошгүй юм.

<head>-г орхигдуулах? #

HTML <head> тэмдэглэгээг бас орхиж болно.

Browsers will add all elements before <body>, to a default <head> element.

Хөтчид <body> -ээс өмнөх бүх элементүүдийг үндсэн <head> элемент-рүү нэмэх болно.

Жишээ #

<!DOCTYPE html> <html> <title>Page Title</title> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

Гэхдээ бид <head> тэмдэглэгээг ашиглахыг зөвлөж байна.

Close Empty HTML Elements? #

HTML дээр хоосон элементүүдийг хаах нь заавал байх ёстой биш юм.

Зөвшөөрөгдсөн:

<meta charset="utf-8">

Зөвшөөрөгдсөн:

<meta charset="utf-8" />

Хэрэв та XML / XHTML програмаар таны хуудсанд нэвтэрнэ гэж бодож байгаа бол хаалтын налуу зураасыг (/) хадгална уу. XML ба XHTML-д хаалтын налуу зураас (/)  шаардлагатай зайлшгүй шаардлагатай байдаг 

Lang шинж чанарыг нэмэх #

Та вэб хуудасны хэлийг зарлахын тулд lang  шинж чанарыг үргэлж <html>  тэмдэглэгээ дотор оруулах хэрэгтэй. Энэ нь хайлтын систем болон хөтөчүүдэд туслах зорилготой юм.

Жишээ #

<!DOCTYPE html> <html lang="en-us"> <head> <title>Page Title</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

Мета өгөгдөл #

To ensure proper interpretation and correct search engine indexing, both the language and the character encoding <meta charset="charset"> should be defined as early as possible in an HTML document:

Тохиромжтой тайлбар, хайлтын системийн индексжүүлэлт болон хэл ба тэмдэгт кодчиллыг хангахын тулд  <meta charset="charset"> -г  аль болох эрт HTML баримт бичигт оруулах хэрэгтэй.

<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <title>Page Title</title> </head>
What are your Feelings

Powered by BetterDocs

Leave a Reply