Web Programming @ MIPT

HTML5 (semantics)

Web Programming @ MIPT, 2015-2016

What is HTML?

HyperText Markup Language is a notation of tags to create web pages.
"Hyper" means that one page can reference other pages.

<section class="slide"><div>
  <h2>What is HTML?</h2>
  <ul>
    <li><a href="https://en.wikipedia.org/wiki/HTML"> HyperText Markup
      Language</a> is a notation of tags to create web pages.</li>
    <li>"Hyper" means that one page can reference other pages.</li>
  </ul>
</div></section>

HTML history

First version was designed and implemented by Tim Berners-Lee at CERN
Previous mainstream version was 4.01 which appeared in December 1999
Development took the abandoned branch with XHTML in 2000-s
Current mainstream version 5.0 appeared in October 2014 / 5.1 in October 2015

HTML development

Main organization is W3C
Alternative organization is WHATWG
W3C: each step makes it's way from Nightly Draft -> Working Draft -> Recommendation
WHATWG: living standard

HTML resources

Google / Yandex
w3schools.com
Mozilla Developer Network
htmlbook.ru - not recommended
Can i use - browser support reference
Interactive tutorial by Code Academy

Editors

Adobe Brackets
- Optimized for layout designers
- Open source
GitHub Atom
- General-purpose editor wih tons of plugins
- Open source
- GitHub integration
Visual Studio Code
- Optimized for Microsoft technologies
- Proprietary, vendor lock-in
- Not popular
Sublime Text
- General-purpose editor wih tons of plugins
- Costs $70

Code playgrounds

Interactively test markup/scripts and share your experiments with others

Browser's developer tools

Press Ctrl + Shift + C

Inspect elements
Change tags, values, CSS
Debug scripts
Analyze profiles
Switch media types
etc.

Web page structure

HTML code define semantics
Cascading Style Sheets (CSS) define vizualization
Javascript code define behaviour

<html>
  <head>
    <link rel="stylesheet" href="page.css">
    <style>...</style>
  </head>
  <body>
    <!-- ... -->
    <script src="page.min.js"></script>
  </body>
</html>

HTML tag

Can either require closure or not
Must belong to the list of predefined names (unless Google Polymer is not used)
Corresponds to an element in browser's Document Object Model (DOM)
Attributes may have no values at all, attribute values may be unquoted if they don't contain spaces or any of " ' ` = < or >
Should include appropriate ARIA attributes to make content accessible for to people with disabilities

Web page example

HTML tags overview

meta - specify page metadata
div - most common container element, try to use more expressive tags whenever possible!
nav - container for the navigation section
p - sets paragraphs

Useful advice on Habrahabr

All of these are useless without CSS - please wait for the next part!

More real world web page example (template)

HTML5 Boilerplate

Use it to train markup coding skills
Has a "build" version - use the prebuilt one fo now
Really is just a building block used by even higher level tools

Media tags

img - display graphics, including SVG
svg - embedded SVG
video - play video
audio - play audio
canvas - 2D programmatic rendering

MathML

The way to include mathmetical formulas into HTML documents

W3C homepage
Adoption is low: caniuse
MathJax to the rescue!
Though better to use LaTeX with MathJax

Build pipeline

Produce CSS files (from SASS, Less, Stylus, etc.)
Apply browser extensions and workarounds to CSS
Minify and merge CSS into single optimized file
Produce JS files (from ES6, from CoffeeScript, from TypeScript, etc.)
Minify and merge JS into single optimized file
Produce media files (raster images, fonts, SVG, video, audio)
Optimize media files (minify, recompress, merge)
Produce HTML files (from Jade, from HAML, from Jinja2, etc.)
Link with resources (CSS, JS, images, etc.)
Minify and merge HTML into single optimized file
Validate HTML

Markup minification

turns into

Markup minification

You should make the resulting production HTML code as small as possible

Online minifiers: 1, 2
Use tools like html-minifier...
...or better include the minification step into your build pipeline

Google PageSpeed Insights is a complete optimization solution

Markup validation

You should validate your markup against the standard

Online W3C validator
Use tools like w3cjs...
...or better include the validation step into your build pipeline

Next steps

Read the standard
Read books
Pass interactive tutorials: 1, 2, 3
Download cheatsheet: 1, 2
Continue to HTML5 (stylesheets)