【成長記録①】HTML入門

こんにちは！
note初投稿になります(*^^*)

私はWEBマーケティングの会社でコーダーとして働いています。
大学ではプログラミングには一切触れたことはなく、卒業間際にプログラミングを勉強し始めました！

そんなプログラミング初心者の私が会社働いていく中で学んだことをドシドシ発信していきます！

私はコーダーとしてHPやLPの
修正や新規作成を主な業務として行う予定です。
(当時はまだ入社したばかりだっので、研修でHTML/CSSの講義を受けていました)
なので、最初に触れた言語は
HTMLとCSSでした。

私のようにプログラミングを始める人の多くが
HTML/CSSから勉強すると思います。

まず最初にこの2つの言語がどんなものかを解説していきたいと思います(´˘`＊)

HTMLとは

HyperText Markup Language
(ハイパー テキスト マークアップ ランゲージ)
WEBページを作るためにつくられた言語です。

HyperText(ハイパーテキスト)
 リンクを埋め込むことができる高機能なテキストのこと。
WEBページから他のWEBページにリンクを貼ったり、画像や動画などをデータファイルに埋め込むことができます。

Markup(マークアップ)
 目印をつけること。
文書の各部分がどんな役割があるかどうかを示すものです。
例えば、見出し、題目、説明文、表、リストなど、全体の文書の中でそれぞれどんな役割を持ってるのかをわかるように示していきます。
このような役割のことを要素といいます。

タグとは

簡単に言うと、テキストに目印となるものを与えたものです。

＜要素＞テキスト＜/要素＞

＜h1＞HTMLとはなにか学習しよう！＜/h1＞
＜p＞まず、HTMLとは「HyperText Markup Language」の略です。＜/p＞

↑このようにテキストをタグで囲ってあげることで、＜h1＞(見出し)という意味を持つようになります。
HTMLでは、「開始タグ(＜＞)」と「終了タグ(＜/＞)」の間に「テキスト」を記述することが一般的です。この開始タグ〜終了タグまで囲まれた全体を「要素」といいます。

HTMLの入れ子構造について(ネスト)

入れ子とは
「開始タグ(＜＞)」と「終了タグ(＜/＞)」で｢タグ｣を囲むことです。

＜div＞
        ＜h1＞HTMLとはなにか学習しよう！＜/h1＞
        ＜ul＞
               ＜li＞HTMLとは＜/li＞
               ＜li＞タグとは＜/li＞
               ＜li＞HTMLの入れ子構造について(ネスト)＜/li＞
        ＜/ul＞
＜/div＞

このように＜div＞の中に＜h1＞＜ul＞といった要素があります。要素を別のタグを囲むことを入れ子にするといいます。また、ネストするともいいます。
この＜div＞のように囲っている要素のことを｢親要素｣といい、囲まれている＜h1＞＜ul＞のことを｢子要素｣と表現します。

入れ子をする時の注意点は
囲っても大丈夫な要素とそうでない要素があります。
先程の＜div＞はほとんど囲むことができますが、＜p＞は見出しの＜h1＞＜h2＞＜h3＞…などは囲むことができません。