HTML дегеніміз не? Тарихы, талдануы және DOM

Вебте көретініңіздің дерлік бәрі, оның ішінде осы бет те, HTML тілінде жазылған. HTML (HyperText Markup Language) бағдарламалау тілі емес, құжаттың құрылымын сипаттайтын белгілеу тілі: мынау тақырып, мынау абзац, мынау сілтеме, мынау кесте. HTML тек сайттарға арналмаған. Ол электрондық пошта үлгілерінде, анықтама құжаттамасында, экспортталған есептерде және «веб-бет ретінде сақталған» құжаттарда кездеседі. Бұл мақалада HTML тарихы, браузердің оны қалай оқып, экранға салатыны, жиі кездесетін мәселелер және HTML файлдарын Word не PDF-ке түрлендіргенде нені ескеру керегі айтылады.

HTML дегеніміз не?

HTML мазмұнды тегтер арқылы белгілейтін қарапайым мәтіндік тіл. Тегтер бұрыштық жақшалар арасында жазылады, және олардың көбі ашылатын және жабылатын тегтен тұратын элемент құрайды:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sample page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>This paragraph contains a <a href="https://example.com">link</a>.</p>
  </body>
</html>

<head> бөлімі бет туралы ақпаратты (таңбалар кодтауы, тақырып, стильдер кестесі) тасымалдайды, ал <body> көрінетін мазмұнды қамтиды. Сыртқы көрініс CSS арқылы, ал мінез-құлық JavaScript арқылы қосылады. Бұл бөліністе HTML мазмұнның не екенін, CSS оның қалай көрінетінін, ал JavaScript оның не істейтінін сипаттайды.

Қысқаша тарих

HTML Тим Бернерс-Ли 1989 жылы CERN-де ұсынған World Wide Web жобасының бөлігі ретінде дүниеге келді. Оның алғашқы браузері 1990 жылы NeXT компьютерінде жұмыс істеді. Тілдің алғашқы нұсқалары ресми стандарттан гөрі CERN-де құжатталған тегтер тізімі еді. Содан бергі негізгі кезеңдер:

• 1995 жылғы қараша, HTML 2.0: Тим Бернерс-Ли мен Дэн Коннолли жазған RFC 1866 HTML-ді алғаш рет ресми стандарт ретінде анықтады.
• 1997 жылғы қаңтар, HTML 3.2: W3C салааралық спецификация ретінде ресми түрде қолдаған нұсқа.
• 1999 жылғы 24 желтоқсан, HTML 4.01: көп жыл бойы вебтің негізгі спецификациясы болды; W3C оны 2018 жылғы 27 наурызда ресми түрде ескірген деп белгіледі.
• 2014 жылғы 28 қазан, HTML5: W3C HTML5-ті Ұсыным (Recommendation) ретінде жариялады. Онымен бірге бейне, дыбыс, мағыналық бөлім элементтері және нақты анықталған талдау алгоритмі стандартталды.
• 2019 жылғы 28 мамыр, бірыңғай стандарт: W3C мен браузер өндірушілері құрған WHATWG қауымдастығы өзара түсіністік туралы меморандумға қол қойды. Соған сәйкес HTML мен DOM негізінен WHATWG-де нұсқа нөмірінсіз «Living Standard» (тірі стандарт) ретінде әзірленеді.

Сонымен бүгінгі «HTML5» іс жүзінде «қазіргі HTML» дегенді білдіреді; ресми спецификация үнемі жаңартылып отыратын HTML Living Standard.

Ол қаншалықты кең таралған? W3Techs-тің 2026 жылғы 15 қазандағы статистикасы бойынша белгілеу тілі белгілі сайттардың 97,8%-ы HTML қолданады. Сол дереккөздің мәліметінше, таңбалар кодтауы белгілі сайттардың 99,1%-ы UTF-8 қолданады.

Браузер HTML-ді қалай өңдейді?

HTML-ді басқа құжат форматтарынан ерекшелейтін нәрсе: тіпті нашар жазылған құжаттардың өзі әр браузерде бірдей түсіндіріледі. HTML Living Standard бұл үшін егжей-тегжейлі талдау моделін анықтайды:

