HTMLの文法がめちゃくちゃらしいので

初めての質問です。
自分のＨＰを作成しておりますが、ＨＰビルダーで作っているためにＨＴＭＬの言語を知らずにずーっと更新してきました。なんとかモバイル対応やファビコンも出来たので、次に構造化データの簡単なパンくず・商品なども上手くいったためにCorporationに挑戦しました。Structured Data Testing Toolを使いながらやっとの事で出来上がったのですが、HTMLの文法テストは悲惨な状況でした。
トップページの最後に入れた会社名と連絡先を会社の構造化データにしたいのです。
ＨＴＭＬとＳｃｈｅｍａ知識のある方、どうか文法的に正しくなるように助けて下さい。
たった４行のプログラムなのに自分ではどうにもなりません。
解説して頂けると知識にはなりますが、正しいデータにして頂けるだけでもありがたいです。
　宜しくお願い致します。

<SPAN itemscope itemtype="http://schema.org/Corporation">

<P align="center"><SPAN itemprop="name"><FONT size="5">●●株式会社</SPAN></FONT> <FONT size="2"><TH scope="row">電話</FONT><FONT size="3"> : </FONT><FONT size="5"><TD><SPAN itemprop="telephone">045-123-4567</FONT><FONT size="3"> </FONT><FONT size="2"><TH scope="row">FAX</FONT><FONT size="3"> : </FONT><FONT size="5"><SPAN itemprop="faxNumber">045-890-1234</FONT><BR>

<SPAN itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">〒<SPAN itemprop="postalcode">123-4567</SPAN>

<SPAN itemprop="addressLocality"><FONT size"6">横浜市</SPAN><SPAN itemprop="streetaddress">●●区●●町123番地45</SPAN></FONT><BR>

No.6 回答者： hitomura 回答日時： 2016/05/13 20:49

私は大筋において ORUKA1951 と同意見ですが、ただ一か所ミスをしている点がございますのでここに記します。

＞ itemprop　そのような属性はない!!
自分も検索してみて初めて知ったのですが、これは HTML5 に対する拡張の一つ microdata で定義されている属性です。
https://en.wikipedia.org/wiki/Microdata_(HTML)
http://www.w3.org/TR/microdata/
https://html.spec.whatwg.org/multipage/microdata …

No.5 回答者： ORUKA1951 回答日時： 2016/05/13 09:22

＞今後基本を少しずつ習得していこうと思っています。

　それが良いでしょう。私がウェブページを作り始めたのは20年以上前で、今のようなオーサリングツールはなくて、唯一Netscape Navigator Gold--がWYSIWYG の HTML エディタでしたね。
　当時は、HTML3.2が登場(1997)した頃で、あなたのHTMLにみられる<font>とか<center>とか、align="center"とかが規定されていしました。それは、
14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　を読まれると理解できるでしょう。まさにそれこそビルダーの悪名の根源!!!

　その反省から、HTML4.01が策定されました。その最大のポイントは
構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　と言ってよいでしょう。!!。互換性のためにtransitional(互換)も用意されていましたが、基本的にはstrictが推奨でした。
→ HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　☆ビルダーはこの勧告を一切無視してきた。
「HTMLやスタイルシートを知らなくてもウェブページ(ホームページ)が作れる」と宣伝してきた。まあそうでしょう。知られるとまずい。由(よ)らしむべし知(し)らしむべからず( https://kotobank.jp/word/%E7%94%B1%E3%82%89%E3%8 … )のスタンスは今で一貫していますから・・(^^)

　ところが、あなたのように「国内のウェブサイトにおける非互換要因の一つとして、ホームページ・ビルダーの名前が調査書の中で挙がっている( https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC … )」に気づく人がでてくる。

　となると、残念ながら習得したものをすべて破棄して、最初から学び始めなければならなくなる。

私のおすすめとしては
1) まずHTML4.01仕様書を通読する。必ずstrictを目指す。
　それぞれの要素(タグ)はなにほまーくアップするのかくらいは知っておく。
　文法自体のチェックはW3Cのサイトだろうが、Another Lint でよいです。開発されているならツールの豊富な( https://addons.mozilla.org/JA/firefox/extensions … )firefoxをお使いでしょうから、文法チェック機能はついてます。ページを右クリックしてソース表示だけ。
　ビルダーを使う場合も、この段階では一切デザインは考えない。

2) HTMLが完成したら、それぞれ要素を選択してスタイルシートを記述する。
　これはビルダーはしてくれませんので、自分でするしかない。そのようなプロパティがあるとか、その指定がどこに効いているかはチェックできる。
　(例)
　　div.section div.aside{ /* 本文中の補足記事は・・という意味 */
　　　position:absolute; /* 直近のstatic以外の親要素に対して絶対配置 */
　　　right:0; top:0;
　　}

