1. トップ
  2. コラム一覧
  3. ウェブサイトの仕組みを知る! html編 其の2

ウェブサイトの仕組みを知る! html編 其の2

投稿日 : 2018.01.20  |  カテゴリー : IT雑記

[ウェブサイトの仕組みを知る!]
html編 其の1 : ウェブサイトの仕組みを知る! html編 其の1
css編 其の1 : ウェブサイトの仕組みを知る! css編 其の1


htmlとは、以前述べたとおり、webページを記述するためのマークアップ言語と呼ばれるものです。
言語、というだけあって、htmlにも文法が存在します。

文法あってこそです

そもそもhtmlとは、W3C(World Wide Web Consortium)という団体によって作成されたものであり、その文法に関しても同様に、W3Cによって定義されています。

「文法」と聞くと、学生時代に英語の文法を勉強していたのを思い出しますよね。
日本語には日本語の文法、英語には英語の文法、はたまたスペイン語にはスペイン語の文法が存在するわけで、htmlも同様に、定められた文法に則って記述していくわけです。

では全てのwebサイトが正しい文法のhtmlで記述されているのかというと、実はそうでもありません。
無数に存在するwebサイトの中で、W3Cが定める文法をキッチリ守って記述されているページは、実はほとんどありません。割合で言うと、全体の1%以下といったところだそうです。エンカウント率激低です。

逆にいえば、多少の文法的間違いがあっても、webブラウザ上で表示することは可能ということなんです。
少々間違っていても、伝えることはできる。まさに言語そのものですよね。

正しい日本語を使うことが難しいのと同様に、正しいhtmlを使うということも中々難しいようです。

タグ

webサイトのソースコードを見るとのような、<>で囲まれた文字が沢山ありますよね。 これらをタグと呼称します。

htmlでは、このタグを並べて、指定箇所にテキストや画像のurlを挿入して、webサイトを構築していくのです。
タグには、webブラウザ上でテキストや画像をどのように表示させるか指定するという役割があり、種類も様々です。

例えば、文字を強調したいというときは

● <b>文章</b>や、
● <strong>文章</strong>
を使います。

「開始タグ」とスラッシュ(/)が付いた「終了タグ」の間に記載された文字が太くなります。

リンクを設置するには
<a href="リンク先のアドレス" >文章</a>
を使います。

中には終了タグが省略されるタグ等もあります。
例えば画像を表示するタグにはこのようなタグを使います。
<img src="画像のアドレス" />

 

といった感じで、目的や用途によって使い分ける必要があります。
正しい文法でhtmlを記述するためには、タグの役割を覚える必要があるということですね。

この記事を共有する
  • facebookでシェアする
  • ツイッターでつぶやく
  • LINEで送る
関連記事

ビジュアルプログラミング言語

2020年のプログラミング必修化 2020年に小学生のプログラミング必修化に向けて様々な学習ツールが発表されています。 中でも使いやすく、拡張性の高いビジュアルプログラミング言語は特に注目を浴びているのではないでしょうか? 今回は ...

文字入力を劇的にスピードUP!タッチタイピングを習得しよう!

パソコンを使うなら是非とも身に付けたいタッチタイピング パソコンを使用するにはマウスとキーボードの操作は切っても切れないものです。 特にプログラミングを行う際にはキーボードでの文字入力が速ければ速いほど効率も上がります。 キー ...

画像の一部だけが動く?!不思議な写真シネマグラフ

先週消えつつある技術としてFLASHの記事を書きました。 ウェブ上でアニメーションコンテンツを見せる為の代表的な技術でしたが、残念ながら時代の流れと共に利用者が少なくなりつつあります。 しかしアニメーションなど動きのあるリッ ...

ウェブサイトの仕組みを知る! css編 其の1

ウェブサイトの仕組みを知る! html編 其の1ウェブサイトの仕組みを知る! html編 其の1 の続きです。 cssの役割 htmlとはなにか、をザックリと説明したところで、よりhtmlへの理解を深めていただくために説明しなく ...

AIによって増える仕事・残る仕事

最近AI・人工知能によって無くなってしまう仕事の話をよく耳にします。 なので今回は、AI・人工知能によって増える仕事、残る仕事の話をしたいと思います。 増える仕事 ・ロボット・アドバイザー ・単純化するエキスパート ・輸送アナリス ...

便利なIoT化

進むIoT化 学校や企業でIoT化が進んでいます。小学校だと2020年に全学校の無線ネットワークの普及も計画されています。 最近は家電のIoT化も進んでいて、家電をネットワーク接続し携帯電話や専用端末で操作ができるものも販売されています ...

kimu

危惧される北朝鮮の存在

2月13日に北朝鮮の金正男氏が殺害されました。 北朝鮮の金正恩体制が恐怖政治であることが再び再認識された事件でもありました。 北朝鮮の印象 北朝鮮といえばミサイル実験や度重なる挑発行為などで日本に不安を煽っている印象があります。 し ...

オンライン画像編集サービス「Pixlr」が凄い!

ウェブ制作において欠かす事のできない写真や画像。 自分で撮影した写真やフリー素材を使う事が多いと思いますがその画像をちょっと加工して自サイトらしさを出したいという事はよくあります。 画像の縦横比やサイズを変えたり、コントラス ...

キュレーションメディアの現状と今後

ここ最近、一部のキュレーションサービスにおいて、不適切な記事が多数掲載されていたとして全記事が非公開となる事態が発生しております。 そもそもキュレーションメディアってなに? キュレーションメディアとは、個人の情報発信をデータベー ...

謎?のボタン[CapsLock]キーの使い道

文字入力中に急に出てくる大文字 キーボードで文字入力をしていてよく聞くトラブルに 「いきなり大文字しか打てなくなった!壊れた!」 というハプニングがあります。 もちろん壊れた訳ではないのですが、 ・何がどうなってそんな事に ...

Knocknote Education(ノックノートエドゥケーション)