1. Кодтауды анықтау: браузер алдымен келген байттарды таңбаларға айналдыруы керек. Ол ретімен BOM-ды, сервердің HTTP тақырыбында жарияланған кодтауды және құжаттың алғашқы 1024 байтындағы <meta charset> мәлімдемесін тексереді; ешқайсысы табылмаса, негізделген болжам жасайды.
2. Токендерге бөлу: күйлер машинасы мәтінді бастапқы тегтер, соңғы тегтер, түсініктемелер, DOCTYPE және таңбалар сияқты токендерге бөледі.
3. Ағаш құру: токендер «in body» не «in table» сияқты кірістіру режимдеріне сәйкес өңделеді. Талдағыш ашық элементтер стегін жүргізеді және дұрыс кірістірілмеген тегтерді белгіленген ережелер бойынша түзетеді.
4. DOM: нәтижесінде Document Object Model (DOM) деп аталатын объектілер ағашы шығады. CSS осы ағашқа қолданылады, ал JavaScript оны оқып, өзгертеді.

Спецификация талдау қателерін өңдеудің нақты анықталғанын ашық айтады. Мысалы, <div/> деп жазсаңыз, HTML соңындағы қиғаш сызықты елемейді, сондықтан келесі элементтер сол div ішіне түседі. Жабылмаған <p> келесі блок элементі келгенде автоматты түрде жабылады. Осы төзімділік сансыз мінсіз емес беттерге қарамастан вебтің жұмыс істеуін қамтамасыз етеді, бірақ сонымен бірге HTML-ді құжат форматына түрлендіретін кез келген құрал дәл осы ережелерді ұстануы керек дегенді білдіреді.

HTML қайда қолданылады?

• Сайттар мен веб-қосымшалар: әр веб-беттің қаңқасы.
• Электрондық пошта: пішімделген хаттар мен жаңалықтар таратылымы HTML-де жазылады.
• Құжаттама: анықтама беттері, бағдарламалық құжаттама және Markdown-нан жасалған сайттар.
• Электрондық кітаптар: EPUB форматы мазмұнды XHTML құжаттары ретінде бумалайды.
• Есептер мен экспорттар: көптеген қосымшалар есептерді HTML түрінде шығарады, ал Word-тың «Веб-бет ретінде сақтау» нәтижесі де HTML.

Күшті және әлсіз жақтары

HTML-ді қандай бағдарламалар ашады?

Chrome, Firefox, Safari және Edge сияқты барлық браузерлер HTML-ді көрсетеді. Бастапқы кодты өңдеу үшін Visual Studio Code сияқты код редакторы не кез келген мәтіндік редактор жеткілікті. Microsoft Word пен LibreOffice Writer HTML файлдарын ашып, құжат ретінде өңдей алады, бірақ күрделі CSS беттеулері онда жеңілдетіледі.

Жиі кездесетін мәселелер және оларды шешу

Арнайы таңбалар бұзылып көрінеді

Беттің кодтауы жоқ не қате. <head> бөлімінің басына <meta charset="utf-8"> қосып, файлдың шынымен UTF-8 ретінде сақталғанына көз жеткізіңіз. Сервер басқа кодтауды жарияласа, HTTP тақырыбын да түзетіңіз.

Сақталған бетте суреттер мен стильдер жоқ

HTML файлдары суреттер мен CSS-ті көбінесе бөлек файлдардан не интернеттегі мекенжайлардан алады. Тек .html файлын көшірсеңіз, бұл сілтемелер үзіледі. Браузердің «Веб-бет толығымен» сақтау параметрін қолданыңыз не суреттерді құжатқа ендіріңіз.

Басып шығарғанда бет бұзылады

Экранға арналған беттеулер қағазға сыймауы мүмкін. CSS-те @media print ережелерін анықтау және @page арқылы қағаз өлшемі мен жиектерді белгілеу басып шығару нәтижесін айтарлықтай жақсартады.

HTML файлдарын түрлендіру бойынша кеңестер

