さらっとHTML(マークアップ)を知る!【さらっと学ぶフロントエンジニア】

さらっと簡単にWEB系のお仕事を解説していくシリーズ

前回はそもそもフロントエンジニアとは何ぞや？とバックエンジニアとの違いを解説し、ざっくりとフロントエンジニアとはどんなことをする人かはわかっていただけたんじゃないかと思います。

超簡単にWEBエンジニアとは何か解説!【さらっと学ぶフロントエンジニア】

どらやき君 WEBエンジニアってかっこよさそうだけど、色々種類あるの？だいふくざっくり言うと「見た目をやるフロントエンジニア」と「裏側のシステム系をやるバックエンジニア」の２つ...

今回はフロントエンジニアの基本中の基本、HTML(マークアップ)について触れていきます！

どらやき君

マークアップって??

だいふく

PCに文章の構造(見出しとか本文とかどうでもいい情報とか)を理解してもらう書き方のこと！

HTMLをさらっと知る！

HTML(Hyper test Markup Language)とは、目印をつけてホームページの文章構造を人がコンピューターが理解できるように書くための言語です。

HTMLは非常に簡単な言語ではありますが、これなしではホームページは成り立たないものです。

ホームページの骨格といっても過言ではないです。

HTML＝ホームページの骨格、どんなホームページでも必要

そしてマークアップとは、正しくHTMLを書くこと　だと覚えておきましょう！

マークアップとは
正しい文章構造のHTMLを書くこと
マークアップエンジニア=HTMLのタグ(機械が理解できる目印)を駆使し、PCに文章構造を正しく理解させるためのコードを書く人

さらっとHTMLとはどんなものか知るだけなら上記だけでも覚えておけば、とりあえずOKです！

ここからは、一応もう少し掘り下げていきます。
興味のある方のみ、軽く読んでみてください！

HTML5の特徴

HTMLにも歴史があって、HTML4とかXHTMLなんて時代もありました。

現在はHTML5という言語形式が主流です。

特徴として、文章構造が以前のものよりわかりやすくなっており、動画や音源データの埋め込みやAPIの設定が簡単になりました。

APIは、正確な表現ではありませんが「よそから機能を引っ張ってくること」みたいなイメージのものだと理解しておけばOKです！

だいふく

HTML5はこんな感じ！

<!DOCTYPE html>
<html>
　<head>
  　<meta charset="utf-8">
  　<meta name="viewport" content="width=device-width">
  　<title>だいふくマーケット</title>
　</head>
　<body>
 　<p>だいふくです！</p>
　</body>
</html>

HTMLのタグ紹介

さらっとシリーズなのであまり需要なさそうですが、一応ちょっとだけHTMLのタグにどんなものがあるかも一応紹介します。

<html>タグ
最上位に一度だけ出てくるタグで、「この文章はHTMLだよ！」と宣言してくれるものです。

<head>タグ
ユーザーには見えない情報(検索したときにでてくるページのタイトルとか、見た目を整えるためのファイルをどこから読み込むかとか)を書くところです。

<body>タグ
ページのコンテンツを記載するところです。今あなたが見ているこのページもこの<body>タグの中身を見ている状態です！

<h1>~<h6>タグ
見出し・タイトルを知らせるものです。
検索順位を上げるためにはここが重要だといわれています。

<p>タグ
パラグラフタグです。こういう普通のテキストはこのpタグで囲みます。

<iframe>タグ
そのページに他のページを埋め込むものです。
Googleマップとかはだいたいこの方法で埋め込まれています。

などなどたくさんありますので、興味があればもっと調べてみてください！

HTMLはWEB制作に必須

どこまでタグを覚えるか・実際に書けるようになるかは別として、HTMLとはどんなものでどれだけ重要なものかは把握しておきましょう！

Googleなどの検索エンジン(コンピュータ)はHTMLでちゃんと書かれた文章が大好き(というかちゃんと書けてないと意味が理解できない)なので、SEO対策においても必須です。

以上、作るのにも運用するのにも必要なHTMLとはどんなものか、さらっと解説でした！