カテゴリー

キーワード

 
> HTMLとは何? HTMLでどんなこ...

HTMLとは何? HTMLでどんなことができるの?


2015 年 2 月 5 日 投稿    view: 2887
タグ:
このエントリーをはてなブックマークに追加

HTMLとは何か?TOP画像

昨日に引き続き、WEBマーケティング部の杉尾がお送りします。
よろしくお願いします。

HTMLとは何か?

HTMLとは、ウェブページを作るためにある言語です。

 

それはともかく語句説明を。
こういうの気になる人っていますよね(僕です)

 

HTMLとは、HyperText Markup Languageの頭文字をとったものです。

 

HyperText(ハイパーテキスト)は複数の文書(テキスト)を相互に関連付け、結び付ける仕組みで、「テキストを超える」という意味です。

Markup Language(マークアップ言語)はコンピュター言語の一種で文書に目印をつけ、構造や装飾に関する指定をするものです。

 

平たく言えば、

 

文書に目印をつけ、その部分がどういう役割を果たすか(コンピュータに対して)指定し、それぞれの文書を結びつける

 

ものです。

 

HTMLで書かれたウェブページの概念図

 

上図をご覧いただいたらわかると思いますが、ウェブページと他のウェブページを結びつけています。
そこで両者の規格を統一しておかなければ、どうやって見せたらいいかコンピュータが混乱しますよね。

コンピュータが理解しやすいようにHTMLでウェブページを構成していくわけです。

 

要素と属性

 

初めて見た人にとってHTMLは難解で暗号のように感じられるかもしれません。
でも、見方さえわかればすぐにわかるようになります。

「要素」

要素」というのは
p,spanといった、その部分が何なのかを示すものです。
例えばp要素であれば、そこが文章のかたまりだとわかります。

 

<開始タグ>~</終了タグ>を見つけることができれば、その部分にどんな指定がされているかわかるようになります。
(※厳密にはスタイルシートも関わってきますので、全てわかるわけではありません)


例えばこんな感じで書きます。


<p>ここがひとつの段落になります</p>

 

「属性」

属性」というのは「要素」に指定することで、装飾を指定できるものです。
idやalign,classのことです。
複数の属性がある場合は、半角空白を間に入れて並べることができます。

 

<p id="danraku" align="right">ここがひとつの段落になります</p>

ちなみに属性の順番は関係ありません

 

僕はidがある場合、基本的にはidを先頭にしています。

※現在、装飾をつけるときは要素にclass属性をつけ、それにスタイルシートで指定することが多いです。(業界の流れです、多分)


idをつけるときはjavascriptで動的にページを動かしたい場合が多いので、(自分以外の誰かが)後で見たときわかりやすいように先頭に置いています。
idに関しては個人的にやっているだけなので、スタンダードがどうなのかはわかりません。

 

こういう細かい順番とか手順が気になって手が止まる人っていますよね。
はい、僕です。(二回目)


装飾例

 

<div style="border:1px solid black; text-align:right; width:200px; color:#ffffff; background:#000000;">
右寄せ文字色白背景黒
</div>

 

前回説明しましたが、HTML4.0以降では直接装飾を指定するのではなく、外部スタイルシートを読み込むことを推奨されています。
ですので、上記は非推奨の書き方となります。

間違いではありませんが、今はこう書きます。


[CSS]

.aaa {
    border:1px solid black;
    text-align:right;
    width:200px;
    color:#ffffff;
    background:#000000;
}

 

[HTML]

<div class="aaa">
右寄せ文字色白背景黒
</div>

 

classという属性に「aaa」という名前をつけて、それに装飾を指定しています。


この属性をつけられるというのが、HTMLの特徴の一つです。
上の例は「へぇ~」といった感じで見ておいてください。

 

タグは入れ子にできる

 

<p class="aaa">ここがひとつの<span class="bbb">段落</span>になります</p>

 

こんな書き方が可能です。

 

ちなみに下記は間違いです。

 

<span class="bbb"><p class="aaa">ここがひとつの段落</span>になります</p>

 

小文字or大文字?

 

HTML自体は大文字でも小文字でも、どちらで書いても大丈夫なのですが、基本は小文字で書いてください。

 

XHTMLでは小文字での記述が義務付けられている影響もあり、今現在大文字で書く人は稀です。
小文字で書いておくのが無難です。

 

大文字で書かれたものを見ると懐かしい感じがする人は業界歴が長い人ですね。(笑)

 

まとめ

HTMLはウェブページを作る上で基本となる技術なので、しっかり覚えたいですよね。

次回はもう少し実践的なことをお話したいと思います。

 

最後までお読みいただきありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事