Butterbur

雑記ブログです。主に学んだ事のアウトプットがメインになります。

トップ > ITコラム > HTML編集ってあるけど、そもそもHTMLってなんなの？

HTML編集ってあるけど、そもそもHTMLってなんなの？

ITコラム

f:id:af-glow-fuki:20170509233215j:plain

 

はてなブログで記事を書くときには2つのモードがありますね。
「編集みたまま」と「HTML編集」です。

 

「編集みたまま」はMicrosoft Wordのような文章作成ソフトな感じで記事を書くことが出来るモードです。

逆に「HTML編集」は法則や仕組を知っている人であれば、より細かいデザインなどを行うことが出来るモードです。

が、逆にHTMLを理解していない人には、意味不明な文字列が表示されているだけです。

 

今日はそんなHTMLに焦点を当てて、記事を書いていきます。

 

 

 

HTMLはHyperText Markup Languageの略！

今までと同じように、まずWikipediaで調べてみました。

HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ、HTML（エイチティーエムエル））は、専らHTTPが利用されるWWWのハイパーテキストの記述に使われているマークアップ言語である（1990年代後半頃からはコンテンツという語も利用されている（「中身」という意味の語であり、御大層な意味は無い））。

 HyperText Markup Language - Wikipedia

 

なんのこっちゃい？

という感じですね。

 

HTMLの歴史もWikipediaにありました。

まとめると

  • HTMLは情報共有の為に開発された
  • マークアップ言語
  • 1990年代に仕様が定義された
  • 1996年にW3CによってHTMLの仕様が標準化された
  • 2000年からは国際標準になった

です。

 

今はインターネットで世界中の情報を共有することが出来るのがとてもすごいことですよね。

 

HTMLでどうやって書くの？

HTMLはテキストファイル

HTMLの実態はテキストファイル、つまりは文字の集合体です。
ファイルの拡張子は「.html」または「.htm」です。

 

「.html」のファイルに指定の記述ルールで文字を書いていくことで、Webで表示するためのページを作ることが出来ます。

 

HTMLの書き方

HTMLで文章を書くにはまず冒頭にHTML文章であることを明示します。

HTML5では

<!DOCTYPE html>

となります。

 

その後、<html>、<head>と続き、<body>の中身が実際にWebページに表示されます。

実際に書くと下記のような形となります。

<html lang="ja">
 <head>
 </head>
 <body>
 </body>
</html>

Wikipediaに分かり易い説明がありました。

 

このHTML文書は次のような構造を示している。

  • 文書型宣言
  • html 要素（ルート要素。また、言語コード ja の言語が使われていることの明示）
    • head 要素（この文書のヘッダ情報の明示）
      • meta 要素（文書のメタ情報）
      • link 要素（他のリソースとの関連を明示。この場合、作者の明示）
      • title 要素（この文書のタイトルの明示、この部分は en の言語が使われていることの明示）
    • body 要素（この文書の内容の明示）
      • article 要素（記事を明示）
        • h1 要素（第一レベルの見出しを明示、この部分は en の言語が使われていることの明示）
        • p 要素（段落の明示）
          • a 要素（他のリソースへのアンカーであることの明示）
          • strong 要素（強い強調であることの明示）

 

各要素の説明は上記の通りです。
実際に記載するときは「HTMLタグ」を適切な場所に配置して、ページを作成しています。

 

HTMLタグとは？

先ほどHTMLタグという言葉を使いました。
HTMLタグについても、Wikipediaで情報がありました。

 

HTMLタグ

 「タグ」とは、HTML等の中のマークアップ、すなわちHTMLやSGMLやXMLであれば、文字「<」で始まり、文字「>」で終わっている部分のみを指し、開始タグ～終了タグに囲まれた全体を指す用語である「要素」（エレメント）とは異なる概念である（ただし <br/> のようなタグでは、そのタグのみが要素の全てと一致するが）。

しかし、「<br>タグで改行、<p>タグで改段落」などといった初期の粗悪な解説の影響の後に、「正しくはタグではなく要素」という粗悪な解説によって知識を上書きされたためか、現在もなお、混乱したままの解説等が後を絶たない。W3C勧告の HTML4.01 仕様書にはわざわざ、要素はタグではない[5]と明確に否定する文面がある[6]。

  HyperText Markup Language - Wikipedia

 

改めてなんのこっちゃい？
という感じですね。
なので、簡単にまとめてみると

  • タグとしてのルールは、文字「<」で始まり、文字「>」で囲む
  • 終了タグには「/」を入れる
    例）<p>テスト</p>
  • <br/>のように開始タグと終了タグではなく、単体で各タグもある

といった感じです。

 

基本的にはbody要素に書きたい内容を書くため、自然とタグの数も多くなります。

そして、よりきれいにページを作るには、「スタイルシート（CSS）」や「JavaScript」などを利用します。

 

「スタイルシート（CSS）」や「JavaScript」についても、後日記事を書きますので、しばらくお待ちください。

 

まとめ

まとめるとHTMLとは

  • 情報共有の為に作られたマークアップ言語
  • HTMLタグを用いて記述する
  • より綺麗なページを作るにはスタイルシート（CSS）」や「JavaScript」などを利用する

です。

 

最後に

今回の記事はいかがだったでしょうか？
よろしければ読者登録をしていただけると、励みになります(^▽^)/
よろしくお願いします！

 

スポンサーリンク