【HTML】入門 基本的な作り方

HTMLで何ができるか

HTMLを使えば、自分でサイトを作ったり、Web開発を行うことができます

HTMLの文法

タグ

HTMLではタグと呼ばれるものを使い記述していきます

下のHTMLコードの<p>と</p>をタグと呼び、下の例ではpを要素名と呼びます

タグには必ずタグの開始を表す開始タグとタグの終了を表す終了タグがあり
開始タグは<要素名>
終了タグは</要素名>と書きます。

<p></p>

HTMLの基本要素

HTMLを書く上で必要な4つの要素があります。
毎回使うことになる要素なので覚えておきましょう。

  • <html>
    コードのどこからどこまでがHTMLファイルか
  • <head>
    HTMLの設定を記述する
  • <title>
    HTMLのタイトル
  • <body>
    HTMLの本文

基本的なHTMLのコード

以下のサンプルを元にHTMLを書きます。
サンプルに4つの基本要素が含まれていることが確認出来ます。

<!DOCTYPE html><!-- このファイルはHTMLですという宣言 -->
<html>
	<head><!-- 設定を記述する -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>タイトルをここに記述する</title>
	</head>
	<body><!-- 本文を記述する -->
	</body>
</html>

見出しの書き方

見出しは<body>の中に書きます
見出しには<h1>~<h6>まであり、<h1>の方が大きく、<h6>の方が小さいです

<h1>ここに見出しを書く</h1>

段落の書き方

段落は<body>の中に書きます
段落は<p>と書きます

<p>ここに段落を書く</p>

この記事の内容で作れるもの

今回の内容だけで作ることができるサンプルになります。

<!DOCTYPE html><!-- このファイルはHTMLですという宣言 -->
<html>
	<head><!-- 設定を記述する -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>タイトルをここに記述する</title>
	</head>
	<body><!-- 本文を記述する -->
		<h1>HTMLを書くには</h1>
		<h2>4つの基本要素を書く</h2>
		<h3>html</h3>
		<p>どこまでがHTMLコードなのか</p>
		<h3>head</h3>
		<p>HTMLの設定を書く</p>
		<h3>title</h3>	
		<p>HTMLのタイトルを書く</p>
		<h3>body</h3>
		<p>HTMLの本文を書く</p>
		<h2>本文を書く</h2>
		<p>見出しを書く</p>
		<p>段落を書く</p>
	</body>
</html>

以上、【HTML入門】基本的な作り方ご紹介でした。

プログラミングの記事一覧トップへ戻る

Birthday Color iphone icons