html5 time要素のdatetime属性とpubdate属性

html5 time要素のdatetime属性とpubdate属性

html5 time要素のdatetime属性とpubdate属性

timeタグの中にあるdatetime属性とpubdate属性です。

残念ながらpubdate属性はhtml5の仕様からはずれましたので解説しません。

timeタグは記事の作成日や更新日を表すタグです。

datetime属性はコンピュータにわかりやすいように記述します。

<time datetime="2017-08-21">2017-08-21</time>

サンプル

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>a</title>
	</head>
	<body><header>
<h1>こんにちわ</h1>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
</header>
		
	
	<article>
	<time datetime="2017-08-21">2017-08-21</time>
<h2>ブログタイトル</h2>

	<p>ブログの内容</p>
	<figure>
	<figcaption>
	<img src="imeges/sky.jpg">
	</figcaption>
	</figure>
	
	</article>
	
	<aside>
	<p><a href="#">広告</a></p>
	</aside>
	
	<footer>
	
	<address>&copy;html5</address>
	</footer>
	</body>
</html>

 

html5 hgroup h1-h6要素をまとめる

html5 hgroup h1-h6要素をまとめる

html5 hgroup h1-h6要素をまとめる

hgroupはh1-h6要素をまとめます。

<hgroup>
	<h3>猫</h3>
	<h4>世界の猫</h>
</hgroup>

h要素は見出しですがそれはh1からh6まで構造的に大見出し小見出しとかレベルが
下がっていくのですがそれをまとめようというタグです。

しかし、hgroupはh1-h6要素以外は中にほかのタグを挿入することができません。

あまり使用するのも難しいかもしれませんし無理に今のところしようしないでいいでしょう。

サンプル

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>a</title>
	</head>
	<body><header>
<h1>こんにちわ</h1>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
</header>
		
	
	<article>
	
<h2>ブログタイトル</h2>

	<p>ブログの内容</p>
	<figure>
	<figcaption>
	<img src="imeges/sky.jpg">
	</figcaption>
	</figure>
	
	</article>
	
	<aside>
	<p><a href="#">広告</a></p>
	</aside>
	<hgroup>
	<h3>猫</h3>
	<h4>世界の猫</h>
	</hgroup>
	<footer>
	
	<address>&copy;html5</address>
	</footer>
	</body>
</html>

hgroupはhtml5の仕様に入っていたはずですが情報が古くどうやら仕様からはずれてしまいました。

html5 figureとfigcaption画像にキャプションをつける

html5 figureとfigcaption画像にキャプションをつける

html5 figureとfigcaption画像にキャプションをつける

figureは画像や図形につけるfigure要素です。

figureの中にキャプションをつけるfigcaptionようそがあります。

<figure>
	<figcaption>空の写真</figcaption>
	<img src="imeges/sky.jpg">

</figure>

サンプル

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>a</title>
	</head>
	<body><header>
<h1>こんにちわ</h1>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
</header>
		
	
	<article>
	
<h2>ブログタイトル</h2>

	<p>ブログの内容</p>
	<figure>
	<figcaption>
	<img src="imeges/sky.jpg">
	</figcaption>
	</figure>
	
	</article>
	
	<aside>
	<p><a href="#">広告</a></p>
	</aside>
	<footer>
	
	<address>&copy;html5</address>
	</footer>
	</body>
</html>

html5 asideとnavを作る

html5 asideとnavを作る

html5 navをナビゲーション作る

ナビゲーションを作ろう。
ナビゲーションはhtml5から追加されたタグです。
nav
xhtmlはulやliでグローバルナビゲーションを作ってました。
navはそれをnavで囲ってやるだけです。
基本的な作成方法はかわりません。

<nav>
<ul>
<li><a href="#">home</a>1</li>
<li><a href="#">blog</a>2</li>
<li><a href="#">contact</a>3</li>
</ul>
</nav>

html5 asideを補足情報作る

asideは補足情報とかサイトバーとか広告とかに使います。

記事では使用しません。

asideははhtml5から追加されたタグです。

<aside>
	<p><a href="#">広告</a></p>
</aside>

サンプル

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>a</title>
	</head>
	<body><header>
<h1>こんにちわ</h1>
<nav>
<ul>
 <li><a href="#">home</a>1</li>
 <li><a href="#">blog</a>2</li> 
 <li><a href="#">contact</a>3</li> 
</ul>
</nav>
</header>
		
	
	<article>
	
<h2>ブログタイトル</h2>

	<p>ブログの内容</p>
	</article>
	
	<aside>
	<p><a href="#">広告</a></p>
	</aside>
	<footer>
	
	<address>&copy;html5</address>
	</footer>
	</body>
</html>

html5 sectionとarticleを作る

html5 sectionとarticleを作る

