HTML/CSS

HTMLのタグの書き方【だれでもわかるように解説】

2020年12月13日

HTMLのタグの書き方【だれでもわかるように解説】と書かれた画像

 

あなた
HTMLのタグってどのようにかけばいいですか?

 

前回はHTMLを要素として見る方法を学びました。

前回:HTMLの要素を理解しよう

 

今回は上記のような疑問に答えるべく、HTMLのタグの書き方を紹介します。

 

※補足

この記事は連載の1つです。

以下の学習ステップを歩んできていることを想定しています。

>>【完全無料】HTMLとCSSの学習ステップ一覧

 

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

ではさっそく見ていきましょう。

 

HTMLのタグの書き方を解説

 

ここではHTMLのタグの書き方を、それぞれの意味を解説しながら紹介していきます。

 

開始タグと終了タグを書く

 

新しくindex.htmlを作成します。

※エディタの使い方やファイルの作成方法がわからない方はこちらを最初から見ていってください。

>>HTMLとCSSの学習ステップ一覧はコチラ

 

<>はじめまして</>

 

「<>」が開始タグで「</>」が終了タグです。

このタグを目的によって使い分けることでうまく表示させることができます。

 

注意点は以下のとおりです。

・htmlで有効なのは半角のみ

・ソースコードの改行は反映されない

 

タグに意味を付けていく

 

さきほどのindex.htmlのタグに意味を付けていきましょう。

 

<h1>はじめまして</h1>

 

「h1」はheader1の略で一番大きい見出しを意味します。

作ったファイルをダブルクリックして表示させてみましょう。

 

h1のみで書かれたhtmlファイル

 

次にpタグを使った文章を入れてみます。

pはparagraph(段落)の略です。

 

<h1>はじめまして</h1>
<P>いい天気ですね</p>

 

ここで<h1>の行と<p>の行の間に空白の行を入れても見た目はかわりません。

 

<h1>はじめまして</h1>







<P>いい天気ですね</p>

 

文の途中で改行しても見た目は変わりません。

 

<h1>はじめまして</h1>
<P>いい天


          気ですね</p>

 

改行したいときは<br>を入れます。

 

<h1>はじめまして</h1>
<P>いい天<br>気ですね</p>

 

ちなみに空白はしっかり反映されるので覚えておきましょう。

 

<h1>はじめまして</h1>
<P>   いい天<br>  気ですね</p>
空白をもちいたhtmlファイル

よく使うタグと意味

 

よく使うタグとその意味をまとめてみました。

上記と同じ手順で色々試してみてください。

 

<br>改行
<p>段落
<ul>番号なしリスト
<li>リスト項目
<dt>定義語
<dd>定義内容
<table>テーブル
<tr>表の行
<td>表のデータ要素
<a>アンカー要素
<form>ファーム
<input>入力エリア
<select>選択メニュー
<option>select内での選択メニュー

 

それぞれのタグを使った表記方法は今後の学習の中でも紹介していきます。

今回はここまでです。

 

次回はHTMLで表示するための決り文句のタグについて紹介していきます。

>>次の回:HTMLで表示するための決まり文句のタグの意味を理解しよう

 

\ HTMLとCSSについて最初から学びたい方はこちら /

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

\ Web制作の副業で今すぐ稼ぎたい方はこちら /

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

 

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-HTML/CSS

© 2024 エンジニアてんし君ブログ