HTMLとは?HTMLタグを簡単に理解しよう

HTMLとは?HTMLタグを簡単に理解しよう

HTMLとは簡単にいうとホームページを作るプログラミング言語のようなものです。

とはいっても本格的なプログラミング言語よりはずっと簡単なのですが、
ソースコード(実際に見えるページの元になっているテキスト)を初めて見るとかなり難しく感じると思います。

ここではざっくり簡単にHTMLについて説明したいと思います。

簡単なHTMLの例

例えば<b>あいうえお</b>とHTML文書に入力するとブラウザではあいうえおと表示されます。

<b>は文字を太字にするHTMLタグです。<b>と</b>の間に文字を入れることによってその文字が太く表示されます。

HTMLでは基本的に<HTMLタグ>で始まると</HTMLタグ>で終わるという構造になっています。

HTMLの構造


<html>
 <head>
  <title>ページのタイトル</title>
  head要素の内容(ページのタイトルや外部のCSSを使うなどの情報を記述する)
 </head>
 <body>
  body要素の内容(実際にブラウザに表示される部分)
 </body>
</html>

基本的なHTMLの文書はこのような構造になっています。

<html>はこれからHTML文書を書きますよーという合図のようなもので、<head>はページの情報(タイトルやどのCSSを使用するかなど)を記述します。

<body>は実際にブラウザに表示される部分を記述していきます。

<b>タグが実際に適用されるのはこの<body>タグ内になります。

同様に<title>が適用されるのは<head>タグ内となります。

<head>タグ内と<body>タグ内ではそれぞれ使えるタグが違うのでHTMLタグ一覧サイトなどを見て勉強することが必要です。

HTML文書の作り方

基本的にはメモ帳などのテキストエディタで編集します。

メモ帳なら拡張子をファイル名.htmlとして保存すればhtml文書として自動的に保存されます。

保存した文書はブラウザで確認することができるので実際にHTML文書ができているか確認してみてください。

作成にかかる時間が短縮できるのでホームページビルダーDreamWeaver(有料ソフト)などのホームページ作成補助ソフトを使ってもよいですが、
どうしても無駄な記述が多くなってしまい、サイトが重くなってしまうリスクがあります。

一度サイトの基盤を作ってしまえば後はコンテンツ部分だけ編集すればいいので手打ちでも慣れてしまえば時間はそんなにかからないです。

また、手打ちで作る一番のメリットはやはり無駄な記述をしないのでページが軽くなりSEOにも好まれる傾向にあります。

稼げるためのサイトを作るのであれば1から手打ちでサイトを作ることをおすすめします。

これを見て挫折しそう…だと思った方はHTML&CSSの知識も不要!?WordPressで簡単にサイトを作成しようを参考にしてください。

EmEditor(30日間の試用期間を終えるとFree版にダウングレードするが、終始無料で利用できる)、
TeraPad(無料)
などのテキストエディタを使うことでHTMLタグを自動的に色分けしてくれたりと、非常に使い勝手がよくなります。

メモ帳よりも断然おすすめです。

HTMLタグを紹介しているサイト

ホームページマスター

このサイトは基本的なHTMLをまとめてくれているので、このサイトのHTMLをマスターすれば基本的にはOKです。

HTMLタグだけでサイトは作れるのですが複雑なレイアウトをする際にはHTMLだけだとどうしても限界があります

そして次に大事となってくるのがCSSです。次はCSSについて説明します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

お名前 *

ウェブサイトURL

コメント