いまさら聞けない!HTML入門レベルのルールをやさしく確認

目安時間:約 13分

本を読んでいる子供がこちらを見ている写真どうも、つるです。

 

さて、この記事はワードプレスでよく使うHTMLをまとめたものです。

 

これでもか!っていうくらいにやさしく解説しました。

 

ワードプレスのHTMLで困ったときは、作業しながら、この記事を参考にするとと良いでしょう。

 

 

 

 

 

HTMLの基本ルール

HTMLには基本的なルールが存在します。

主に9つです。

さらに、重要度別に3段階に分けてみました。

最初ほど重要です。

 

 

 

 

 

 

初級編

基本的なルールです。

ここの知識だけはしっかり押さえる必要があります。

 

 

 

 

 

 

1:基本的に、<タグ>対象</タグ>で書く

 

 

 

例)<h1>見出し1</h1>

 

※h1タグは、見出し1の効果があるタグです。

見出し○←ここの数字が小さいほど

(意味も大きさも)大きい見出しになります。

 

 

 

この例は、h1タグを使っている例です。

始まりの部分を<h1>で指定、

終わりの部分を</h1>で指定してます。

 

 

 

中にはさんである文字の部分には、

h1タグの効果の対象となる文字列が入ります。

 

 

 

 

 

2:タグには、追加情報を与えられる

htmlの説明の画像

▲上記は「リンクにしたい文字列」にsample.htmlのページへのリンクを設定している。

 

※aタグは、何か情報を持たせたい時にとりあえず付けちゃうタグです。

 

 

 

タグの各部分の名称はあんまり覚えなくていいです。

 

 

 

上記画像の「要素名」に

「属性名」と「属性値」をプラスすると、

情報を追加できるということだけ覚えておいてください。

 

 

 

上記画像の場合、

「リンクにしたい文字列」に

「sample.htmlへリンクするよー」っていう

意味を持った「aタグ」を付けています。

 

 

 

 

 

3:タグでタグを挟める(タグを入れられる)

 

 

 

例)

<ul>

<li>文字だよ</li>

<li>文字だぜ</li>

<li>文字だぁ</li>

</ul>

 

※ulタグは、囲った中身のものが何かのリストであることを表します。

※liタグは、リストの要素であることを表します。

ulタグとセットで使います。

olタグともセットで使えますが、それはまた別の機会で。

 

 

 

「例」を見てわかる通り、

<ul>の中に<li>が入っていますね。

このように、タグをタグで囲むことが可能です。

 

 

 

ただし、つぎのような形はルール違反です。

悪い例)

<ul><li></ul></li>

これは、お互いのタグがお互いのタグをまたいでいる状態です。

これではいけません。

本来は「外側のタグ」で「内側のタグ」を囲む形が正しいです。

箱にモノをしまうイメージが正しいです。

 

 

 

 

 

中級編

ここからは応用が効くルールの知識です。

初級編のルールを押さえたら、

その次に覚えましょう。

 

 

 

 

 

4:タグ(要素)には個別に名前を付けられる

 

 

 

例)

<div class="大事なとこだよ">文字列</div>

 

※divタグも、aタグと同じで、何か情報を持たせたい時にとりあえず付けちゃうタグです。

 

 

 

上の例では、divタグに

「大事なとこだよ」という名前を付けています。

 

 

 

名付けるために、

classという情報(属性)を付けています。

また、idという情報(属性)を

同じ形で付けても名づけられます。

 

※classとidの使い分けは5番のルール紹介で。

 

 

 

 

 

5:同じ名前のidは2つ以上存在してはならない

idという情報(属性)を使って名付けた場合、

同じ名前は2つと存在してはいけません。

idで付けた名前は唯一無二です。

 

 

 

対して、classは

同じ名前のものが複数あってもOKです。

「あれとこれとそれは同じ名前にしよう」って時に

便利です。

 

※この便利さは、

HTMLを色鮮やかに飾りたいときに感じることができます。

