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で送る
関連記事
colors

カラーコードと16進数

カラーコード  #FFFF00は何色を表現するのでしょうか。 正解は 黄色です。 Webでは色を16進数で表示します。例えば上記の黄色は#FFFF00で表現しましたが、これらの文字列は、16進法で表されています。16進法の ...

kimu

危惧される北朝鮮の存在

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

便利なIoT化

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

有意義なネットサーフィン

ネットサーフィンとは? 興味の赴くままに色々なサイトを飛び回り情報を得る事です。 興味がある事や課題の資料集めには欠かせないことです。 ネットサーフィンの悩み しかし、皆さんの中には検索ワードを打ち込んでも思った通りに求めている ...

tablet

渋谷区 区内の小中学校全生徒・教職員にタブレット 2017年9月より導入

渋谷区 区内の小中学校全生徒、教職員にタブレット 渋谷区は授業や家庭での学習を目的に、17年度予算案に7億8200万円計上し、研修等を経て2017年9月より、渋谷区小中学校の児童生徒約8000人並びに教職員約600人にタブレット端 ...

2017年人気記事ランキング TOP10

街もクリスマスムードに包まれはじめ、そろそろ2017年も年末モードに。ここ一年間の弊社のコラムTOP10を紹介したいと思います! では早速いってみましょう! 第10位 200年ぶりに新しい”青色”が発見された! 新しく発見さ ...

画像圧縮に便利なサイト比較

電話回線でネットサーフィンしていた時を思い出しました。 ネット上にある画像を全部表示するのに1分もかかっていたこと、 電話が来る度にネット回線が切断されていたこと。 今思い返すとなかなかに不便なネット環境だったことをしみじみと ...

誰でも聞いたことあるIT用語解説【Cookie】

はじめに 誰でもスマホやパソコンを使い続けていれば見たことあるIT用語は数多く存在するのではないでしょうか? Cookie・セッション・404エラー・クラウドコンピューティングetc・・・ でもいまいち意味がわからない言葉もあったり・ ...

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

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

IT人材不足が深刻に

IT人材不足が深刻に りそな総合研究所の発表によると、AIやIoTなどの「第4次産業革命」の技術を活用できる人材が、関西では不足状態に陥るとの試算をまとめました。 平成32年には必要な人材の4割程度しか確保できない見通と ...

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