下記サイトでHTMLの構文チェックが簡単にできます。
すべてのチェック項目を完全にクリアする必要は無いと思いますが…
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
また、FirefoxのアドオンでWebDeveloperというものがあります。
Webのチェック等に便利かと思います。
http://www.infoaxia.com/tools/webdeveloper/
CSSの構文チェックやリンク先が存在するかどうかのチェック等も
可能です。
スマホ対応する際、表のレイアウトを記載するのに、table要素で組んでしまうとレシポンシブデザイン(cssによって表示の仕方を変える方法)でスマホ対応するとき、面倒ではありませんか？
ただ、divで構成して、「border-collapse」を指定しても、線が重複してくれず、2重になってしまう。。。
&color(red){table要素の時みたいに、border-collapseを摘要させて簡単に作りたい！！};
というアナタ！！
自分がサンプルとして作ってみたのでよかったら使ってみて下さい。
コツは、div要素をcssでtableのように設定することです。
<div class="table">
<div class="tr">
<div class="td">test</div>
<div class="td">test2</div>
</div>
<div class="tr">
<div class="td">test3</div>
<div class="td">test4</div>
</div>
</div>
css部分
.table{
display:table;
border-collapse:collapse;
}
.table .tr{
display:table-row;
}
.table .tr .td{
border:1px solid #2F4F4F;
display:table-cell;
}
これで大丈夫です！！
CanvasはHTML5から新しく加わった機能で画面に描画をすることができます。
当然、文字も書けます。
次のように書いてみましょう。
下記のfillTextメソッドを利用します。
//一番目の引数が表示したい文字、2番目がX座標、3番目がY座標
context.fillText("Sample String", 10, 50);
fontプロパティで、文字の大きさやフォントの種類が指定できます。
context.font = "20pt Arial";
注：プロパティの指定は、context.fillTextの前に書きましょう。
全部のドキュメントの例です。
<!DOCTYPE html>
<html><head><meta charset="utf-8"></head>
<body>
<canvas id="a_canvas" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("a_canvas");
var context = canvas.getContext("2d");
context.font = "20pt Arial";
context.fillText("Sample String", 10, 50);
</script>
</body></html>