が、HTMLが上手く扱えないうちは無縁です。私はそうでした(笑

 

 

 

 

 

上級編

この辺は、

たしかに基本ルールといえば基本ルールですが、

活用できるようになるのはHTMLに

そうとう慣れてきてからでしょう。

 

 

 

中には、ワードプレスで記事を書く場合は

覚えなくてもいいこともあります。

理解しなくてもいいので、

一応サラッと見ておいてください。

 

 

 

 

 

6:必ずドキュメント宣言を付ける

ドキュメント宣言とは、こんなやつです。

 

 

 

<!DOCTYPE html>

 

 

 

もうわけわからん

呪文のように見えるかもしれません。

でも、HTMLにはこの呪文が必ずいるのです。

まぁ、ワードプレスで記事を書くのなら無縁でしょう。

 

 

 

 

 

7:<html></html>で囲む

文字通りの意味です。

ドキュメント宣言の次の部分から、

<html></html>で囲みましょう。

これもワードプレスで記事を書くなら無縁です。

 

 

 

 

 

8:head要素をbody要素の前に付ける

これも文字通りの意味です。

ワードプレスで記事を書くなら(以下略

 

 

 

 

 

9:本文は<body> </body>で囲む。

本文とは、ブラウザに表示させる部分です。

ワードプレスで(以下略

 

 

 

 

なお、ここまでの知識をまとめると、

HTML全体はこんな感じになります。

 

 

 

<!DOCTYPE html>

<html>

<head>

head要素の情報をここに書き込む

</head>

<body>

ブラウザに表示させる内容(本文、ようは記事)をここに書き込む

</body>

<html>

 

 

 

おそらく、今回の記事を読む前では

呪文に見えていたHTMLが、

各要素がしっかりルールに従って

書かれていることに気づけるはずです。

 

 

 

…まぁ、ワードプレスを使って記事を書いていれば、

ここまでのHTML知識はいらないでしょう。

が、基本ルールを知っておく分には

損はないので、頭の片隅に置いておきましょう。

 

 

 

 

まとめ

まとめです。

 

 

 

HTMLの基本ルール(初級編~中級編)

    1. 基本的に、<タグ>対象</タグ>で書く
    2. タグには、追加情報を与えられる
    3. タグでタグを挟める(タグを入れられる)
    4. タグ(要素)には個別に名前を付けられる
    5. 同じ名前のidは2つ以上存在してはならない

 

 

 

正直、最後にやった上級編の知識は

目を通すだけでOKです。

ワードプレスを使ってたら、あまり使いません。

ワードプレス側で勝手にやってくれるので。

 

 

 

ただし、初級編の知識はとっても大事です。

基礎中の基礎たる知識なので、

7回くらい読み返して覚えてください。

 

 

 

今回紹介したルールを覚えれば、

あとは必要になったときごとに、

HTMLのタグを調べるだけで、

あなたはHTMLを使えるようになります。

 

 

 

ぜひ、覚えておいてくださいね。

カテゴリ:HTML  [コメント:0]

この記事に関連する記事一覧

コメントフォーム

名前

メールアドレス

URL

コメント

トラックバックURL: 

著者プロフィール

つるがスーツ着ているコラージュ画像つる(学生アフィリエイター)

高校生の時、月3000円のお小遣いに物足りなさを感じつつも、

バイトをしたくないという思いもあり、悩んでいたある日、
初期費用が少額で済むアフィリエイトというネットビジネスを知る。

 

すぐにWEBサイトをあちこち漁り始めるが、
ネットだけではぼんやりとした手順しかわからず、
具体的な手順をつかめずに半年ほど停滞の時期を経験する。

 

その後、情報商材やいろんな人のレポートなどで
必死に勉強をし、ついにブログ運営を開始。

 

ブログ運営開始後約4ヶ月で検索順位1位や

ブログランキング学生起業カテゴリ1位という実績をたたき出す。

 

その後、自身のブログ運営の仕方を研究し、
正しいブログの運営方法を突き止める。

 

今では、過去の自分と同じように

「バイトは避けたいがお金は稼ぎたい」と考える学生向けに、

自身のWEBサイトで”ブログで稼ぐための情報”を発信している。

 

また、情報発信の活動の一環として

基本的マインドセットが完了する入門的なプレゼントを無料で配布している。

 

詳細は上記ページ↑にて。

 

著者のTwitterはコチラ→

管理人プロフィール

つるがスーツ着ているコラージュ画像

※画像はイメージです。

管理人:学生アフィリエイター つる

 


バリバリ現役の専門学校生(2020年卒業予定)。

月3000円の小遣いに危機感を感じ、バイトを避ける手段として10代にしてブログビジネスに挑む。

知識ゼロ、技術ゼロ、人脈ゼロ、PC1台、軍資金は貯めてたお年玉5万円という、とてもビジネスを始めるとは思えない環境から、最低0円から始められるという「ブログビジネス」の世界に飛び込む。

ゲームやイラスト、カラオケが趣味の19才。20歳になってしまいました。

情報処理・Web(HTML,CSS)・ブログアフィリエイトビジネスの知識に精通。それに関連する資格を3つ持っている。

 

詳しいプロフィールや実績はこちら

2022年5月
« 11月    
1234567
891011121314
15161718192021
22232425262728
293031  
最近の投稿
カテゴリー
初心者ならば、必ず見ておきたい記事

『オススメ記事5選』というタグにまとめています。

また、”ブログで稼ぐ方法”自体を知りたいという方は『コチラ』からどうぞ。

質問とか意見とかはコチラ

ポストの画像

以下のメールアドレスにメールください。もれなく読みます。

tsurucontact@gmail.com

・当サイト専用のメールアドレスです。
・届いたメール全てに目を通しています。
・返信は約束できません。

サイト内を検索
【つる愛用】失敗しないサーバー選びのために。



▲エックスサーバー(公式HPに飛びます。)

 

ブログ運営はサーバーとドメインを買うところから始まります。どこのサーバーがいいか迷った時には、よかったら参考にして下さい。

つる愛用!「エックスサーバー」についての記事はコチラ
『エックスサーバーの紹介記事』

ダウンロードはコチラ

ページの先頭へ