HTML&CSS入門「タグを理解して文字を表示してみよう」

スポンサーリンク
Pocket
LINEで送る

htmlを使って文字を表示してみよう

htmlを使って文字を表示させます。今回は「html レッスンです。」を表示させます。htmlファイルに以下を書き込みブラウザで開いてみてください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8″></meta>
    <title>html lessen</title>
  </head>
  <body>
    <p>html レッスンです。</p>
  </body>
</html>

Screenshot from 2016-08-12 05-23-43

このように表示されれば成功です。

htmlには基本となる構造があります。

<DOCTYPE>タグ

<html>タグ

<head>タグ

<body>タグ

この四つが基本のタグで、タグにはタグ名によってさまざまな意味があります。

基本的な使い方は<タグ></タグ>で囲うだけでとてもシンプルです。タグには色々あるのではじめは覚えることがたくさんありますが、慣れるとめちゃくちゃ簡単です。

 

<!DOCTYPE html>はドキュメント宣言です。

スポンサーリンク

htmlには最新のhtml5からxhtmlなどバージョンがあり、使えるタグが変わってきます。DOCTYPEはブラウザにどのhtmlバージョンなのかを教えてあげるためのタグです。最新はhtml5なので上記の書き方でOKです。

<head>は文書のヘッダ情報を宣言します。

<head></head>で挟まれたものがヘッダ情報として認識されます。例では日本語文字を表示するために文字コードutf-8を宣言しています。

<body>タグは実際に目に見える形で表示されるものです。Webサイトで表示させたいものは<body></body>で囲む必要があります。

例では文字を表示させたいので

<body>タグの中に<p>html レッスンです。</p>を入れます。

とりあえず、これで文字表示は完了です。

htmlを書く注意として必ず親要素と子要素の階層の違いがわかるようにインデントまたはスペースを入れましょう。

インデントつけることは重要で簡単な構造のサイトであればなくても何とかソースを理解できますが、何行にもなるhtmlにインデントがないとどれがどの子要素となるのか理解できなくなり、何らかの修正があった場合に大変になります。インデントは綺麗につける癖をつけましょう。

他にも自分でタグで囲んで文字を表示してみて遊んでみてください。