面白い例を
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
・ページを右クリックしてソースを見ると極めてシンプルです。
　　Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　　で文法チェックしてみる。
　誰でもメンテナンスできる
・ブラウザ(IE か firefox)でブラウザの表示メニューでスタイルを選択してみる
　HTMLソースはそのままでスタイルシートだけでデザインされています。
　　ウィンドウ幅を変えてみる。
　自在にデザインを変えられるということ
　さらに、印刷プレビューで印刷時の状態を確認
・スタイルシートを使用しないで表示されるものが検索エンジンに見える姿

　いったんビルダーに慣れてしまうと大変だと思いますが、逆にウェブページ作りはとても楽になりますよ。ひな形を作って、あとはそれにテキスト埋め込むだけですから・・

No.4 回答者： ORUKA1951 回答日時： 2016/05/12 18:29

少し長いですが、ウェブページを作成する基本ですので、よく読んでください。

そのソースを見ただけで「HTMLの文法テストは悲惨な状況」は理解できます。
ウェブページを作成するときは、まず仕様書だけは目を通して、それに基づいて作っていきます。
その知識なく、ビルダーのようなオーサリングツールを使うと、「酷いもの」ができてしまいます。
　・・・HTMLの知識に加えて、ツールの癖--悪癖 --を理解しておかなければならない。
特にビルダーは
　作成したウェブサイトの影響( https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC … )
　にあるように、私たちがSEOを依頼されて一番てこずるものになります。

例えば、
<P align="center">
　align = left|center|right|justify [CI]
　 推奨しない。
　 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …

<SPAN itemprop="name">
　itemprop　そのような属性はない!!

<FONT size="5">
　FONT要素とBASEFONT要素は推奨しない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

たった３つの要素でこれだけですから、推して知るべし

ウェブページ（ホームページではない!!） ホームページ
　 https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC …

　HTMLの歴史( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )と、HTMLの祖先であるSGMLの背景( https://ja.wikipedia.org/wiki/Standard_Generaliz … )は、必ず読んでおきましょう。

<span>がたくさん使われていますが、HTML4.01(16年前:1999年勧告)の時代には、文書の構造を示す要素がなかったために、divやspanを代用していました。
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　これは、HTML5と比較するとわかります。
HTML5だと
<body>
　<header>
　　<h1>ページタイトル</h1>
　　<nav>ナビゲーション</nav>
　</header>
　<section>
　　<h2>本文</h2>
　　本文記事
　　<aside>
　　　本文と直接関係ない記事
　　</aside>
　</section>
　<footer>
　　<address>ここに文書全体、あるいはフォームなど文書の主要部分に関する問い合せ先を示す</address>
　</footer>
</body>

HTML4.01の場合は
<body>
　<div class="header">
　　<h1>ページタイトル</h1>
　　<div class="navigation">ナビゲーション</div>
　</div>
　<div class="section">
　　<h2>本文</h2>
　　本文記事
　　<div class="aside">
　　　本文と直接関係ない記事
　　</div>
　</div>
　<div class="footer">
　　<address>ここに文書全体、あるいはフォームなど文書の主要部分に関する問い合せ先を示す</address>
　</div>
</body>

となっていたはずですね。
・・・これで文法チェックは満点近くなるはずですし、検索エンジンにも問い合わせ先が<address>要素で理解できる。

　そのうえで、本文の隣に直接は関係ない(asideな)記事を置きたければ、
div.aside{position:absolute;top:0;right:0;width:20%;}
　とかデザインしていく。

★ところが、ビルダーはこんなタグは決して書いてくれませんね。
　それを知って使わなければならないのですから大変です。候補も出してくれない。
　その原因は、HTMLを作るのではなく、あたかもDTP(オンライン出版 https://ja.wikipedia.org/wiki/DTP )やワープロでカタログを作る事と全く違うページ制作であることを理解していない・・ユーザーに起因するのですよ。
　すなわち、
1) タグで文書の構造をマークアップして、
　　ここではデザインは一切考えない。ひたすから文書構造をマークアップする
2) その文書構造に基づいて、利用してデザインしていく

