HTMLの構造についての説明

3910GO-ブログカスタマイズ

HTMLの構造

HTMLと聞くとすごく難しそうと思う人の方が多いかもしれませんが、実は、要点だけ抑えていれば、それほど難しいというものでもありません。その要点として挙げられるものの一つとして構造があると思います。とりあえずは、簡単な例文を用いて構造を理解してもらおうと思います。

まずはこちらの例文をご覧下さい。

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>ページのタイトル</title>
<link rel="stylesheet" href="外部スタイルシートのURL.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="RSSのURL.xml" />

</head>

<body>

ここが実際に視覚的に出力される記述

</body>

</html>

この例文は、某ブログサービスのHTMLソースを簡素化したものです。(※正確にはXHTMLです。)これをもっと簡素化するとこうなります。

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

head内の記述

</head>

<body>

ここが実際に視覚的に出力される記述

</body>

</html>

ここまで簡素化すれば、HTMLの構造は一目瞭然だと思いますが、簡単に説明させて頂くと、HTMLの構造の大分類は、『<html>より前の記述(宣言とか) + <html>~</html>』で構成されていることがわかると思います。それに加え、<html>~</html>内の構成として、『<head>~</head> + <body>~</body>』が存在していることがわかると思います。

これが大まかなHTMLの構成になっています。

とまぁ構成については、説明すればするほどよくわからなくなってしまうと思いますので、このくらいの説明にしておきます。

では、なぜここでHTMLの構成について私が説明したかというと、一番伝えたかった部分は、ブログをカスタマイズするにあたり、『どこをカスタマイズすれば良いのか?』ということを理解して頂きたかったからです。

非常に回りくどくなってしまいましたが、ブログをカスタマイズするにあたり、HTMLの記述をカスタマイズする部分は、『ここが実際に視覚的に出力される記述』と書いた<body>~</body>の間の部分だけでよいのです。

その他の<head>~</head>や宣言などの記述は、もう少しHTMLの知識が付いてから自分で行ってもらうとして、ここでは、ブログのHTMLをカスタマイズする時は、<body>~</body>の間をカスタマイズするということだけは、しっかりと覚えておいて下さい。



ソーシャルボタン


ここは■002:HTMLの構造




カテゴリ

HTMLリファレンス




Copyright (C) 2008-2015 3910GO. All rights reserved.