| 駄目な構造 HTML4+div+インデント（先頭空白）の多用
検索大手はHTMLとJSとCSSの外部書類化推奨 | 最良な構造 HTML5+span+table+b+centerの多用 tableという表で１ページ全部をレイアウト | |||||||||||||||||
|
| |||||||||||||||||
|
この構造は多くの大手などのWebサイトで使用
①右図と違いと違いタグなどが無駄に長すぎる 個別カスタマイズは混乱の元で、その仕事の 担当はXMLだ。個別タグは検索されづらい ②idを多用しすぎると修正がかなり 面倒なのでclassを使う ③divタグなどはtableタグと違い 上記の黒や赤線などの線を作れない 多くのサイトでdivタグを使用しているが、 divが多すぎだと分かりづらく使用は疑問だ 例外）中央揃えタグの<center>は HTML5では廃止だが、他のと違い 文字数が少なく便利だ ④インデントは外注と異なると混乱するので 使用せずに、長文は外部書類化した方が楽 ※インデントに日本語空白を入れるとエラー になるので、なおさら邪魔 ⑤htmlではなくphpで作成の方が評価が高い ※例外で本書類はHTMLの入門ページとして、 DVDなどで配布のためにhtmlにしている ⑥非推奨だがnoteでは太字bのみ表示可なので使用 ⑦プログラミング1書類で多数ページを計算式で 作る人がいるが、htmlのようにした方が、 無駄な手間や時間が省ける。DVDやメールで 配布プレゼンという多様化こそ宣伝になるので、 htmlのphp化や外部書類化をせずに、この書類 のソースをコピペし、メール添付などと状況に よりけりｄが、このレベルは初心者ではない |
この構造の特に③は多くのWebサイトで不使用
①HTML5は無駄なタグを廃止し、適正化して いるので、検索されやすくなる。ただし内容が 物凄く良ければ、個別タグでも検索されやすい ②idはclassよりも早く見られるので、 例えば宣伝がてらの為替価格を読む、 スクレイピングの１か所のみで使用 ③tableタグはdivタグよりもレイアウトが 崩れない。divタグは文中に入れると 改行されてしまうのでspanを多用する 例外）大手サイトは上記のタグをつけていない 場合もあるが、それは検索関係は なく集客が出来るからで無名は別 ④外部書類化する書類は画像のimageフォルダ とphoto以外は同階層の方が、個別配布でも楽 ⑤内部リンクにホスト名を入れると、引越時に 置き換える数が膨大になり面倒ので/のみの 絶対パスが推奨で、../相対パスや書類に リンクは、書類名は変更されやすいので 非推奨。リンクの下線表示をしろという、 有名な動画配信者もいるが、デザイン無知だ ⑥h1などでサイズ依存も廃止だがh1 styleで指定 ⑦CSSの「page-break-after: always;」を 使うと、1書類が長文でも改ページ印刷が 出来る→閲覧者は縦スクロールよりも、 リンクを押すのを面倒くさがる。金持ちな 高齢者客は、印刷物で参考資料を欲しがる。 情強な中級者は客にならないか、難しい |
|||||||||||||||||