HTML の要素の遣ひ方、特に本文以外の細々とした部分のパターンを紹介します。
以前、HTML から CLASS を無くすことを説明しました。ところが、CLASS が無い場合、HTML だけで見た目を整へようとして色々な要素タイプを場當たり的に使用してしまふことがあります。
一貫性のある見易いサイトにしたいなら、一貫性のある HTML を書き、見易い CSS を適用することが有效だと考へます。これでサイトに規則性・反復性が生れます。
筆者は今まで書いた HTML から共通のパターンを探して、それらを流用することにしました。
UL の中に LI を 1つだけ置き、本文から分離された短文を表現します。
LI 要素内で項目名の後に「--」「:」を置き、續けて補足を書きます。項目名を A・B・Code・Q などの要素で圍むのも有效です。
次の例では、一般的でない生き物の名前に補足を添へてゐます。
この樣に一部の項目のみに補足が附く場合、DL・DT・DD で表現すると DT・DD の繋がりが曖昧になります。「メダカ」「カナヘビ」の2者が「ヘビではなく……」と繋がつて見えます。
SAMP (サンプル出力) で全體を圍み、ターミナルアプリの畫面であることを表現します。次に、コマンドの部分を KBD (ユーザーの操作) で表現します。ユーザー名など、環境により異なる部分は STRONG などで強調するか、「ユーザー名」などの説明的な單語にして VAR (變數) で表現します。
このサイトの CSS では、見易さのために SAMP と KBD とで微妙に異なる文字色を設定しました。
$ cd ; pwd /home/ユーザー名 $ echo 'echo hello world' > hello $ ./hello ksh: ./hello: cannot execute - Permission denied $ chmod +x hello $ ./hello hello world
文書中の畫像には、説明文が附いたり「圖1」の樣なラベルが附いたりします。ALT 文字列には、畫像の代替となる、かつ、文章として自然な文言を指定します。
畫像を DT に置く場合:
畫像を DD に置く場合:
SNSの投稿を「埋め込む」方法は色々ありますが、筆者は簡潔な方法を考案しました。
まづ P 要素を置き、投稿者・日附・投稿の URL などを記述します。投稿の URL は CITE 要素で圍みます。次に BLOCKQUOTE 要素を置き、その中に投稿の本文を書きます。本文中のマーク附けはなるべく元の投稿のままにしておくべきだと考へますが、HTML 文書全體を通して正しいマーク附けにするための變更は仕方がありません。
例です:
2023-11-09 の「たかし (@tak4@social.076.moe)」の投稿 (https://social.076.moe/notice/1073717):
オフラインで動くWordPressみたいな物があればな。(あるかも?) 記事を書いて静的HTMLに出力して無料サーバーに配置できると良い。闇雲に「HTML手打ち」をすると記事が増えた時にメンテナンス性が下がるし「静的サイトジェネレーター」はマニアックだ。GUIで記事を作れる事が重要かと。
大抵の HTML 文書は複數の章を持ちます。1つの HTML 文書の中で各章の形を合せて同じパターンを繰り返せば、讀み心地がよくなります。そして、大事な箇處をパターンから逸脱させれば強調になります。
この文書では各章に次のパターンを持たせました。