Add timestamp to Vagrant log.
.. -*- coding: utf-8; -*-
=======
HTML.
=======
.. contents::
:local:
HTML spec
=========
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
HTML attribute reference (single page).
HTML version declaration
========================
HTML5 version is declared via::
<!doctype html>
HTML4.01::
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Page encoding
=============
Place in HEAD tag (CHARSET is one among of defined by
http://www.iana.org/assignments/character-sets)::
<meta http-equiv="Content-Type" content="text/html; charset=CHARSET">
or in HTML 5::
<meta charset="utf-8">
See:
* http://www.w3.org/TR/REC-html40/charset.html#h-5.2.2
Page or text language
=====================
Client may suggest preferred language to server via ``Accept-Language`` HTTP
tag::
Accept-Language: da, en-gb;q=0.8, en;q=0.7
W3C best practice suggest to surround corresponding text pieces in tag with
``lang`` attribute. Attribute values are from BCP 47.
It is good to set language in ``html`` tag::
<html lang="en">
https://www.w3.org/International/tutorials/tutorial-char-enc/
Handling character encodings in HTML and CSS (tutorial).
http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
IANA registered language and country codes. Coherent with ISO codes but
frequently updates.
http://www.ietf.org/rfc/bcp/bcp47.txt
Tags for Identifying Languages (Best Current Practice).
https://www.w3.org/International/articles/language-tags/
Language tags in HTML and XML.
https://www.w3.org/International/questions/qa-html-language-declarations
Declaring language in HTML.
https://www.w3.org/International/questions/qa-lang-why
Why use the language attribute?
Including CSS and JS fragments and files
========================================
HTML 4.01 require ``type`` attribute in CSS and JS linking tags::
<link rel="stylesheet" type="text/css" href="path-to.css">
<style type="text/css">...</style>
<script type="text/javascript" src="abc.js"></script>
<script type="text/javascript">...</script>
HTML 5 makes ``type`` attribute unnecessary when declaring or linking to
external CSS / JS::
<link rel="stylesheet" href="path-to.css">
<style>...</style>
<script src="abc.js"></script>
<script>...</script>
Quoting in HTML
===============
In HTML 5 attribute values only need to be quoted if they contain spaces or some
non-alphanumeric characters.
HTML 5 support
==============
http://html5please.com/
Look up HTML5, CSS3, etc features, know if they are ready for use, and if so
find out how you should use them – with polyfills, fallbacks or as they are.
https://modernizr.com/
Modernizr tells you what HTML, CSS and JavaScript features the user’s browser
has to offer.
http://caniuse.com/
Browser compatibility database of HTML 5 features.
Embedding structural data
=========================
Example::
<div itemscope itemtype="http://schema.org/Person">
My name is <span itemprop="name">Random Hacker</span>,
And I'm a <span itemprop="jobTitle">software developer</span>
</div>
http://schema.org/
Schemas for structured data on the Internet, on web pages, in email messages,
and beyond.
Video and audio support
=======================
HTML 5 add ``video`` and ``audio`` tags and corresponding JS API to support
video and audio playback.
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
Media formats supported by the HTML audio and video elements.
https://support.mozilla.org/en-US/kb/html5-audio-and-video-firefox
HTML5 audio and video widget in Firefox.
https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format
Introduction to WebVTT.
Center an object.
=================
To center block-level element::
<div style="margin-left: auto; margin-right: auto; position: relative; width: 700px;">
<div>SOME</div>
</div>
To center inline element::
<p style="text-align: center;">TEXT</p>
Browser support.
================
* http://htmlbook.ru/
* http://www.quirksmode.org/