HTMLの書き方とよく使うタグの使い方【基礎文法】
皆さん、こんばんは！皇帝ペンギンです。
この記事では、HTMLの具体的な書き方(基礎文法)とよく使うタグの使い方をご説明します。
この記事で得られる知識。
- HTMLの基礎文法
- HTMLのよく使うタグの使い方
この記事を全て読めば、HTMLをかける土台となる力は備わると思います。
では、記事内容へ入ります。
HTMLの基礎文法
「HTMLって何？？」という方は、まずこちらの記事をお読み下さい。
htmlとは？全くの初心者に向けて専門的な知識を解説。
HTMLはコンテンツをタグで囲むことによって、意味づけします。ラベルを張るようなイメージですね。
例えばよく使うPタグを使ってみます。
<p>これは段落です。</p>Pタグの「p」はparagraphを意味します。1つの文章の塊を意味していて、よく使いますね。なんなら最もよく使います。
囲む二つタグの内、最初のタグを「開始タグ」と呼びます。
反対に、最後のタグを「終了タグ」と呼びます。
そして、開始タグと間のコンテンツと終了タグの全体を「要素」と呼びます。HTMLファイルを構成する要素という意味からです。
また、重要なルールがあるので、それを書きます。
HTMLの重要なルール。
- タグはすべて半角英数字。
- 大文字小文字は区別しないが、慣習的に小文字が使われる。
上記の二つのルールがあります。
「なぜか上手く表示されない。」などがあった場合は、全角文字が入っていないか確認するといいかもですね。
重要なのでもう一度、大文字で書いておきますね。
タグはすべて半角英数字。
大文字小文字は区別しないが、慣習的に小文字が使われる。
終了タグがないタグも存在する。
全てのタグに、開始タグと終了タグがある訳ではありません。囲むものがなく、それ自体で意味を成すタグも存在します。
「空要素」などと呼ばれています。
<img src="gazou.png">例えばこの様に、画像を埋め込むことができるimgタグは、空要素です。
上の例では、imgタグに何か付け加えられているのが分かります。
「src=”gazou.png”」の部分ですね。
これは「属性」と呼びます。
「src」の部分が「属性名」で、
「“gazou.png”」の部分が「属性の値」です。
これにより、要素に情報を持たせることができます。
imgの例では、src属性で画像のある場所を指定しています。それにより、指定した画像がHTMLに埋め込まれます。
※属性の値は、ダブルクォーテーションで囲まれることに注意しましょう。
属性について詳しく解説。
先ほど登場した「属性」ですが、大きく分けて2種類あります。
属性は大きく2種類に分かれる。
- 「グローバル属性」
- 「それ以外の属性」
があります。
グローバル属性は、どんなタグにもつけることができますが、ものによっては効果を発揮しないものも存在します。
<p class="font_red"></p>例えば、グローバル属性は、上記の様な「class属性」があります。
何をしているかと言うと、ただのpタグに名前を付けています。これにより、CSSを使って特定の要素にスタイルを指定できます。
<a href="https://google.com">googleへ</a>また、上記の例では、aタグが使われていますが、aタグはリンク作成することができます。
そのとび先を指定するのが、「href」属性です。読み方は「えいちれふ」です。
このhref属性は、グローバル属性ではないので、「全てのタグに付けること」はできません。
属性にいて詳しく調べるにはMDNのサイトを参照して下さい。
細かい仕様が分からなかった場合など、辞書のように使うことができるサイトです。
MDN Web Docsは、Firefoxというブラウザを開発している、Mozillaの公式ウェブサイトなので、信頼できます。
日本語のページもありますし、いろいろ読んでみると面白いと思うのでおすすめです。
<h1>タグから<h6>タグ
Ｐタグと同じくらい有名なタグをご紹介します。
使われる回数は多くないかもですが、重要なタグです。
<h1>1番目に重要な見出しです。</h1>
<h2>2番目に重要な見出しです。</h2>
<h3>3番目に重要な見出しです。</h3>
<h4>4番目に重要な見出しです。</h4>
<h5>5番目に重要な見出しです。</h5>
<h6>6番目に重要な見出しです。</h6>この様に、重要度に応じた見出しを表すことができます。
h1が重要度が１番高い見出しで、h6が重要度が１番低い見出しです。
当ブログでも、よく使っています。
HTMLの雛形について。
HTMLの具体的な書き方について書いてきましたが、まず最初に書かなきゃいけない一文があります。
これは「HTMLファイルですよ」とまず最初に宣言する為のものです。
これにより、ブラウザ側にHTMLのバージョンを伝える役割があります。
<!DOCTYPE html>これをまず書くことによって、HTMLで書かれた文書であることを明示します。
この宣言方法は、HTMLのバージョンによって異なるのですが、今現在最新のバージョンのHTML5では、この一文を書きます。
今後もしかしたら変わるかもしれませんが、現在のルールでは、この一文を書けばOKです。
※今のところ、変更される予定はないので、変更があるとしても何年も先だと思います。
なのでこの文章を書く、と覚えておけばOKです。
※また、タグではないです。
※慣習で「DOCTYPE」は大文字で書かれます。
htmlタグ
htmlタグによって、全ての要素を囲みます。
<!DOCTYPE html>
<html lang="ja">
</html>この様に、全ての要素を囲む要素が存在していて、HTMLでできたどんなwebページもこの作りで書きます。
headタグ
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
</html>次に、この様に、headタグを書きます。
headタグは、実際にユーザーが見る要素を囲うのではなく、webブラウザ側に何らかの情報を伝える為にかきます。
なのでここに何か書いても、webページには表示されません。
bodyタグ
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>bodyタグは、ユーザーが見える全ての要素を囲みます。
さっきご紹介した、Pタグ、h1タグ、aタグなどがこの中に記述されます。
基本的に入れ子構造で書く。
例えば、「div」というタグがあります。これは特に意味がある訳ではなく、コンテンツを分けるのに使います。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<h1>１番重要な見出しです。</h1>
<p>重要な見出しの下の文章です。</p>
<div>
<h2>二番目に重要な見出しです。</h2>
<p>文章。文章。文章。</p>
</div>
</body>
</html>この様に、divなどを使って、
入れ子構造でHTMLは書かれます。
そして、ひと階層上の要素のことを「親要素」、
さらに、ひと階層下の要素を「子要素」と呼びます。
囲うことができる要素は、各要素によって違うので、迷ったらリファレンス的なサイトを参照しましょう。
先ほどご紹介した、MDNの公式サイトがおすすめです。
字下げ(インデント)するのが一般的です。
HTMLだけに限らず、プログラミングする時は、コードが読みやすいように字下げ(インデント)、改行など、をするのが一般的です。
HTMLは入れ子構造で記述されるので、字下げしたり改行したりすることで、構造が把握しやすくなるメリットがあるので、そのように書かれます。
以上がHTMLの雛形です。
以上がどんなHTMLファイルにも書くべき内容です。
それをもう一度書いておきますね。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>参考にして下さい。
まとめ
以上が、HTMLの書き方と基礎文法でした。
この記事の通りに書けば、簡単なHTMLファイルが作成可能です。
そのファイルをサーバーにアップロードすれば、webページの出来上がりという訳です。面白いですよね。
また、このブログの記事も、HTMLでできています。
では、また！
記事書き終わったので、ラーメン食べに行ってきます。