タグでマークアップしてみよう

目次

さらにテキストを追加し、適切なタグでマークアップしていきます。

タグ

前回はエディタに書いたテキストをブラウザに表示させました。

詳しくはこちらの記事を読んでみてください

あわせて読みたい
【VS Codeの使い方】ブラウザに書いたコードを表示させる方法について 【情報を書いてそれをブラウザで表示させる】 ファイルの編集 前回まででファイルを探して開き,その中にindex.htmlのファイルを作っていく方法について見てきました。 ...

ただ、このままではこのようにテキストがつながって表示されてしまいます。

そこで、意味を指定してあげるにはタグと呼ばれる記号を使っていきます。そうすることによってパソコン側が見出しや文章を判別できるようになります。

マークアップ

一番重要な見出しは heading の 1 番目という意味で h1 というタグを使うのですが、タグは <> (不等号記号)で囲ってあげてください。

閉じるほうのタグには、このように / (スラッシュ)を付けてあげます。<h1>Teatree Web</h1>というように書いてあげるといいでしょう。

最初のタグを開始タグ、最後のタグを終了タグ、そしてテキストをタグで意味付けしていくことをマークアップする、というので用語として覚えておいてください。

このようにすることでブラウザがそれぞれの意味を解釈して、それっぽいスタイルをあててくれます。

ただ、応用的なスタイリングはCSSの方でやっていくのでHTMLでは意味付けをするのが目的と考えていきましょう。

打ち間違えたときの挙動

タグを打ち間違えたときの挙動も見ておきましょう。

タグを打ち間違えると表示がおかしくなるのでどこで間違えたかはわかりやすいです。

ただ、タグを打ち間違えてもこのように表示が崩れるだけで、それでブラウザやコンピュータが壊れるということはありません。落ち着いて間違いを直すようにしてください。

以上


表示

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次