html の概要: 文書の構造と基本的な作業

UB3/informatics/html/html_basic

このページの最終更新日: 2024/09/30

  1. html 文書の基本構造
  2. 基本的な作業
  3. html の書き方に関する個人的メモ
    • 閉じタグの省略
    • html ソースのインデント
    • URL に .html をつけるかどうか

「URL に .html をつけるかどうか」は、301 リダイレクト のページに移動しました。


広告

html 文書の基本構造

一般的なウェブサイトは、html (hyper-text mark-up language)という言語で記述されている。これは < と > で囲まれた文字列 (タグ) を命令と解釈し、それに従って文章のレイアウトを整える仕組み である。

タグは原則として 2 個で 1 組になっていて、/ がついているものが命令を閉じるタグである。いくつかタグの例を挙げてみると、

  • <html> と </html>: この 2 つのでタグ囲まれた部分が html で記述されているという意味。最初の <html> の開始命令が </html> で終了していると考える。
  • <br />: 改行を示すタグ。開始タグと閉じタグが一緒になっていると考える。
  • 単に「あいうえお」と書くと「あいうえお」になるが、<strong>あいうえお</strong>と書くと太字のあいうえおになる。

大体のブラウザには「ソースを表示」というコマンドがあり、ウェブサイトを記述している html を見ることができる。このサイトで主に使っている記述を このページ にまとめた。


html で書かれたページは、全体が <html> </html> で囲まれる構造になっており、大きく head と body に分かれている (3)。

head にはページのタイトル、スタイル、検索用キーワードなどが記述され、ここに書かれた情報は基本的にページには表示されない。

body とはページの内容が記述される場所である。これをまとめると、以下のような構造になる。

<html>
    <head>
        <title>ページのタイトル</title>
    </head>
    <body>
        <p> ここに記事の本文が記載される。p は段落を示すタグ。</p>
        <p> このように、複数の段落や見出しがここに書かれる。</p>
    </body>
</html>

上の例では、head 部分に <title>ページのタイトル</title> としてページタイトルを書いている。検索をしたときに、以下のような形で出てくるのがページタイトルである。head 部分に含めることのできる要素は、head tag のページ にまとめた。

検索結果 ページタイトル

なお、head の他にも header というタグがあり少しわかりにくいが、header にはブラウザに表示される情報を記述する。たとえば今みているこのページでは、ページ上部にある ULTRABEM – made by doctors という部分が header である。したがって、header は body の中で記述されることになる。


html と css

例に挙げた改行や文字の太さだけでなく、ウェブサイトの見た目 (左右のカラム、背景色、フォントなど) は全て html 言語で記述されている。すると、このサイトのように同じレイアウトのページが複数ある場合には、全てのページにフォントや文字サイズを指定する命令が書かれていなければならないことになる。

これは無駄なことなので、複数のページにまたがるような情報は 1 つのファイルにまとめておき、必要に応じて各 html ページからそれを参照するという形がとられる。この情報を記述する方式を css という。文法の詳細は css のページ に。


基本的な作業

画像を貼る

img タグを使用。詳細は img タグのページ へ。

<img class="cent" src="../../images_public/statistics/Dice.png" width="150" alt="サイコロ画像">

のような形。src で画像ファイルのパス、width で幅を指定。alt では画像が表示されないときにかわりに表示する文字列を指定できる。

リンクを張るときは <a href="ファイルのパスまたはURL">リンクを張りたい文字列</a > のように a タグを使う。ファイルのパスまたは URL のあとに、属性を追加することができる。属性などの詳細は html: link の張り方 を参照。

ファイルのパスを指定すれば、ファイルダウンロードリンクとなる。

表を作る

table タグ を使う。

<table>
<td>ここに 1 列目の内容</td>
<td>ここに 2 列目の内容</td>
<td>ここに 3 列目の内容</td>
</table>

箇条書き (リスト) を作る

ol または ul というタグを使い、各アイテムは li で指定する。つまり以下のような形になる。

<ul>
<li>ここに 1 個目の内容</li>
<li>ここに 2 個目の内容</li>
<li>ここに 3 個目の内容</li>
</ul>

ol は番号の箇条書き、ul は点などの箇条書き。詳細は 箇条書き (リスト) の作り方 のページへ。

iframe

iframe タグ は、他のサイトの内容を枠の中に表示させるタグである。たとえば Youtube 動画の埋め込みなど。

<iframe src="他のサイトの URL"> </ifrfame> のようにする。Youtube や Twitter のページにいけば、そのページからシェア用の iframe タグを取得できるはず。

html の書き方に関する個人的メモ

サイトを作る過程で出来上がってきたマイルールのメモ。素人の独学なので「正しい」ことなのかどうかはわからない。

閉じタグの省略

箇条書きを閉じる </li> は省略できることがわかったので、これは書かない。わずかながらデータ通信量を減らせてエコだし、ファイルも見やすくなる。


html ソースのインデント

html ソースをインデントするかどうかについては、しない/タブでインデントする/スペースでインデントする、など色々な意見があるようで、インデントをつける派が優勢であるように思える (4)。しかし、インデントの目的は結局のところ「ソースを見やすくする」ことに尽きるようなので、どのようなインデントをつけるかは個人の好みによる (複数人でコードを管理しているような場合は、一定のルールが必要かもしれないが)。

例えば、必ずある html タグに対してまで上の例のようにインデントをつけるのは無駄に思える。また、以下のようなコードが美しいとは思えないので、このサイトでは「局所的に、自分が見やすいと思う程度にインデントをつける」 というルールで編集することにしている。


htmlのインデント
広告

References

  1. パス (URL)の指定方法. Web.
  2. 実際に段組を作ってみる. Web.
  3. ページ定義. Web.
  4. HTMLソースのインデントについて. Link.
  5. 個別ページのURLは拡張子htmlがつくほうが良いのか - URL正規化. Link: Last access 2018/03/19.

コメント欄

サーバー移転のため、コメント欄は一時閉鎖中です。サイドバーから「管理人への質問」へどうぞ。

↑