中の人「ma-san」

東京・千葉でホームページを作るお仕事をしています。

お仕事の詳細はこちら

Webサイトを作るときに必要なHTMLってなに?

HTMLのイメージ HTML

HTMLとはハイパーテキストマークアップランゲージ(Hyper Text Markup Language)の略称で、マークアップ言語です。厳密にはプログラミング言語と違うと言う方もいるでしょうが、ホームページの更新をするときや作りたいときに最も基礎的な言語になります。

基礎を学ぶ

概要としては別ページに纏めていたりしますが、HTMLというものは端的にいえばテキストをWebサイトの構造に変えるための言語です。
下記、リンク先に基礎を纏めているのでより詳細を知りたい方は確認してみてください。

HTMLの基礎

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<h1>大見出し</h1>
<p>本文となるテキストが入ります。</p>
<p><img src="/images/img.png" alt="画像の説明" width="300"
height="200"></p>
<p><a href="https://ma-san.org">https://ma-san.org</a></p>
</body>
</html>

上記のような形でテキストエディタを利用してテキストをソースコードとして整形し、「index.html」という名前などで保存すればHTMLとして機能します。

HTMLで出来ること

極端な話、HTMLのみでホームページを作ることが可能です。ただし、デザインを整えたり様々な機能の実装はHTMLだけではできません。

  • リンク
    <a href="#"></a>
  • 見出し
    <h1></h1>
  • 画像
    <img scr="/">
  • 段落(文章)
    <p></p>
  • テーブル(表)
    <table><tr><th></th><td></td><td></td></tr></table>
  • リスト
    <ul><li></li></ul>

極端な話、ホームページは上記の要素でほぼ構成されています。厳密に言えばこれらをなにかしらの意味で囲うブロック要素などがありますが、ここでは割愛します。
リンクを用いて様々なページや外部のサイトへ飛んだり、見出しや段落を用いて文章を読みやすくする。画像を貼り付けてビジュアルで分かりやすくするなどです。

インターフェースやデザインを整えるためには上記の要素だけでは難しいですが、簡易的なホームページの構成や、既に存在するWebサイトの簡易的な更新(テキストの変更、画像の差し替え、リンクの設定など)が可能となります。

HTMLを操れるようになればホームページの運用が可能になる

試しにホームページを作ってみたいという方はHTMLのみでホームページを作ってみるということを行ってみると、なにができてなにができない、ということが分かってきます。

HTMLを操ることができるようになれば世の中のWebサイトの中身が見れるようになり、どのようなことをしているのかなども理解できるようになります。

また、様々なWebサービス、アフィリエイトサービスなどで提供される「ソースコードを貼り付ける」などで表示されるコードの大部分はHTMLです。

HTMLを利用できるようになればWeb運用ができるようになる第一歩になります。

HTMLではできないこと

一方、デザインを整えたり動きを加えたり、機能(なにかを押したらアクションが発生、検索機能、表示したり非表示にしたりするなど)を作るということはHTMLだけではできません。
様々なデータ(個人情報など)を管理したり、出力したり、更新するということもHTMLだけではできません。
HTMLでできることはあくまでも「テキストをホームページ用に整形すること」「HTMLを通して静的な範囲でデータを送受信すること」に限ります。

そのため、HTMLでできないことは沢山あるため「HTML」の他に「CSS(カスケーディングスタイルシート)」「JavaScript(ジャバスクリプト)」、PHPなどで動的に出力するなどがあります。

HTMLまではテキストを修正する程度(厳密には他にももっとありますが、シンプルな形であればこの程度の認識で良いです)ですが、それ以上の、データやシステム構築、デザインなどを含むとより多くの言語を覚える必要があります。

           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

HTML
スポンサーリンク
シェアする
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました