HTML/CSS

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

2020年12月13日

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

 

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

 

今回はHTMLのタグの書き方を紹介します。

 

【この記事でわかること】

HTMLのタグの書き方

 

【この記事の信頼性】

この記事を書いている僕は現役のWEBエンジニアです。

普段からHTMLとCSSを使ってWEBページを制作しています。

 

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

 

HTMLのタグの書き方を解説

 

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

 

【この章でわかること】

HTMLのタグの書き方

 

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

 

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

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

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

 

index.html

<>はじめまして</>

 

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

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

 

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

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

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

 

タグに意味を付けていく

 

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

 

index.html

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

 

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

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

 

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

 

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

pはparagraphの略です。

 

index.html

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

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

 

 

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

 

index.html

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

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

 

 

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

 

index.html

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

          気ですね</p>

 

 

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

 

index.html

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

 

 

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

index.html

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

 
空白をもちいたhtmlファイル

よく使うタグと意味

 

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

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

 

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

 

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

 

今回はここまでです。

 

HTMLのタグの書き方にはルールがある

・いろんなタグごとで表記できるものが変わってくる

 

HTMLとCSSの教材をまだ準備していない方は準備しましょう。

>>HTMLとCSSのオススメ教材を紹介【失敗しない】

 

学習ステップの全体はコチラ

>>HTMLとCSSの学習ステップ一覧

 

僕も通ったHTMLとCSSを学ぶことができるスクールはコチラ

>>HTML/CSSを習得できるプログラミングスクールランキング

 

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

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

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

続きを見る

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

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

続きを見る

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

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

続きを見る

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

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   エンジニアを目指すにあたってまず最初に自社開発企業への転職を希望する方がほとんどです。 ...

続きを見る

プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】と書かれた画像
プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】

  あなたプログラミングスクールに通いたいけどどのスクールも何十万もして通えません。コスパよくエンジニアになれるスクールはありますか?   今回はコスパが良いどころか完全に無料でプ ...

続きを見る

-HTML/CSS

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