HTMLとマークダウンの違いは?特徴やメリット・デメリットを解説!

ノートパソコン ソフトウェア

こんにちは!

どちらもマークアップ言語の一種であるHTMLとマークダウンですが、それぞれどのような違いがあるのでしょうか?

今回は、HTMLとマークダウンについて解説し、それぞれのメリットやデメリットを見ていきます。

それでは見ていきましょう!

HTMLとは

HTML

HTML(HyperText Markup Language)とは、文章を装飾して表示できるマークアップ言語の一種で、主にWebサイトを表示する際に使います。

HTMLは「タグ」と呼ばれる記述を使うことで文字の位置や大きさ、装飾などを指定できます。

例として、段落は<p></p>というタグを使って作り、文字列を太字にするには<b></b>で囲みます。

マークダウンとは

ノートパソコン

マークダウンもHTMLと同じくマークアップ言語の一種ですが、マークダウンはHTMLよりもシンプルな記法で文章や文字の装飾ができるようになっています。

HTMLよりもシンプルに書けるということで、編集する際にもとの文章も見やすくなっています。

HTMLのメリット

さまざまな表現ができる

HTMLにはさまざまなタグが用意されており、さまざまな表現をすることができます。

HTMLで書かれているものの代表例としてWebサイトがあります。さまざまなWebサイトがHTMLで書かれていると考えてみるとHTMLでできることの広さを感じることができます(WebサイトにはHTML以外の技術も使われています)。

HTMLのデメリット

記法を覚えるのが大変

HTMLのタグは100種類以上あるため、学習コストは高いです。

また、仕様としては存在しているがあまり使われないタグや、昔はよく使われていたが最近はあまり使われないタグもあり、古い情報を新しい情報を見極めながら学習を進める必要があります。

とはいえ、すべてのタグの使い方をマスターする必要はありません。作りたいものに合わせて、必要なところを学習していけば良いと思います。

コードが複雑で、もとの文章が見づらい

HTMLはタグを使って記述しますが、タグの数が多くなると編集時にもとの文章が見づらくなります。

例として、サンプルとなるコードを作ってみました。

<h2><u>HTML</u>と<b>マークダウン</b>を解説</h2>

<ul>
    <li>HTMLの特徴</li>
    <li>マークダウンの特徴</li>
<ul>

これは「HTMLマークダウンを解説」という見出しと、箇条書きを表現したHTMLのコードとなります。HTMLはタグで文字列を挟むという構造上、コードを見たときに元の文章がわかりにくいです。

なお、実際にHTMLを書くときには更にタグの数が増えます。HTMLで文章を書く際はリアルタイムビューアーやHTML記述ツールなどを使用する必要があるでしょう。

マークダウンのメリット

シンプルな記法

マークダウンはHTMLと比べてシンプルな記法で記述することができます。

先程のサンプルをマークダウンで記述すると以下のようになります。

## *HTML*と**マークダウン**を解説

* HTMLの特徴
* マークダウンの特徴

HTMLと比較するとマークダウンのシンプルさが分かると思います。このようにマークダウンは、マークダウン用のエディターでなくとも書きやすくなっています。また本文がタグに邪魔されることなく、見やすくなっています。

HTMLに変換することもできる

マークダウンはHTMLに変換できるように作られています。そのため、マークダウンでは使いにくい場合にはHTMLに変換することもできます。

文章を作成する際は見やすくシンプルに書けるマークダウンを使い、WebサイトにするときにHTMLに変換する、といったことも可能です。

マークダウンのデメリット

マークダウン固有の機能は少なめ

マークダウン固有の機能はHTMLと比較するとやや少ないです。マークダウン固有の機能のみですべてのHTMLタグの機能を表現することはできません。

しかし、マークダウンはHTMLの記法も使うことができます。HTMLの記法を使うとマークダウンの「編集時の文章が見やすい」というメリットは薄くなってしまいますが、HTMLでできるすべての表現ができるようになります。

まとめ

今回の記事では、HTMLとマークダウン、それぞれの概要について解説し、それぞれのメリットやデメリットを見てきました。

ここまでそれぞれの特徴を見てきましたが、文章をどのようなことに使いたいのかということに合わせて使い分けるのが大切です。

自分用のメモなどシンプルに分かりやすく記述したい場合にはマークダウンを、HTMLの機能を駆使した豪華な表現をしたい場合はHTMLを使うなど、用途に合わせて使っていきましょう!

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