HTMLの基礎~タグ、属性、要素~HTML入門~HTML TUTORIAL~

スポンサーリンク

本当にわからないとこがあった場合一人では解決できません。
『teratail』とはエンジニア特化型のQ&Aサイトです。 すべてのエンジニアさんが抱えている悩みを共有して 解決するための質問サイトです
無料なのでまずは登録して使ってみてください。メールアドレスだけで登録可能です ----------------------------------------------------------------------------------------

HTMLの基本はプレーンテキストですが、素敵なHTML文書にするにはもう少し要素が必要です。



 

タグ

HTML文書の基本的な構造には、コンテンツを囲み、意味を適用するタグが含まれています。ドキュメントを次のように変更します。
先ほどの内容を少し書き換えてみましょうか。

<!DOCTYPE html> //ここの部分が最初でhtmlですよと
<html> //<HTMLはここからですよ>
<body> //body 中身ですね
    This is my first web page
</body> // このスラッシュ</>は終わりをあらわします
</html> // てことはhtmlの終わりを表すよということです

おっと上は説明文をいれてたので、下のように入力してください

<!DOCTYPE html>
<html>
<body>
    This is my first web page
</body>
</html>       //ちなみにこんな感じ

ドキュメントをもう一度保存し、Webブラウザに戻り、ページをリロードします。:ちなみにこんな感じ:は打たなくていいですよ 笑

ページの外観はまったく変更されませんが、HTMLの目的はプレゼンテーションではなく意味を適用することです。この例では、Webページの基本要素をいくつか定義しました。

上部の最初の行は、ドキュメントタイプの宣言で、使用しているHTMLのフレーバ(この場合はHTML5)をブラウザに知らせることができます。これを守ることは非常に重要です。

<body>
This is my first web page
</body
>の部分に色々な要素を書いていきます



詳解説明

<!DOCTYPE html> これはまずブラウザにhtmlですよと宣言しますということです

<html> これはhtmlを書いてますよということを伝えている
<body>この文章のbody つまりここに文章やコンテンツを書いていく。

</body>これは<body>の終了をあらわす>

</html>   <html>の終わりをあらわす

つまり<body></body> <html></html>は常にワンセットなんですね。これをおぼえながらこれから書いていくコードを確認していってください。

これから要素と呼ばれるものを数多く習いますが、別に使わなくても、文章HTMLはかけますが、今後あなたがウェブサイトを作る場合これらのルールをしっかり守ることが重要です。

WHY?

それはウェブサイトはこれらのHTMLのルールをしっかり守らないとウェブサイトであなたのサイトがアップロードされることを禁止したり、ページランクを不当に低くすることがあるわけです。例えばグーグルであなたのサイトを調べるとき、めちゃくちゃなルールや構文だとグーグルは「なんだこれ?」と不信感をもち、サイトランクをかなり下げます。つまりググっても52ページ目みたいになるわけです。

そんなサイト誰もみないですよね。これが実益です!!



タグの終わり

これらはタグの終わりを示します。

</body>
</html>

基本的にはこのように進めていきます。

すべて</>で終わるわけでない、たとえば単独で使用するものもある。例えば、改行タグは次のようになります:<br>これ単体で終了します

属性

HTMLの要素には、属性というもの付ける事ができます。
この属性とういのは、その要素の何かしらの設定をつけるようなもです。たとえば

<html lang="ja">

は「html内言語日本語です。」という設定になります。

要素

タグは要素の先頭と末尾に印を付ける以上のことはしません。要素はウェブページを構成するビットです。たとえば、<body>andと</body>タグの間にある(そしてそれを含む)すべてがbody要素であると言います。別の例として、「<title>」および「</title>」はタグであるが、「<title>Rumple Stiltskin</title>」はタイトル要素である

<!DOCTYPE html>
<html>
<body>
    This is my first web page 要素ですよ
</body>
</html>

では次にいきましょう!

前のページ HTMLの基礎

次のページ ページタイトルと段落

スポンサーリンク

プログラミングは独学からは挫折の可能性が高いです。まずは無料体験ができる
コードキャンプが本当におすすめ。無料体験でわからないところを聞きましょう。
転職補助つき。カリキュラム終了後に転職紹介をしてくれます。