
#HTML
<html> #Бүкіл HTML құжатын қамтиды, барлық басқа элементтер осы тегтің ішінде орналасады.
<head> #Метаақпаратты қамтиды, мысалы, бет тақырыбы (<title>), таңбалауыштар, сипаттамалар, және CSS немесе JavaScript-ке сілтемелер.
<title> #Бет атауын анықтайды, браузердің қойындысында көрінеді.

<body> #Негізгі контентті қамтитын бөлік, беттегі көрінетін элементтер осы тегтің ішінде орналасады.
<header>, <footer> #Беттің жоғарғы және төменгі бөліктерін анықтайды, жиі навигация, байланыс ақпараты немесе сілтемелерді қамтиды.
<h1> - <h6> #Тақырыптарды белгілеу үшін қолданылады. <h1> – ең үлкен тақырып, <h6> – ең кіші тақырып.
<p> #Параграф мәтінін білдіреді, мәтіннің негізгі мазмұны осы тегте орналасады.
<a> #Сілтеме жасау үшін қолданылады. Мысалы, <a href="https://example.com">Сілтеме</a> сілтеме жасайтын URL мекенжайын көрсетеді.
<img> #Бетке сурет енгізеді. Суреттің көзін (src) және сипаттамасын (alt) көрсету қажет.
<div> #блоктық элементтерді топтастыру,
<span> #мәтіннің белгілі бір бөлігін қамтиды.
<ul> #реттік емес Тізімдер жасау үшін, 
<ol> #реттік тізімдер үшін қолданылады, 
<li> #тізім элементін білдіреді.
<form> #Пайдаланушыдан ақпарат жинауға арналған форма жасауға мүмкіндік береді. Мысалы, тіркелу немесе кіру формасы.
<table> #Кесте жасауға арналған. Кесте жолдары <tr>, бағандар <td>, және тақырыптар <th> тегтерімен белгіленеді.
<section>, <article>, <aside> #HTML5 элементтері, олар бет мазмұнын құрылымдауға көмектеседі.

###-------------------------------------

#Семантикалық тегтер контенттің мағынасын білдіреді, 
<header> #Барлық беттің жоғарғы бөлігін (құрылымын) белгілейді, мұнда навигация және компания атауы көрсетіледі.
<nav> #Навигацияны білдіреді, іздеу жүйелері осы бөлімді сайт навигациясы ретінде таниды.
<main> #Негізгі контентті анықтайды, бұл бөлім экран оқитын құралдарға негізгі ақпаратты оңай табуға көмектеседі.
<article> #Контентті топтастыру үшін қолданылады, мысалы, мақала немесе блог жазбасы ретінде.
<section> #Контентті қосымша ішкі бөлімдерге бөледі.
<footer> #Беттің аяққы бөлігін қамтиды, байланыс ақпаратын қосуға ыңғайлы.

###-------------------------------------

#Accessibility
aria-label #Aria атрибуттары: Пайдаланушы интерфейсін қосымша түсіндіру үшін WAI-ARIA атрибуттары
aria-hidden #Aria атрибуттары: Пайдаланушы интерфейсін қосымша түсіндіру үшін WAI-ARIA атрибуттары
role #Aria атрибуттары: Пайдаланушы интерфейсін қосымша түсіндіру үшін WAI-ARIA атрибуттары
alt #Бұл экран оқитын құрылғыларға суреттің сипаттамасын береді.
for #Мәтіндік жапсырмаларды (<label>) енгізу және for атрибутымен сәйкестендіру маңызды.

<img src="logo.png" alt="Компания логотипі">
<button aria-label="Жабу">X</button>
<nav aria-label="Негізгі навигация">
    <a href="#home">Басты бет</a>
    <a href="#about">Біз туралы</a>
</nav>

###-------------------------------------

#SEO ережелері
<meta name="description" content="Бұл біздің қызметтер туралы бет."/> #тақырыптар, кілтсөздер (keywords)
<h1>, <h2> #дұрыс иерархиямен орналасуы керек

<head>
    <meta name="description" content="Бұл біздің қызметтер туралы бет.">
    <title>Қызметтеріміз</title>
</head>
<body>
    <h1>Қызметтер</h1>
    <h2>Сайт жасау</h2>
    <p>Біз заманауи сайттарды жасаймыз.</p>
</body>

###-------------------------------------

#Жүктеу уақыты және өнімділік
Lazy Loading #Суреттерді немесе басқа ауыр элементтерді кештеу арқылы бет жүктелген кезде тек қажет болған кезде ғана жүктеледі.
async #бетке тәуелсіз, яғни басқа элементтермен байланысы жоқ, жеке жұмыс істейтін скрипттерге қолайлы.
defer #бет құрылымымен тығыз байланысты немесе басқа скрипттермен өзара байланысы бар кодтарға ыңғайлы.

 <img loading="lazy" src="large-image.jpg" alt="Үлкен сурет">
 <script src="script.js" async></script>
 <script src="style.css" defer></script>

###-------------------------------------

#Мобильді құрылғыларға бейімдеу
<meta name="viewport" content="width=device-width, initial-scale=1.0">

###-------------------------------------

#Қауіпсіздік шаралары
XSS шабуылдардан қорғау #Қолданушыдан алынған деректерді өңдеуден бұрын тексеру керек.
Content Security Policy (CSP) #сыртқы ресурстарды дұрыс басқарып, қауіпті скрипттердің қосылуына жол бермеу үшін қолдану.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trustedscripts.example.com">

###-------------------------------------

#Сыртқы файлдарды дұрыс қосу
CSS #стилдерді <head> ішіне орналастыру.
JavaScript #файлдарын <body> соңында немесе defer атрибутымен жүктеу.

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script src="script.js" defer></script>
</body>

###-------------------------------------

#Ескі HTML тегтерін қолданбау
<center> #CSS арқылы орталыққа қою.
<font> #CSS арқылы мәтін түсі мен өлшемін белгілеу.
