What I'm Not Covering

• I won't be covering the basics of HTML (what a tag is, for example). In a course at this level, it's a waste of time.
• I will provide some links to get you started if you don't know.
• We will be talking about some important points of HTML + CSS, but I want to do it quickly.

Making Web Pages

• People often make web pages and test only in their browser.
• That only proves that it works on one browser.
  • … version.
  • … with one window size.
  • … on one operating system.
  • … with one particular set of installed plugins/fonts/etc.
• We have to do better than that.
• Basic principle of network applications: be conservative in what you send; be liberal in what you accept.
  • i.e. be very careful to make the data you send out exacty right, but ignore as many problems as possible on the input.
  • “Robustness (健壮性) principle” or “Postel's Law”
  • Ensures maximum compatibility.
  • Web browsers hold up their end: do the best to display slightly wrong/broken pages.
  • Authors/developers need to do their part too: be careful with the HTML (and CSS/Javascript) that you produce.
  • This helps ensure your site will work everywhere, not just the browsers you have tested.
• We will talk more about how to do that…

Creating Pages 1: Mark up semantic content

• Modern HTML versions (HTML 4, 5, XHTML 1) have many tags to describe the semantic (语意有关的) meaning of content.
• Use these tags to describe the meaning/purpose/role of the content.
  • Ignore the way it looks and concentrate on meaning (意图/含意).
  • e.g. Anything in a <p> should be a paragraph, and all paragraphs should be in a <p>.
  • e.g. Any newly-defined terms should go in <dfn> tags, and only newly-defined terms should be in a <dfn>.
  • Be careful to know tags' meanings.
  • Find a good HTML reference that talks about meaning, not appearance.
• Sometimes, there is no “right” tag for particular content.
  • e.g. a block of example Java code.
  • There are two generic tags that can be used in these cases.
    • <div> for block-level content,
    • <span> for inline content (part of a block).
• Meaning should extend to class or id values.
  • e.g. <div class="code java">…</div>
  • “java” is meaningful; “red” is not.

Why Care About Semantics?

• It's important to remember in web dev: you don't control the client. They might be using any technology.
  • The technically-correct term is “user agent” not “web browser” (用户代理 not 浏览器) to remind you.
  • It's easier to use semantic markup in different situations.
  • Definitely don't assume Internet Explorer: China is behind the rest of the world in switching from IE to better browsers.
• Different users have different needs.
  • e.g. colour blind, large font needed, etc.
  • Different styles can be applied to the same content if the markup isn't appearance-specific.
  • e.g. a three year old web page: how does it display on a tablet? If there was good markup to start with, probably okay, especially with a little styling.
• Not all browsers are graphical browsers on a desktop OS.
  • e.g. phone browsers, set-top boxes, speech browsers, …
  • Semantic tags can be presented in a way appropriate to the medium.
    • e.g. can properly read emphasized text in a speech browser, but not red text.
• Not all user agents are browsers.
  • e.g. Google is trying to figure out what your page is about.
  • Natural language processing is hard. Use your markup to give hints and make it easier.
• When writing markup, think of the tags, class values, etc as hints to Google/Baidu/other machine processing.
  • If you use a <h1> tag, it's easy for a program to figure out that text is a heading.
  • If you use some kind of ugly <p><font><strong>, no automated tool will ever figure it out.
  • Want better search rankings? Start with good markup.
• Try to squeeze as much meaning as possible into your markup.
  • e.g. HTML5's new form input types: <input type="email"> gives different input widget on phones.

Validation

• Part of your end of the robustness principle is producing markup that's actually syntactically correct.
  • … but browsers don't check this: that's their part of robustness.
• Validators are tools to check this.
  • They check against the formal definition of HTML/XHTML.
  • Check for closed tags, attributes really exist, etc.
• To use a validator, you must specify a doctype.
  • Indicates the version of HTML/XHTML to check against.
  • Copy-and-paste when needed.
• Valid code also ensures you have:
  • no problems with different browsers parsing your content differently.
  • a predictable document layout for Javscript/DOM manipulations.
• Will also trigger standards-mode rendering in browsers.
  • better standards implementation; more consistent rendering; should render faster (?).
• For this course:
  • Markup must be either XHTML1 or HTML5.
  • Examples in class will be a mix of those.
  • All markup produced by you (or code you write) must be valid.