0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HTMLの超基本!〜初心忘れるべからず。〜

Posted at

めっきりhamlばかりでフロントを書いておりHTMLで久しく書いていなかったのですが、最近HTMLに触れて復習になったのでここにも書いておこうと思います。

##HTMLとは
HTMLとはウェブページの土台を作るための言語です。表示したい文字や情報をタグで挟むことによりそれを実現していきます。
とまあ簡単に説明しましたがとりあえずはタグではさむことが重要なんだな、くらいで大丈夫だと思います。

###HTMLをブラウザで表示する

<!DOCTYPE html>
<html>
<head>
<title>Qiita</title>
</head>
<body>
<h1>HTMLの超基本!</h1>
<p>HTMLとは</p>
</body>
</html>

最低限のHTMLの基本形を書いたサンプルコードを用意しました。
実際に手を動かした方が分かりやすいのでこれをブラウザで表示してみます。
(※使用ツールはVSCodeです。)
スクリーンショット 2020-07-09 1.08.09.png
まずはサンプルコードを使用ツールにコピペします。
(※ここで注意点としてはファイル名を必ず○○○.htmlの形式で保存してください。今回はtest.htmlとしています。)
スクリーンショット 2020-07-09 1.13.26.png
ブラウザへ行きファイルを開きましょう。
スクリーンショット 2020-07-09 1.13.42.png
ブラウザでHTMLが表示されるかと思います。
スクリーンショット 2020-07-09 1.14.43.png

<p>HTMLとは</p>
↓
<p>HTMLをブラウザに表示してみる</p>

pタグで挟まれた部分を変更してみます。
スクリーンショット 2020-07-09 1.14.58.png
ブラウザに戻りリロードしてみると表示も変わりました。

###HTMLの基本構造

<!DOCTYPE html>

ファイルの先頭のこれは「このファイルはHTMLの文書です」という宣言の役割を果たします。

<head>
<title>Qiita</title>
</head>

headタグの中には「ウェブページの情報」を書きます。
例えば「検索エンジンやブラウザがそのページを理解するための情報」「CSSファイルの読み込み設定」などです。
headタグの中身は基本的にはブラウザ上に表示されません。今まで見てきた通り「Qiita」の文字はブラウザ上には表示されていませんね。

<body>
<h1>HTMLの超基本!</h1>
<p>HTMLとは</p>
</body>

したがってウェブページの画面に表示されるのはbodyタグの中のものだけになります。

###まとめ
headタグの中でウェブページの情報設定をし、bodyタグの中にウェブページの画面に表示したいものを書くというように覚えましょう。
bodyタグで使うタグの種類はたくさんあるのですがそれはまた別の記事にしようと思います。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?