ก่อนที่เราจะเลือกใช้ HTML ในหน้าเอกสารของเรานั้น เราต้องรู้ก่อนเป็นอันดับแรกว่า เนื้อหาที่เรากำลังเขียนอยู่นั้น มันประกอบไปด้วยการแสดงผลแบบไหนบ้าง เช่น แบ่งกลุ่ม Layout ไหม แสดงผลเป็น List ด้วยหรือไม่ มี Form กี่อัน มีตารางหรือเปล่า แทรกรูปภาพตรงไหน
ซึ่งการคิดแยกแยะตามย่อหน้าข้างต้นนั้น ภาษา HTML มี tags เอาไว้จัดการกับเนื้อหาที่แตกต่างกันทั้งหมด เพราะฉะนั้น เราจึงจำเป็นต้องเรียนรู้ภาษา HTML ก่อนเป็นอันดับแรก แยกแยะให้ออกก่อนว่า จะใช้ Element ใด ตรงไหน ไม่ใช่ <div> แหลก
แยกให้ออกว่า อะไรคือ CSS และ อะไรคือ HTML เอามาใช้ร่วมกันยังไง
ผู้ที่เพิ่งเริ่มศึกษาการเขียน CSS โดยส่วนมากแล้วมักจะสับสนว่าสองภาษานี้มันต่างกันตรงไหน ยิ่งทุกวันนี้คำว่า CSS ติดปากเป็นคำเรียกขานรวมเหมาทั้งคนเขียน HTML เข้าไปด้วยแล้วยิ่งไปกันใหญ่
HTML คือ ภาษาโครงสร้าง ไม่มี HTML เราก็ไม่รู้จะเขียน CSS ไปจัดการกับอะไร นอกจากจะไปเขียนจัดการกับ XML หรือภาษาอื่นๆ ที่อนุญาตให้ CSS จัดการได้ แต่ในที่นี้เราพูดถึง HTML
CSS คือภาษาที่เอาไว้ทำให้ HTML แสดงผลให้สวยงามตามท้องเรื่องในอุปกรณ์ต่างๆ (User Agents)
เพราะฉะนั้น ทั้งสองภาษาจึงควบคู่กันไป
เริ่มศึกษา HTML อย่างมีหลักการ
ผมคงไม่สามารถขอให้ทุกๆ คนเข้าไปอ่านวีธีการเขียน HTML หรือ หลักการของภาษา HTML ใน W3C ได้ทั้งหมด ซึ่งที่ที่สามารถศึกษาได้เป็นอย่างดีก็คือ เว็บของ W3C อยู่วันยังค่ำ
โดยเราควรเริ่มจากเรียนรู้ว่า HTML5 มีพฤติกรรมข้อมูลอยู่ 7 ประเภท และกลุ่ม Element อยู่ 15 หมวดหมู่ โดย 7 ประเภทของ HTML5 นั้นเอาไว้แยกแยะรูปแบบการวางโครงสร้างของเอกสาร ส่วน 15 หมวดหมู่นั้น เอาไว้จัดการกับเนื้อหาแบบต่างๆ ที่เกิดขึ้น เช่น <article> เราต้องบอกได้ว่า tag <article> นั้น อยู่ในหมวดหมู่ Sections (จาก 15 หมวดหมู่) ซึ่งมีพฤติกรรมข้อมูล เป็น Flow content และ Sectioning content (จาก 7 ประเภท)
เมื่อมองย้อนกลับไปยัง XHTML การแยกแยะหมวดหมู่ของภาษา ไม่ได้แยกเหมือน HTML5 เพราะ XHTML นั้นถือเอาการวางโครงสร้างเอกสารเป็นหลัก XHTML จะแยก Element ออกตาม Modules ซึ่งแต่ละ Module นั้นจะดูจากการใช้งาน เช่น Text Module มีอะไรบ้าง หรือ List Module มีอะไรบ้าง หรือ Form Module มีอะไรบ้าง (ทั้งหมดประมาณ 17 Modules) แล้วค่อยไปเจาะจงอีกทีว่า ค่าพื้นฐานแสดงผลแบบไหน แล้วมีกฎการใช้งานยังไง ซึ่งจะสวนทางกับ HTML5 เพราะ HTML5 นั้นวางกฎการใช้งานตามประเภทมาก่อน เพื่อที่จะแยกแยะรูปแบบการเขียนทีหลัง
หมวดหมู่ Elements ของ HTML5
The Root Element
html
Document metadata
head, title, base, link, meta, style
Scripting
script, noscript
Sections
body, section, nav, article, aside, h1-h6, hgroup, header, footer, address
Grouping contents
p, hr, pre, blockqoute, ol, ul, li, dl, dt, dd, figure, figcaption, div
Text-level semantics
a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, sup, i, b, mark, ruby, rt, rp, bdo, span, br, wbr
Edit
ins, del
Embedded content
img, iframe, embed, object, param, video, audio, source, canvas, map, area
Tabular data
table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th
Forms
form, fieldset, legend, label, input, button, select, datalist, optgroup, option, textarea, keygen, output, progress, meter
APIs for the text field selections
Interactive
details, summary, command, menu
Link and link type
Common idioms without dedicated elements
Matching HTML elements using selectors
หัวใจสำคัญของการศึกษา HTML5 สำหรับทำเว็บ ให้เน้นทำความเข้าใจ 3 หมวดหมู่หลักนี้ก่อนครับ Sections, Grouping content และ Text-level Semantics หลังจากนั้น ค่อยขยับขยายไปหาอีก 12 หมวดหมู่ที่เหลือ
กฎการใช้งาน HTML5 Elements แยกตามพฤติกรรม
เมื่อเรารู้แล้วว่า Elements แต่ละตัว อยู่ในหมวดหมู่ไหน ขั้นต่อไป ให้ตามไปดูพฤติกรรมของเหล่า Element นั้นๆ คำว่า พฤติกรรมของเหล่า Element นั้นคืออะไรหรือ เอากันง่ายๆ ว่ากันซึ่งๆ หน้า คือ สิ่งที่จะบอกว่า “เราสามารถเขียน tag A เข้าไปใน tag B ได้หรือไม่” เพราะในภาษา HTML5 นั้น มีกฎเกณฑ์ควบคุมเอาไว้หมดแล้วครับ โดยที่ทั้ง 7 พฤติกรรมนั้น มีประมาณนี้
Metadata content คือ กลุ่มของ Elements ที่เอาไว้ตั้งค่าหรือบอกพฤติกรรมหลักของเอกสาร หรือเอาไว้แสดงความสัมพันธ์กับเอกสารอื่นๆ มี base, command, link,meta, noscript, script, style, title
Flow content โดยกฎพื้นฐาน Element เกือบทั้งหมดของ HTML5 นั้นมีพฤติกรรมเป็น Flow content อยู่แล้ว ข้อสำคัญที่สุดคือ ห้ามมี tag เปล่า
Sectioning content คือ กลุ่มที่เอาไว้แสดงรูปแบบความเป็นหน้าเอกสาร มี article, aside, nav, section
Heading content คือ กลุ่มที่เอาไว้บอกการเป็น “หัวข้อ” โดยหลักๆ แล้วเอาไว้ใช้ร่วมกับ Sectioning content โดยมี h1-h6 และ hgroup
Phrasing content คือ หน่วยที่ติดต่อโดยตรงกับ “ตัวหนังสือ” หรือ Element ที่เป็น Phrasing content ด้วยกันเอง หรือ ถ้าอยากจำให้ง่าย มันคือ “inline element” ตามแบบฉบับของ XHTML นั่นเอง ห้ามเอา Phrasing content ไปเขียนครอบ Element ใดๆ ที่ไม่ใช่ Phrasing content โดยเด็ดขาด เช่น อย่าเอา span ไป ครอบ aside หรือ อย่าเอา em ไปครอบ section
Embedded content คือ กลุ่มที่เอาไว้ แทรกเนื้อหาที่เป็น Media ทั้งหลาย หรือแทรกเนื้อหาจากแหล่งอื่น มี audio, canvas, embed, iframe, img, math, object, svg, video
Interactive content คือ กลุ่มของ Element ที่ทำหน้าที่ ปฏิสนธิกับผู้ใช้โดยตรง เช่น ปุ่มกดต่างๆ ส่วนมากจะอยู่ในหมวดหมู่ของ Form และ tag <a> ถือเป็น Interactive content ด้วย
โดยใน HTML5 Element ใดๆ นั้น สามารถมีพฤติกรรมได้มากกว่า 1 อย่าง ดั่งเช่น <article> ที่ผมยกตัวอย่างมาไว้ก่อนหน้า ซึ่งมีพฤติกรรมเป็นทั้ง Flow content และ Sectioning content
ขั้นตอนการเรียนรู้ CSS3
CSS3 แตกต่างไปจาก CSS2 แบบยกเครื่อง การเริ่มต้นเรียนรู้จึงจำเป็นต้องปรับเปลี่ยนรูปแบบไปด้วย ใน CSS3 นั้น ระบบการทำงานแต่ละอย่างจะถูกแยกออกมาเป็น Module เดี่ยวๆ ของใครของมัน รวมไปถึง Selectors ของ CSS3 เองด้วย ใน CSS2 Selectors นั้น W3C ได้รวมเอา Selectors เป็นองค์ประกอบหลักของการเขียน CSS ใน ทุกๆ Models (CSS2 เรียก Model ส่วน CSS3 เรียก Module)
CSS3 นั้นแยกเนื้อหาออกเป็น Modules ซึ่งในแต่ละ Module นั้นจะมี CSS Properties และ Values เพื่อใช้ในการควบคุมการแสดงผล ของ HTML โดยสื่อสารผ่าน Selectors
ใน CSS3 ทาง W3C ได้ยกเรื่องของ Selectors ออกมาเป็น CSS Selectors Module Level 3 ซึ่งถือเป็น Module แรกสุดของ CSS3 ที่ประกาศเป็นสถานะ PR (Proposed Recommendation) แต่ในขณะเดียวกัน CSS2.1 ยังอยู่ในสถานะ CR (Candidate Recommendation) อยู่เลยครับ
CSS3 Modules ที่จำเป็นต้องเรียนรู้ก่อนเมื่อมีเวลา
CSS Selectors
CSS Background and Borders
CSS Color
CSS Fonts
CSS Basic Box model
CSS Multi-column layout
CSS 2D Transformations
CSS Transitions
CSS Animation
CSS Basic user interface
CSS Values and Units
ตัวอย่างการเริ่มต้นศึกษาก็เช่น CSS Basic Box Model คืออะไร และมันมีอะไรบ้าง
ส่วนประกอบ (Properties) ของ Module นี้ มีอะไรบ้าง คือคำถามหลักที่เกิดขึ้น เมื่อเราได้ยินคำว่า “Box Model” ให้จดจำเอาไว้ว่า มันมีประมาณนี้
ประเภทของ Box
Display
Block-Level
Run-in การสั่ง run-in นั้น กระทำก็ต่อเมื่อ เราต้องการเอา Element ที่เป็น formattedBlock มาเรียงต่อกันกัน ให้สั่ง display: run-in;
Compact
Padding
Margin ซึ่ง Margin แยกออกเป็น 2 แบบ
Margin properties ปรกติ
Collapsing Margins ใน Collapsing นี้ มันจะอยู่ใน <table>
Width และ Height
min-width, min-height, max-width, max-height
กฎการคำนาณ ความกว้าง สูงและ margins
Float
Overflow
Visibility
* หมายเหตุ คำถามต่อมา หลายคนคงอยากถามว่า แล้วไอ้ Element ของ HTML5 ที่มันเป็น Block element มันมีอะไรบ้างหละ? วิธีการจดจำ ให้มองไปที่ หมวดหมู่ของ HTML5 ในส่วนของ Sections และ Grouping Contents
เมื่อเรารู้ว่า HTML Element ที่เรากำลังสั่งงานอยู่นั้น คืออะไร เราก็สามารถที่จะใช้ Properties สั่งงานได้ถูกต้อง เช่น เช่น เราต้องการสั่งงาน <aside> ซึ่ง tag <aside> นั้นถือเป็น formattedBlock Candidate สามารถที่จะใช้ Properties ต่างๆ ที่เป็นของ Basic box model นั้น สั่งงานได้เลย
การสังเกตว่า Element ไม่มีคุณสมบัติเป็น Block Element ให้จดจำง่ายๆ คือ HTML5 เกือบทุกตัวที่มีพฤติกรรมเป็น Phrasing content โดยถ้าเราอยากให้ Elements เหล่านี้ต้องการเปลี่ยนรูปแบบการแสดงผลเป็น Block และสามารถใช้ Box model properties สั่งงานได้อย่างสมบูรณ์ เราสามารถทำได้โดย สั่งให้ Element นั้นๆ display เป็น block ก่อนได้ เช่น ถ้าเราต้องการสั่งงาน <abbr> ให้แสดงผลแบบ <footer> ให้ได้ เราสามารถเขียนได้ ประมาณนี้
abbr {display: block;} หลังจากสั่ง display เป็น block แล้ว เราก็สามารถใช้ properties อื่นๆ ที่สามารถใช้ได้กับ Block element โดยตรง
ง่ายๆ สำหรับหลักการ ในการเรียนรู้อย่างเป็นระบบคือ ให้มุ่งไปที่ Modules ต่างๆ ของ CSS3 ก่อน แล้วจดจำ Properties ที่มีอยู่ให้ได้ รวมถึงใช้ Values ให้เป็น
รับทําเว็บไซต์ 
แลกลิงค์ 
