【初心者向け】HTMLのつまずきやすいポイント

programingプログラミング
この記事は約4分で読めます。

こんにちは!今回は初心者向けにHTMLについて説明します!

  • HTMLって何?
  • Web系のプログラミング言語勉強したいんだけど何からすればいいの?
  • HTMLのポイント教えて

こんな疑問にお答えします。

勉強する中で知っておいた方がいいことはこちらです。

  • HTMLの中には色々な言語を直接書ける(ファイルを分けることもできる)
  • HTMLの新旧バージョンによって使えるタグが違う
  • HTMLの要素には最初からCSSが当たっている

詳しく説明していきます。

HTMLとは

HTMLとはHyperText Markup Language(ハイパーテキストマークアップランゲージ)のことです。

ウェブページを作るための言語になります。

ホームページは色々なHTMLファイルの集まりでできています。

ちなみにプログラミング言語ではなくマークアップ言語というらしいです。(どうでもいい)

具体的にいうと見出しを作ったり、文字段落を作ったりすることができます。

このブログ記事で言うと見出しは大見出し「【初心者向け】HTMLのつまずきやすいポイント」がh1で、小見出し「HTMLとは」がh2にあたります。

Webサイトのテキストで構成されている部分を表現しています。

模写コーディングの時にテキストだからHTMLだ!と思って.htmlファイルの中身探してもない場合は背景画像の可能性があります。

ちなみに文字の大きさを変えたり色を変えたりするのは「CSS」という別の言語の役割です。

アニメーションのように動きをつけるなら「JavaScript」というプログラミング言語を使います。

HTMLは1989年に開発されより使いやすいようにバージョンアップを繰り返しています。

2020年現在で最新のものはHTML5になります。

HTMLでできること

装飾がいらず、こだわらなければシンプルなWebページはHTMLだけでも作れます。

一昔前であればそんなWebサイトも見ましたが、近年は見たことがないですね。

HTMLだけで使われることはほとんどありません。

最低でもHTMLとCSSを組み合わせることになるでしょう。

HTMLで初心者が初めに習うものは以下になります。(細かく言うともっとあります)

  • 見出しを作る<h>
  • 本文を作る<p>
  • リンクを作る<a>
  • リストを作る<ol><ul><li>
  • ボタンを作る<button>
  • 表を作る<table>
  • チェックボックス等を作る<input type=”checkbox”…>
  • 画像を貼り付ける<img>

ちなみにブログを書いているとここら辺の知識が生きてきます。

HTMLのポイント

以下は僕がHTMLを勉強していく中でつまずいたり、悩んだりしたポイントをまとめたものです。

HTMLは新旧バージョンで使えないタグがある

HTMLって頑張れば<div>タグで結構なんでも押し通せます。

でも最新のHTMLでは作業の効率を上げるためにWeb制作で必要な機能を最初から盛り込んでくれています。

<nav>タグや<article>タグです。

しかし、HTML5で追加されたのでそれ以前のWebサイトでは使われていません。

そこで模写コーディングとか検証ツールとかで開くサイトによって使っているタグがバラバラなことがよくあります。

コーディングは最新の書き方でいいですが、従来の書き方も知っておいた方がいいですね。

HTMLには最初からCSSが反映されている

HTMLとCSSは完全に分けられるようなものではありません。

HTMLもデフォルトの段階である程度見やすくなるようにCSSがかかっています。

場合によっては打ち消す作業が必要になります。

<body>の周りになんか余白があるなーって思って一時期悩んだものです。

HTMLの中には色々な言語が書ける

HTMLはwebページの基本であり中心です。

HTMLファイルの中に「CSS」や「JavaScript」、「PHP」などを直接書き込むことができるんです。

大規模だったり人によっては一つ一つ別々のファイルで書くこともありますが、HTMLファイルの中に書くこともあります。

僕は最初HTMLファイルを開いてもどこまでがHTMLの記述かわかりませんでした。

勉強しているうちにだんだんわかるようになります。

1つのWebページを作るにしても色々な言語を掛け合わせています。

少しずつ理解できる範囲を広げていくといいと思います。

まとめ

HTMLを学習していて僕がつまづいたことをまとめました。

HTMLだけの勉強をするよりもCSSやJavaScriptなんかを一緒に勉強していくうちにわかっていくことも多いです。

まずはHTML/CSSで勉強するのをお勧めします。

割とそれだけでも結構なことができちゃいます。

コメント

タイトルとURLをコピーしました