HTMLの基礎を初心者にわかりやすく解説
どうも、ヤッシーです。
今回はHTMLの基本的な形を大雑把に解説していきます。
超初心者向けです。
よく知ってる人がよく読むと「ん？」ってなるかもしれないです。
なぜならほぼ嘘を書いているから。。。
嘘です。要所要所を端折って大切な部分だけを伝えます。
例えば、3×3を「3を3回足して、、、」って計算する人、小学生だけですよね。
普通の人は3×3は9って暗記してます。それと同じで、基本の仕組みじゃなくて、
それがどのような効果を持つか。だけを説明していきます。
HTMLの前提
まず、htmlはマークアップ言語という言語で、厳密にはプログラミング言語とは違うんですが、初心者に「これはマークアップ言語で、これはプログラミング言語で、、、」なんて説明してもよくわからないと思うんで同じようなもんだと思っていいです。
htmlはサイトを書いたりするために使う言語です。書き方としては基本的にタグ（要素）ってのを使います。タグは何を指定するか決めるやつで、ゲームでいうアビリティとか、魔法みたいなもんです。 [魔法<h1>：<h1>で囲まれた文字を大きく表示する]こんな認識でok。
タグは<h1></h1>と最後に/をつけたタグで囲うことで定義できます。例外もありますが基礎の話なんで気にしなくてもいいです。
Htmlのファイルの作り方は、ティストファイルを作って拡張子を.htmlにするだけ
実行方法はhtmlファイルをダブルクリックするだけです。
とりあえずhtmlの雛形（形）を記入していきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>これが基本の形です。
Htmlに限らずプログラム系統は、タグ（もしくは関数）の中に
タグ（もしくは関数）を入れたいときは、インデントして入れることでそのタグの中にタグを入れることができます。（例外もある）
そしてこれもhtmlに限らず、プログラムなどは上から指示されていきます。
<!DOCTYPE html>でhtmlを定義して、<html></html>で囲ったところがhtmlの記入内容になります。
ここからは各タグを大まかに分けて説明していきます。
headタグ
Headタグは名前の通り、サイトの頭の部分です。サイトのタイトルや説明、サイトの情報を決めることができます。
定義方法は<head></head>です。
headタグの中に記入する基本的なタグを紹介していきます。
metaタグ
このタグは文書（htmlの中身）の情報を指定します。
一般的にはutf-8を指定すれば問題ないです。定義方法は少し特殊で、タグの中にcharset属性というものを使って、定義します。
<meta charset="utf-8">これでokです
titleタグ
このタグは一番大切で、理由は検索結果に表示されるからです。
この記事なら、「HTMLの基礎を初心者にわかりやすく解説」です。
定義の仕方は<title>あいうえお</title>です。
これでheadタグの基礎は終わりです。次はbodyタグになります。
bodyタグ
bodyタグは名前の通り、サイトの体部分、本体です。
見出しやサイトの内容などを書くところになります。
定義方法は<body></body>です。
bodyタグの中に記入する基本的なタグを紹介していきます。
h1タグ
このタグは、サイトの見出しなどに使われるタグです。
h1以外にも大きさがあり、上の「bodyタグ」と書かれてるのがh2タグで、
上の「h1タグ」と書かれているのはh3タグです。
定義の仕方は<h1>あいうえお</h1>です。
pタグ
これは一番使うタグで、文章の段落を指定するタグです。
例えば
「今回はpタグを紹介していきます。」
「文章の段落を指定するタグです。」
この2つの文は段落が違いますよね？
pタグで表すと
<p>今回はpタグを紹介していきます。</p>
<p>文章の段落を指定するタグです。</p>こんな感じです。1つの文章を書くときに多用するタグで、
話を変えたりするときは新しくpタグを使って段落を変えることができます。
定義の仕方は<p>あいうえお</p>です。
これでhtmlの基礎がわかったでしょうか？
他にもいろんなタグがあるのます。今後もよく使うタグを
わかりやすく解説していきたいと思うので、フォローも是非お願いします。
ここまで読んでいただきありがとうございました。
この記事が気に入ったらサポートをしてみませんか？