自己紹介
こんにちは、私はプログラミングを勉強し始めたばかりです。
先日HTML勉強した時にHTMLのタグに意味がある事を知りました。
以前見様見真似で書いた時に適当にタグをつけて書いてしまっていたので勉強も兼ねて今回はタグに意味について書こうと思います！
はじめに
HTMLのコードを描く前に設定する決まり事がいくつかあります。
見ていきましょう！
Hello.HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
</body>
</html>
DOCTYPE宣言
1.DOCTYPE宣言
<!DOCTYPE html>はDOCTYPE宣言といい性質は
・ 書く文書がHTMLであることを宣言する。
・ HTMLのバージョンを明記する。
・ DTD（文章の構成要素）がなにか明記すること。
の３つが目的です。ブラウザは宣言の内容に従って、文書を表示します。
2.言語の指定
-
<html lang="ja">の""（ダブルクォーテーション）の中で表示する言語を設定します。 - “ja”で日本語のWebページになります。
3.headとbody
- headタグとbodyタグはhtmlタグの直下で1度だけ使用するHTMLタグです。
-
<head>にはtitleなどの文章情報要素が入ります. -
<body>には文章を構成する要素が入ります。
4.ページのタイトル
-
<title>タイトル</title>と入力します。 - ページを開いた時にタブに表示される部分です。
- どのページにも必ずタイトルがあります。検索する際のデータにもなるで必ずきちんとつけましょう。
タグの基礎
そもそも何故タグを変えるのか
- 人間は文字の太さや大きさで見出しと判断できますが機械はできないので見出しの場所を教えてあげる必要があります。
- そのためにそれぞれ役割を持ったタグを入力します。
- 今回はよく使うタグを数個ご紹介します！
Webページの構築によく使われているタグ
1.<p></p>
- pタグはよく使われるタグです。
- ひとつの文書のかたまり・段落で使用されます。
2.<b></b>
- bタグは文章内で強調したい部分等に使用されるタグです。
- 挟まれた文字は太字になります。
3.<strong></strong>
- 文章内でさらに強調したい部分、重要な部分に使われます。
- strongタグで挟まれた文章内に、さらにstrongタグで囲むことで強調の段階をつけることができます。
リスト関連タグ
1.<ul></ul>
- ul要素は配置する文章のリストに、番号などの情報を持たせない場合に使用します。
2.<ol></ol>
- ol要素配置する文章のリストに、番号の情報を持たせる場合に使用します。
3.<li></li>
- 1つのリストの要素を意味するタグで、必ずulリストかolのリストのタグに囲まれます。
リンクタグ
1.<a></a>
- a要素はWebページ内で別のページをリンクさせる時などに使用します。
- aタグの中の
href=""でURLを指定します。 - また、
target=""でリンク先の開き方を指定することができます。 -
_self:現在のウィンドウに表示 -
_new:新規ウィンドウ（1つ）に表示 -
_blank:新規ウィンドウ（複数）に表示などがあります。
2.<img>
- img要素は画像を配置するタグで、終了タグを必要としないタグです。
-
src=""で画像のあるURLを入力します。 -
widthやheightで画像サイズの指定もできます。
まとめ
今回紹介したタグ以外にもいろいろなタグがたくさんあります。
是非タグをもっと詳しく調べて上、使い分けてよりよくコードを書きましょう！
最後まで読んでいただき有り難う御座います
参考リンク