　この基本中の基本を知らないとビルダーは使えない。他のオーサリングツールは、HTMLやCSSの基礎知識がないと使えないと指摘されるけど、ビルダーはそれらは不要だとさえ宣伝する。


＞どうか文法的に正しくなるように助けて下さい。
　それはツールは無論、第三者のだれにもできないのですよ。なぜなら、その文書の構造はあなたしか知らない。
＞トップページの最後に入れた会社名と連絡先を会社の構造化データにしたいのです。
　の意味が不明ですが、
<div class="footer">
　<address>問い合わせ先 ・・・・・・ </address>
</div>
HTML5なら
<footer>
　<address>問い合わせ先 ・・・・・・ </address>
</footer>
で済む話。
　なぜなら、
<footer>は
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
footer 要素は、その直近の祖先にあたるセクショニング・コンテント、または、セクショニング・ルートのフッターを表します。フッターは、通常は、そのセクションに関する情報を含みます。例えば、誰が書いたのかとか、関連のドキュメントへのリンクや、著作権データや、その類です。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［footer 要素 - セクション - HTML要素 - HTML5 タグリファレンス - HTML5.JP( http://www.html5.jp/tag/elements/footer.html )］より
に使い。
<address>は
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
address 要素は、直近の祖先にあたる article もしくは body 要素に対する連絡先情報を表します。それが body 要素なら、その連絡先情報は、ドキュメント全体に適用されるものとなります。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［address 要素 - セクション - HTML要素 - HTML5 タグリファレンス - HTML5.JP( http://www.html5.jp/tag/elements/address.html )］より
なのですからね。--addressはHTML4.01と大差ありません。

★もちろんfontなんてものは、HTML4.01strit以降、HTMLにはありませんし。spanやdivは安易に使えません。

　ちなみに、ビルダーで作られたページのSEOを依頼されたときは、一切のタグは消してしまって、素のテキストと画像データだけにして、ゼロから作り直します。そのほうが早い。

Webオーサリングツール - Wikipedia #HTMLエディタ( https://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83 … )

　いずれにしろ、どんな優れた高価な艇庫オーサリングツールであっても、文書構造は著者しか知らないわけですから、構造化するためにはHTMLの基礎知識は必要です。
　最低
HTML4.01の仕様書くらいは目を通しておきましょう。
HTML 4.01 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

この回答へのお礼

率直にご指摘頂きまして有難うございます。
自分でもこれ以上HTMLに触れるなら、今使っているＨＰビルダーがHTML4.01なので仕様書位は目を通しＰタグやＩタグの使い方などをまさに今読んでいたところでした。事実、構造化データを加えてＨＰビルダー内で自動文法チェックしてくれると勝手に修正しとんでもない事になったので、これは構造化データが４．０１のバージョンには入っていないのだろうと察してチェックを切って使っています。構造化データを加えるまでは、文法のテストツールでまあまあの点数が取れたので次のステップに行ってみたくなり、結果がこの様ですので先に４.０１を少しは勉強してから入るべきでした。
今後基本を少しずつ習得していこうと思っています。

お礼日時：2016/05/12 21:26

No.3 回答者： Rugrug 回答日時： 2016/05/12 17:39

失礼しました。

訂正します。
”（全角）→"（半角）に訂正しました。
他の内容はNo.1と全く同じです。
Structured Data Testing Tool でもエラー無しを確認できました。

<dl class="features" itemscope itemtype="http://schema.org/Corporation">
<dt>社名</dt>
<dd itemprop="name">●●株式会社</dd>
<dt>住所</dt>
<dd itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
〒<span itemprop="postalCode">123-4567</span> <span itemprop="addressRegion">神奈川県</span><span itemprop="addressLocality">横浜市</span><span itemprop="streetAddress">●●区●●町123番地45</span></dd>
<dt>電話：</dt>
<dd>
<span itemprop="telephone">045-123-4567</span>
</dd>
<dt>FAX：</dt>
<dd>
<span itemprop="faxNumber">045-890-1234</span>
</dd>
<dt>WEBサイト</dt>
<dd>
<a href="http://www.dm-s.co.jp/" target="_blank" itemprop="url">サイトURLをこちらに</a>
</dd>
<dt>設立</dt>
<dd><span itemprop="foundingDate">平成○○年○月○○日</span></dd>
<dt>資本金</dt>
<dd>xxx,xxx,xxx円（平成○○年○月現在）</dd>
</dl>

dtとddを横に並べるCSS
dl {
line-height: 2em;
margin-bottom: 35px;
}
dt {
width: 7em;
padding: 3px;
font-weight: bold;
}
dd {
padding: 3px 3px 3px 7em;
margin-top: -2.5em;
}

この回答へのお礼

催促して申し訳ありませんでした。
別の方にも指摘されたのですが、もう少し基本を勉強するように心がけます。
とりあえずSearch Consoleが理解してくれれば良かったのですが、文法上にもあまり間違えが無いようにしたいと思いチェックしてみたらとんでもない状態でした。５０の手習いという事でお許しください。
有難うございました。

お礼日時：2016/05/12 21:40

No.2 回答者： Rugrug 回答日時： 2016/05/11 22:41

No.1です。

誤りがありましたのでCSSの訂正をします。

dl {
line-height: 2em;
margin-bottom: 35px;
}
dt {
width: 7em;
padding: 3px;
font-weight: bold;
}
dd {
padding: 3px 3px 3px 7em;
margin-top: -2.5em;
}

失礼しました。

この回答へのお礼

Rugrugさん、早々に回答頂きまして有難うございます。

Structured Data Testing Tool にソース（ちゃんと<dl～/dl>）を貼り付けてテストすると『タイプCorporationのオブジェクトではプロパティー"name"はGoogleでは認識されません』と表示され、全てのプロパティーがエラーになります。
（１０エラー）
また、その他のエラーとして『属性itemtypeの値が無効です』というのが２個でてきます。
どうしてなのでしょうか？
こんなの無視しとけばよいのでしょうか？
考え方としてはSearch Consoleがちゃんと認識してくれればよいのかとは思いますが......。

お礼日時：2016/05/12 11:23

No.1 回答者： Rugrug 回答日時： 2016/05/11 22:33

<dl class=”features” itemscope itemtype=”

http://schema.org/Corporation”>
<dt>社名</dt>
<dd itemprop=”name”>●●株式会社</dd>
<dt>住所</dt>
<dd itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>
〒<span itemprop=”postalCode”>123-4567</span> <span itemprop=”addressRegion”>神奈川県</span><span itemprop=”addressLocality”>横浜市</span><span itemprop=”streetAddress”>●●区●●町123番地45</span></dd>
<dt>電話：</dt>
<dd>
<span itemprop=”telephone”>045-123-4567</span>
</dd>
<dt>FAX：</dt>
<dd>
<span itemprop=”faxNumber”>045-890-1234</span>
</dd>
<dt>WEBサイト</dt>
<dd>
<a href=”http://www.dm-s.co.jp/” target=”_blank” itemprop=”url”>サイトURLをこちらに</a>
</dd>
<dt>設立</dt>
<dd><span itemprop=”foundingDate”>平成○○年○月○○日</span></dd>
<dt>資本金</dt>
<dd>xxx,xxx,xxx円（平成○○年○月現在）</dd>
</dl>

dlは定義リスト
その中のdtは定義リストのタイトル
ddは定義分を（複数回繰り返しも可能）
</dl>までは必ずdtを閉じたらddがある必要がある。

HTMLには論理タグと物理タグにわけられます。
論理タグは意味を持たせるために使うタグです。
物理タグはブラウザの表示が変わるためにあります。
物理タグは意味を持たないために検索エンジンが何を包括した単語なのか理解できません。
fontタグは物理タグです。
フォントサイズを調整したいのであればCSSで書きましょう。

以下のCSSを適応するとdtとddが横並びになり、ddの右端で改行されます。

dl {
line-height: 2em;
margin-bottom: 35px;
}
dt {
width: 7em;
padding: 3px;
font-weight: bold;
}
dd {
padding: 3px 3px 3px 90px;
margin-top: -2.5em;
}