にせもんのホンモノ

普通の人"にせもん"による雑記ブログ

素敵なWebデザインへの第一歩!HTMLの基本的な役割を知ろう|にせもんのホンモノ

f:id:nisemon_honmono:20190716234004p:plain

HTMLの基本的な役割を知ろう

Webページを作成するのに重要な「HTML」

テキストや画像をタグづけすることにより、その意味を明確にさせて人間にもコンピュータにも理解できるドキュメントの構造を作るのがHTMLの役割です。

普段何気なく利用している段落や装飾もHTMLによって構成されているため、役割をキチンと理解して分かりやすいWebページを目指しましょう。

 

HTMLの一般的な書式を理解する

記事を書く中で”段落や装飾がおかしいな”と思ったことはありませんか?
もしかするとHTMLタグが原因かもしれません。

ここでは、一般的に用いられる基礎的なHTMLタグを改めて理解し、記事全体をよりまとめやすくすることを目的としました。タグの適用範囲や効果的な手法など日頃の疑問が解決できれば幸いです。

 

見出し・段落・改行

見出しや段落タグは文章を書く基本。

慣れてくるとスラスラと文章が書け、文字数も増えてくると思います。 

タグ 意味 使用例
< h1 >~< h6 > 見出し < h3 >見出し(大見出し)< /h3 >
< p > 段落 < p >この文章で一行です< /p >
< /br > 改行 キリがいいので< /br >改行します

けど少し待ってください!

アナタの記事は読みやすく整理されていますか?文章を分かりやすくするために見出しや改行を効果的に活用しましょう。

 

見出しによる効果

見出しを活用することで文章が区分されて読みやすくなります。さらに見出しはキーワード検索するときに有効となるので積極的に活用することをオススメします。

 

文字サイズ・文字の装飾

文字サイズや文字の装飾は文章にメリハリをつける必須。

長い文章がだらだら続くと飽きてきますよね。大事なところ強調も必要です。 

タグ 意味 使用例
font-size 文字の大きさ < span style ="font-size: 200%;">文字のサイズを大きく< /span >
< strong > 文字を強調 < strong >太字にする< /strong >
< em > 斜め文字 < em >斜め文字にする< /em >
< u >または
underline
アンダーライン < u >文字の下に線を引く< /u >
< span style ="text-decoration: underline;">文字の下に線を引く< /span >
< s >または
line-through
取り消し線 < s >取り消し線を引く< /s >
< span style ="text-decoration: line-through;">取り消し線を引く< /span >

 

まとめ

今回は一般的に用いられる基礎的なHTMLタグを紹介しましたが、HTMLは起点と終点があることをしっかり覚えておきましょう。プレビューで文章や装飾がおかしいと思ったときは始点(または終点)位置がズレている可能性が高いです。

Webサイトやブログを沢山読んで、良いところがあれば真似してみるのもアリかもしれません。HTMLタグを使いこなして読みやすい文章を作成しましょう!

 

最後まで読んでいただき、
ありがとうございます! 

===========================
ブログランキングに参加中です!

励みになりますのでポチッとしてください!
===========================

にほんブログ村 サラリーマン日記ブログへ
にほんブログ村


日記・雑談ランキング