html5 sectionを作る

sectionタグはhtml5からのタグです。
章、節、項を表すための要素です。

<section>
<h1>見出し</h1>
内容
</section>

見出しとかは必須ではありません。

validatorでチャックするとセクションに見出しをつけないと怒ります(笑)

https://html5.validator.nu/

記事はarticleを使用しましょう。
補足情報はasideです。
セクションは分類すると大分類。
articleは小分類とかでしょうか。
使用方法が曖昧さを含んでいます。

html5 articleを作る

articleタグはhtml5からのタグです。
ブログやニュースサイトの記事などで使用されます。

<article>
	
<h2>ブログタイトル</h2>
<p>ブログの内容</p>
</article>

ブログの記事をまとめてます。

サンプル

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>a</title>
	</head>
	<body><header>
<h1>ブログタイトル</h1>
<nav>
<ul>
<li>1
<li>2
<li>3
</ul>
</nav>
</header>
		
	
	<article>
	
<h2>ブログの記事のタイトル</h2>

	<p>ブログの内容</p>
	</article>
	

	<footer>
	
	<address>&copy;html5</address>
	</footer>
	</body>
</html>

 

html5 headerとfooterを作る

html5 headerとfooterを作る

html5 headerを作る

headerはxhtmlではdivにid名をつけて作成してました。
html5ではheaderという要素があります。

<header>
<h1>こんにちわ</h1>
</header>

<header>と</header>でヘッダー要素を入れ子にします。

またnavというネビゲーションニ使用する要素をヘッダーに入れることができます。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>a</title>
	</head>
<body>
<header>
<h1>こんにちわ</h1>

<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>

</header>
		<p>sample</p>
	</body>
</html>

html5 footerを作る

html5ではfooterもタグが追加されました。

<footer>
</footer>

コピーライトはアドレスタグで作成します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>a</title>
	</head>
	<body><header>
<h1>こんにちわ</h1>
<nav>
<li>1
<li>2
<li>3
</nav>
</header>
		<p>sample</p>
	<footer>
	<address>&copy;html5</address>
	</footer>
	</body>
</html>

html5 構文チェックサイトとテンプレート配布サイト

html5 構文チェックサイトとテンプレート配布サイ

html5 構文チェックサイト

html5の構文のチェックサイトを紹介します。
https://html5.validator.nu/
このサイトはhtml5として有効かどうかを検証するサイトです。
入力はURLを指定するかファイルをアップロードするか、テキストをコピペするかです。

コンボボックスでAddressを選べはwebサイトのアドレスを入力してボタンを押してください。
コンボボックスでFile uploadを選べはファイルを選択を押してファイルのパスを指定してからボタンを押してください。
コンボボックスでtext fieldを選べばソースをコピペして入力してボタンを押してください。

問題があればエラーが表示されます。
サンプルファイルを入力したら
The document is valid HTML5 + ARIA + SVG 1.1 + MathML 2.0 (subject to the utter previewness of this service).
になりエラーはありませんでした。

サンプルファイル

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>sample</title>
	</head>
	<body>
		<p>sample</p>
	</body>
</html>

html5 テンプレート配布サイト

html5のテンプレート配布サイトです。
html5やcss3,javascriptのテンプレートを配布してます。
テンプレートはクラスブラウザに対応してるそうです。

https://html5boilerplate.com/

html5 コンテンツモデルは7個に分類される

html5 コンテンツモデルは7個に分類される

html5 コンテンツモデル

従来はインライン要素ブロック要素という概念でした。
これらの概念は廃止されました。
新しくコンテンツモデルという概念になりました。
コンテンツモデルとはhtml5の要素ごとにコンテンツを含めるかをグループ化したものです。
html5の各要素は単一、または複数のカテゴリーに分類できます。

メタデータコンテンツ

ブラウザ上に表示されない。メタデータやスタイルに関するコンテンツです。
通常はhead要素内に配置される要素です。
メタデータコンテンツの要素
base
command
link
meta
noscript
script
style
title

フローコンテンツ

htmlドキュメントやwebアプリケーションに使用されるコンテンツ全般です。
ほとんどの要素がこのコンテンツに含まれます。
a
abbr
address
area
article
aside
audio
b
bdo
code
command
datelist
del
details
dfn
dialog
dib
dl
em
embed
fieldset
figure
footer
form
h1
h2
h3
h4
h5
h6
header
hgroup
hr
i
iframe
img
input
ins
kbd
keygen
label
link
map
mark
math
menu
meta
meter
nav
noscript
objext
ol
ruby
samp
script
sextion
select
small
span
strong
style
sub
sup
svg
table
textarea
time
ul
var
video
text

セクショニングコンテンツ

章や節の見出しや内容を表す範囲を定義するコンテンツ
セクショニングコンテンツ
article
aside
nav
section

ヘッディングコンテンツ

セクションの見出しを定義するコンテンツ

h1
h2
h3
h4
h5
h6
hgroup

フレージングコンテンツ

htmlドキュメントのテキストのことです。

a
abbr
area
audio
b
bdo
br
button
canvas
cite
code
command
datalist
del
dfn
em
embed
i
iframe
img
input
ins
kbd
keygen
label
link
map
mark
math
meta
meter
noscript
object
output
progress
q
ruby
samp
sub
sup
svg
textarea
time
var
video
text

エンベッティッドコンテンツ

ドキュメントに他のリソースを組み込むコンテンツ橙。

audio
canvas
embed
iframe
img
math
object
svg
video

インタラクティブコンテンツ

ユーザが操作を行うことができるコンテンツ

a
audio
button
details
embed
iframe
img
input
keygen
label
menu
object
select
textarea
video

html5 廃止させた属性と代替方法

html5 廃止させた属性と代替方法

html5 廃止させた属性と代替方法

他の要素や属性で代用可能な属性

属性名 概要 代替方法
charset 文字コードの指定 httpヘッダーで指定
coords 複数のリンク先を指定する際の座標 area要素で代用
shape 複数のリンク先を指定する際の座標 area要素で代用
name オブジェクトの名前を指定 id属性で代用
rev リンク先からの関係を指定 rel属性で代用
usemap イメージマップの名称を指定 img要素で代用
atchive 関連データの場所を指定 data属性、またはtype属性で代用
classid オブジェクトファイルを指定 data属性、またはtype属性で代用
code javaアプレットのクラスの指定 data属性、またはtype属性で代用
codebase URLの指定 data属性、またはtype属性で代用
codetype classid属性で指定するデータのMIMEタイプ data属性、またはtype属性で代用
language スクリプト言語の指定 type属性で代用
abbr ヘッダ情報を指定 titile属性で代用
axis セルが属するカテゴリを指定 scope属性で代用

完全に廃止される属性
cssで代用が可能

属性名概要cssの代替方法

alink 選択中のリンクの色 a:hoverプロパティで代用
bgcolor 背景の色 backbround-colorプロパティで代用
link リンクの色 a;linkプロパティで代用
marginbotton 下のマージンを指定 margin-bottomプロパティで代用
marginheight 上下のマージンを指定 marginプロパティで代用
marginleft 左マージンを指定 marginl-eftプロパティで代用
marginright 右マージンを指定 marigin-rightプロパティで代用
maragintop 上マージンを指定 margin-topプロパティで代用
marginwidth 左右マージンを指定 margin-widthプロパティで代用
text text要素内の基本文字色 colorプロパティで代用
vlink 訪問済みのリンクの色 a;visitedプロパティで代用
clear テキストの回り込みを解除 positionプロパティで代用
align 水平方向の表示位置 text-alignプロパティで代用
valian 垂直方向の表示位置 vertical-alignプロパティで代用
width 幅の指定 widthプロパティで代用
color 色を指定 colorプロパティで代用
noshade 平面線を指定 borer,backgrond-color,heightプロパティで代用
size 文字サイズを指定 font-sizeプロパティで代用
frameborder 境界線を指定 borer系のプロパティで代用
scrolling スクロールを指定 scrollingプロパティで代用
border 境界線を指定 borer系のプロパティで代用
type リストマークを指定 text系のプロパティで代用
compact テキストを1行で表示 vertical-alignプロパティで代用
cellpadding 余白を指定 padding系のプロパティで代用
cellspacing スペースを指定 border系。padding系のプロパティで代用
frame 境界線を指定 borer系のプロパティで代用
rules 内罫線を指定 borer系のプロパティで代用
nowrap セル内の改行を制限 white-spaceプロパティで代用
background 背景に関する指定 backbround系のプロパティで代用

html5 pやddやliは終了タグを省略できる

html5 pやddやliは終了を省略できる

html5 pやddやliは終了を省略できる

html5 pやddやliは終了を省略できる。
終了タグを省略できるのはある要素に含まれる等条件があります。

条件とはliだと親要素がulがあるから省略できるとかです。

とかは省略しないほうが無難だとは思います。

空要素以外で省略できるタグ一覧
li
dt
dd
p
rt
rp
optgroupoption
coigroup
thead
tbody
tfoot
tr
td
th

サンプル

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8 /">
		<title>sample</title>
		<script src="/js/x.js" ></script>
		<link rel="stylesheet" href="/css/xx.css">
	</head>
	<body>
		<p>sample</p><br>
		<p>sample</p>
		<ul>
			<li>1
			<li>2
		</ul>
	</body>
</html>

pタグ等は自信がなければ

はこの通り省略しなくてもいいです。