【Web知識共有】初学者向け、HTMLについて

2023年4月28日 14:05

HTMLって何ですか？

こんな質問をうけたことがあります。
初学者の方はすでに調べがついていることでしょう！
Webページを作成するためのマークアップ言語です。マークアップ？？簡単に言いますとWebの国語みたいなものですね。
見出しは<h1>です！とか、段落は<p>です！とか。その文章に意味をつける言語です。
作文を書いたことを思い出してもらえると、理解ができるかもしれません。

ざっくりこんな感じ。

<h1>大見出し</h1>
<p>段落になります。</p>

HTMLの概要

Webページを構築するためのマークアップ言語である。
Webブラウザに対してWebページの構造やコンテンツを指示するためのタグを用いて記述される。
- タグは、<>で囲まれたテキストであり、タグの種類によって異なる機能を持つ。
- タグには属性を指定することができ、属性はタグの挙動を制御するために用いられる。
head要素とbody要素から構成される。
- head要素はページのタイトルやメタ情報などを定義する。
- body要素はWebページのコンテンツを記述する。
HTMLバージョンは1989年に始まり、最新バージョンは2017年のアップデートでHTML5.2になっている。

HTMLタグ

この記事ではタグの解説はしておりません。タグ一覧は外部サイトからご確認ください。

インライン要素

一つの行内に収まるように表示されます。　　
インライン要素は、小さなテキストや画像などの要素を指定するために使われます。
以下は主なインライン要素になります。

<a> <span> <strong> <b> <em> <i> <img>　<input> <label> <select> <textarea>

ブロック要素

ページの中で大きな領域を占め、横幅いっぱいに表示されます。　　
それぞれのブロック要素は、新しい行に配置され、上下に余白を持ち、自分専用のスペースをもっています。
以下は主なブロック要素になります。

<h1>〜<h6> <p> <ul> <ol> <li> <table> <thead> <tbody> <tr> <th> <td>
<div> <header> <footer> <main> <article> <section> <aside>

属性

要素に追加情報を提供するために使用されます。
以下は主な属性になります。

id：要素に一意のIDを割り当てるための属性。スタイルやJavaScriptから要素を参照するために使用されます。
class：要素に1つ以上のクラス名を割り当てるための属性。複数の要素をスタイル化するために使用されます。
src：画像や音声、ビデオなどのメディア要素の場合に、そのファイルの場所を指定するための属性。
href：リンクを作成するための属性。この属性には、リンク先のURLが指定されます。
alt：画像が表示されなかった場合に、代替テキストを提供するための属性。

head要素とbody要素

HTMLはhead要素とbody要素に分かれて構成されています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <p>文章の内容</p>
  </body>
</html>

head要素

<head>の中にはページのメタ情報がはいります。
<title>や<meta>などのページ情報や<link>や<script>などの外部ファイルの読み込みなども<head>内に書きます。

body要素

<body>の中に書かれたタグがWebブラウザ上で表示されます。

おわりに

HTMLも歴史がある分、だいぶ複雑になってきましたね。自分が始めた頃に使っていた属性は今は非推奨となり全く使えなくなったりしています。細かい部分で覚えないといけないと思います。
AIの出現により、HTMLやプログラムを書いてくれる時代が来ましたが、理解しておくことに間違いはないと思います。

この記事が気に入ったらサポートをしてみませんか？