HTML — HyperText Markup Language

HTML คือโครงกระดูกของหน้าเว็บ — บอกว่ามีเนื้อหาอะไรและจัดลำดับอย่างไร ส่วนหน้าตาเป็นงานของ CSS และพฤติกรรมเป็นงานของ JavaScript

Tag vs Element

Element = Tag เปิด + content + Tag ปิด

<p>HyperText Markup Language</p>
↑      ↑                         ↑
tag เปิด  content                   tag ปิด

Element ซ้อนกันได้:

<p><strong>ข้อความสำคัญ</strong></p>

Attribute เขียนไว้ใน tag เปิด:

<p style="color:red;">Piyavach class</p>
<h1 id="intro">Chapter 1</h1>
<span class="myclass myclass2"></span>

โครงสร้างเอกสาร HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title of document</title>
</head>
<body>
    <!-- ... Detail ... -->
</body>
</html>

head = ข้อมูลเกี่ยวกับเอกสาร · body = เนื้อหาที่แสดงผล

DOCTYPE แต่ละยุค

เวอร์ชัน	DOCTYPE
HTML 4.01	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">`
XHTML 1.1	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ...>` และ `<html xmlns="...">`
HTML5	`<!DOCTYPE html>` — สั้น ไม่ต้องอ้าง DTD

XHTML เข้มงวดกว่า — ทุก tag ต้องปิด และ empty element ต้องเขียน <br /> ส่วน HTML5 เขียน <br> ได้เลย

meta tag ที่ต้องรู้

<meta charset="UTF-8">                                  <!-- ชุดอักขระ กันภาษาไทยเพี้ยน -->
<meta name="description" content="HTML learning">       <!-- SEO + social media -->
<meta name="keywords" content="HTML">
<meta name="author" content="Piyavach K">
<meta name="viewport" content="width=device-width, initial-scale=1">  <!-- responsive -->

Empty element (ไม่มี tag ปิด)

<br>   <img>   <hr>   <meta>   <input>   <link>   <area>

เขียนแบบ XHTML: <br /> และ <img src="img.jpg" alt="photo" />

Semantic element ของ HTML5

HTML4 (ใช้ div + id)	HTML5 (semantic)
`<div id="header">`	`<header>`
`<div id="menu">`	`<nav>`
`<div id="main">`	`<main>`
`<div class="post">`	`<article>` / `<section>`
`<div id="sidebar">`	`<aside>`
`<div id="footer">`	`<footer>`

<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
    </nav>
  </header>
  <main>
    <h2>Welcome</h2>
    <section>
      <h2>News</h2>
      <article>
        <h2>Blog Post</h2>
        <aside><h3>Related Links</h3></aside>
      </article>
    </section>
  </main>
  <footer><address>contact@example.com</address></footer>
</body>

ประโยชน์ของ semantic element: เครื่องมือค้นหาและ screen reader เข้าใจโครงสร้างได้ ต่างจาก <div> กับ <span> ที่ไม่มีความหมายในตัวเอง (div เป็น block, span เป็น inline)

Tag ข้อความและลิงก์

<a href="https://cmu.ac.th">CMU</a>                       <!-- ลิงก์ปกติ -->
<a href="https://cmu.ac.th" target="_blank">CMU</a>       <!-- เปิดแท็บใหม่ -->
<a href="mailto:test@test.com">send email</a>             <!-- ส่งอีเมล -->
<a href="tel:+66xxxxx">+66xxxxx</a>                       <!-- โทรออก -->
<a href="#section2">Go to Section 2</a>                    <!-- ลิงก์ภายในหน้า -->

<img src="photo.jpg" alt="คำอธิบายภาพ">                   <!-- alt สำคัญต่อ accessibility -->

List

<ul>                          <ol>
  <li>ไม่เรียงลำดับ</li>        <li>เรียงลำดับ</li>
  <li>มีจุดนำหน้า</li>          <li>มีตัวเลขนำหน้า</li>
</ul>                         </ol>

Form

<form action="/submit" method="post">
    <input type="text" name="username">
    <button type="submit">Submit</button>
</form>

Attribute	ความหมาย
`action`	ส่งข้อมูลไปที่ URL ไหน
`method="get"`	ข้อมูลไปติดที่ URL (เห็นได้ ยาวจำกัด) เหมาะกับการค้นหา
`method="post"`	ข้อมูลไปใน body (ไม่โผล่ใน URL) เหมาะกับการส่งข้อมูลจริง
`name`	ชื่อ key ที่ server จะได้รับ — ไม่มี name ข้อมูลจะไม่ถูกส่ง

input ทุกชนิดที่สไลด์ระบุ

<input type="text" name="username">
<input type="password" name="password">
<input type="email" name="email" required>
<input type="number" name="age">
<input type="date" name="bdate">
<input type="datetime-local" value="2014-11-16T15:25:33">
<input type="month" value="2014-05">
<input type="time" value="22:15:00">
<input type="color" id="myColor">
<input type="radio" name="gender" value="male" checked> Male
<input type="checkbox" name="subscribe" checked>
<input type="file" name="file">
<input type="hidden" id="myInput" value="yes">
<input type="button" value="Click Me">
<input type="submit">
<input type="reset">

Attribute	ผลลัพธ์
`placeholder`	ข้อความจาง ๆ บอกใบ้ในช่อง
`required`	บังคับกรอกก่อน submit
`disabled`	ใช้งานไม่ได้ และไม่ถูกส่งไป server
`readonly`	แก้ไม่ได้ แต่ยังถูกส่งไป server
`checked`	เลือกไว้ตั้งแต่แรก (radio / checkbox)

hidden input: เก็บค่าและส่งให้ server ได้ แต่ไม่แสดงบนหน้าเว็บ — อย่าลืมว่าผู้ใช้ยังเปิด DevTools ดูและแก้ได้ จึงห้ามเชื่อค่าจาก hidden field

ช่องกรอกอื่น ๆ:

<textarea id="txtMulti" name="txtMulti" rows="4" cols="50"></textarea>

<select name="browser">
    <option value="Chrome">Chrome</option>
    <option value="Firefox">Firefox</option>
</select>

<input list="browsers">              <!-- autocomplete -->
<datalist id="browsers">
    <option value="Chrome">
    <option value="Edge">
</datalist>

Media & iframe

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
</audio>

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

<iframe src="http://www.mindphp.com"></iframe>