今回はHTMLのタグの書き方を紹介します。
【この記事でわかること】
✔ HTMLのタグの書き方
【この記事の信頼性】
この記事を書いている僕は現役のWEBエンジニアです。
普段からHTMLとCSSを使ってWEBページを制作しています。
ではさっそく見ていきましょう。
HTMLのタグの書き方を解説
ここではHTMLのタグの書き方をそれぞれの意味を解説しながら紹介していきます。
【この章でわかること】
HTMLのタグの書き方
開始タグと終了タグを書く
新しくindex.htmlを作成します。
エディタの使い方やファイルの作成方法がわからない方はこちらを最初から見ていってください。
index.html
<>はじめまして</>
「<>」が開始タグで「</>」が終了タグです。
このタグを目的によって使い分けることでうまく表示させることができます。
注意点は以下のとおりです。
・htmlで有効なのは半角のみ
・ソースコードの改行は反映されない
タグに意味を付けていく
さきほどのindex.htmlのタグに意味を付けていきましょう。
index.html
<h1>はじめまして</h1>
「h1」はheader1の略で一番大きい見出しを意味します。
作ったファイルをダブルクリックして表示させてみましょう。
次にpタグを使った文章を入れてみます。
pはparagraphの略です。
index.html
<h1>はじめまして</h1>
<P>いい天気ですね</p>
ここで<h1>の行と<p>の行の間に空白の行を入れても見た目はかわりません。
index.html
<h1>はじめまして</h1>
<P>いい天気ですね</p>
文の途中で改行しても見た目は変わりません。
index.html
改行したいときは<br>を入れます。
index.html
ちなみに空白はしっかり反映されるので覚えておきましょう。
index.html
よく使うタグと意味
よく使うタグとその意味をまとめてみました。
上記と同じ手順で色々試してみてください。
| <br> | 改行 |
| <p> | 段落 |
| <ul> | 番号なしリスト |
| <li> | リスト項目 |
| <dt> | 定義語 |
| <dd> | 定義内容 |
| <table> | テーブル |
| <tr> | 表の行 |
| <td> | 表のデータ要素 |
| <a> | アンカー要素 |
| <form> | ファーム |
| <input> | 入力エリア |
| <select> | 選択メニュー |
| <option> | select内での選択メニュー |
それぞれのタグを使った表記方法は今後の学習の中でも紹介していきます。
今回はここまでです。
・HTMLのタグの書き方にはルールがある
・いろんなタグごとで表記できるものが変わってくる
HTMLとCSSの教材をまだ準備していない方は準備しましょう。
学習ステップの全体はコチラ
僕も通ったHTMLとCSSを学ぶことができるスクールはコチラ
>>HTML/CSSを習得できるプログラミングスクールランキング
