エンジニアに興味が出てくるとプログラミングについても気になってくるはずです。そんな中、みんなHTMLからやった方がいいと言うけどそのHTMLってなに？って人にいまさら聞けない人多いと思うんで、簡単に書き方から表示方法まで紹介しいきます！
HTMLとは？
HTML(HyperText Markup Language)読み方は（エイチティーエムエル）は今読んでいるこの文字などを表示させるための言語です。ウェブサイトを作るときはHTMLを骨組みにしてそのあとにCSSなどで装飾していきます。なので、HTMLはウェブサイトを作る上で欠かせないので、覚えておいて損はないと思います！
見たことあるかもしれませんが<>こんな感じで囲われているやつです。文字を打つだけじゃないくて、画像入れたり動画入れたりリンクを入れたりとHTMLだけでも様々なことができます。
このブログでもYouTubeでもテキスト（文字）の部分や構成はHTMLでできてますので、みなさんが知らないうちに見ています。HTMLのコードは普段見えないそうになってますので、気づかない方がほとんどと思います。
HTMLのタグとは？
タグって言うのは、さっき紹介した<>この囲われた中のことを言います。例えば文字を表示する場合は、
<p>この中に文字を打つ</p>
といった感じでpタグのなかに文字を打ちます。
そのほかにも、
<h1></h1> ヘッダーのタグ
<span></span> スパンのタグ
<a></a> リンクのタグ
<br> 改行のタグ
<img> 画像のタグ
この他にもたくさん種類がありますが、ほとんどが<開始></終わり>と開始と終わりのタグの間で挟まれています。しかし例外もあり、改行や画像のタグは終わりのタグがありません。
試しに文章を打ってみますね！
<h1>HTMLの練習</h1>
<p>これは練習です。</p>
<ul>
<li>タグを書いて</li>
<li>タグの中に文字などを打つ</li>
</ul>
h１はヘッダータグ
pは文章タグ
ulとliはリストタグ
今打ったHTMLはどうなるのでしょう？答えは次の環境構築で自分で表示してみましょう！
HTMLの環境構築と書き方
環境構築って難しそうに書いちゃいましたけど、HTMLを使える環境にするということです。これはめっちゃ簡単です。HTMLはパソコンに元から入っているwindowsなら『メモ帳』かmacなら『テキストエディット』ってやつでできます。
もちろんテキストエディタをダウンロードして環境を整えるのもあり何ですが、今回は１番簡単なのでやりましょう！もしテキストエディタに興味ある方は下の記事を参考にしてください！
＊macでの解説になります。windowsではメモ帳でしてください。
- テキストエディットを開く
- 設定を変更
- 書き込む
- 保存（.htmlでデスクトップに）
- デスクトップのファイルをダブルクリック
1.テキストエディタを開く
初期の場所は『LaunchPad』の中の『その他』のなかに『テキストエディット』があります。まずはテキストエディットを開きますのでクリック！
2.テキストエディットの設定変更
ちょっとした設定の変更します。これしないとちゃんと表示されない可能性があるのですることをオススメします。
- アプリを開くと左上に『テキストエディット』をクリック
- その中に『環境設定』をクリック
- フォーマットのなかの『標準テキスト』をクリック
- 閉じる
- 『新規書類』をクリック
3.HTMLを書き込む
自分で好きに書き込んでもいいですし、HTMLタグのとこに書いたサンプルのHTMLをコピーしてペーストしても好きにしてください！
4.保存
上のように保存してください。
名前は『index.html』
場所は『デスクトップ』
拡張子のチェックボックス外す
特に『拡張子が未定の場合は』ってとこのチェック外しときましょう！
外さなくてもできますが、もし外してない場合は『html拡張子でもいいですか？』みたいなんも出てくるので『htmlを使用』にしたら大丈夫です。
最初の『index』の部分は英語なら何でもいいです。例：sample, hello, ohayo
index.htmlの『.html』の部分はhtmlのファイルですって意味です。
5.ファイルを開く
デスクトップにこんな感じで保存されていると思いますので、そのファイルをダブルクリックすると、下の画像のように表示されるはずです。
もしこのようになっていなかったら、何かがおかしいので最初からしてみてください！
まとめ
HTMLはプログラミングを始めるにあたって初級者向けの言語なので、HTMLからCSSそしてJavaScriptと上がっていくのがいいでしょう！
簡単に説明しましたが、実はいろんな書き方があるのでまた紹介しますね！もし、勉強の仕方など見たい場合は下の記事を参考にしてください！
プログラミングスクールに興味がある方は下の記事まで！