Біздің түрлендіргіште HTML файлдары біздің серверге жүктеледі және 30 минут ішінде жойылады. Файл оқылғанда кодтау алдымен BOM бойынша, содан кейін <meta charset> мәлімдемесі бойынша, содан кейін мазмұнның өзі бойынша анықталады; UTF-8 емес ескі түрік беттері Windows-1254 ретінде оқылады. Құжаттың <body> мазмұны мен беттің <style> блогы сақталады, ал <body> тегі жоқ HTML фрагменттері сол күйінде өңделеді.

• HTML-ді PDF-ке түрлендіру браузер қозғалтқышында жүреді: баспаға арналған CSS қолданылады, @page арқылы анықталған бет өлшемі ескеріледі (әйтпесе A4), ал фон түстері басылады. Қауіпсіздік үшін JavaScript орындалмайды және интернеттегі суреттер, қаріптер не стильдер кестелері жүктелмейді; тек құжатқа ендірілген ресурстар (data: URI) қолданылады. Нәтижеде суреттер болуын қаласаңыз, оларды HTML-ге ендіріңіз.
• HTML-ді Word-қа түрлендіру тақырыптарды, тізімдерді, кестелерді, туралауды және ендірілген суреттерді DOCX-ке көшіру үшін LibreOffice қолданады. Күрделі CSS беттеулерінің (flex, grid) Word-та баламасы жоқ, сондықтан олар жеңілдетіледі.
• HTML-ді Markdown-ға түрлендіру веб-бетті не анықтама мақаласын құжаттама репозиторийіне көшіруге өте қолайлы: тақырыптар, екпін, тізімдер, кестелер, сілтемелер және код блоктары сақталады, ал стиль ақпараты алынып тасталады.
• Кері бағытта Word-ты HTML-ге түрлендіру суреттерді файлдың ішіне ендіріп, таңбалар кодтауы жарияланған, бір өзі жеткілікті HTML құжатын жасайды, сондықтан әріптер браузерде дұрыс көрінеді.

Жиі қойылатын сұрақтар

HTML бағдарламалау тілі ме?

Жоқ. HTML белгілеу тілі: ол мазмұнның құрылымын сипаттайды, бірақ онда циклдер, шарттар не есептеулер жоқ. Бетке мінез-құлық қосу үшін JavaScript қолданылады.

HTML5 пен HTML арасында қандай айырмашылық бар?

HTML5 2014 жылы W3C Ұсынымына айналған негізгі нұсқаның атауы. 2019 жылдан бері HTML WHATWG-де нұсқа нөмірінсіз «HTML Living Standard» ретінде әзірленеді. Іс жүзінде бүгін HTML5 пен HTML бір нәрсені білдіреді.

HTML файлын қалай ашуға болады?

Оны екі рет шертсеңіз, әдепкі браузеріңізде ашылады. Бастапқы кодты көру үшін файлды мәтіндік редакторда ашыңыз не браузердің «Бет кодын қарау» параметрін қолданыңыз.

HTML-ді PDF-ке түрлендіргенде суреттер неге жоқ?

Суреттер интернет мекенжайынан жүктелетін болса, біздің түрлендіргіш оларды қауіпсіздік себептерімен жүктемейді. Суреттерді HTML-ге data: URI ретінде ендіріңіз не құжатты алдымен Word-қа түрлендіріп, суреттерді сонда қосыңыз.

HTML файлын ашу қауіпсіз бе?

HTML-де JavaScript болуы мүмкін, сондықтан белгісіз көздерден келген файлдарға сақ болыңыз. Пошта тіркемесі ретінде келіп, құпиясөз сұрайтын HTML беттері кең таралған фишинг тәсілі.

Дереккөздер

• WHATWG: HTML Living Standard, Parsing HTML documents
• W3C және WHATWG өзара түсіністік меморандумы (28 мамыр 2019)
• W3C баспасөз хабарламасы: HTML5 Recommendation (28 қазан 2014)
• W3C: HTML 4.01 Specification
• IETF RFC 1866: Hypertext Markup Language - 2.0
• Dave Raggett: A history of HTML
• W3Techs: Usage statistics of markup languages for websites