---
layout: "@/layouts/MarkdownLayout.astro"
---
import RenderFile from "@/components/RenderFile";
import RenderHtml from "@/components/RenderHtml";
export const title = "はじめてのHTML";
# {title}
## TOC
## とりあえず書いてみよう (work)
以下の場所にファイルを作成し、中身を自由に編集してみましょう。
ルールは特にありません。
`src/playground/html/first.html`
例として、こんな感じで書いてみました。
```html file=src/sample/html/first.html
first.html
```
...
...
...
`src/playground/html/first.html` は書けましたか？
書けたらファイルをダブルクリックして、ブラウザで開いてみましょう。
例として用意したファイルの結果は、こんな感じになりました。
<RenderFile path="src/sample/html/first.html" />
なにやら非常に簡素な見た目ですね、どうやら改行もされていないようです。
## タグ (Element)
ここでHTMLのタグについて触れていきます。
タグとは、ウェブページに**構造**や**見た目**などの情報を与えるための要素です。
なお、英語圏ではタグのことをElement(エレメント)と呼びます。
別の単語でややこしいですが、両方とも同じ意味ですので覚えておきましょう。
ここでは基本的に、タグという呼び方で統一します。
ところで前回用意した例では、改行が反映されていませんでした。
ここに、改行という見た目を与えるための`<br>`タグを追加してみました。
```html file=src/sample/html/first-with-br.html
first-with-br.html
```
<RenderFile path="src/sample/html/first-with-br.html" />
ちゃんと改行されましたね！
---
もう1つ、個人的に`生まれてこの方...`の部分を強調したいなと思いました。
そこで強調を意味する`<strong>`タグを追加してみました。
```html file=src/sample/html/first-with-strong.html
first-with-strong.html
```
<RenderFile path="src/sample/html/first-with-strong.html" />
何やら文字が太字になりましたね。
この強調された部分は、`<strong>`と`</strong>`で囲まれていることに気づきましたか？
範囲の終わりを示すタグ(=閉じタグ)には、タグ名の前にスラッシュ`/`が付きます。
これをすることで、効果の範囲を指定できるのです。
```html
<タグ名>範囲</タグ名>
```
ここで、さっきの`<br>`には閉じタグが無いことに気が付きましたか？
このような、閉じタグを持たないタグも存在し、これを空要素(Void Element)と呼んだりします。
このような空要素の書き方として、末尾にスラッシュ`/`を付ける書き方があるので覚えておきましょう。
```html
<br>
<br />
```
---
ついでに色もつけちゃいましょう、`<font>`タグを使って赤色にしてみました。
```html file=src/sample/html/first-with-font.html
first-with-font.html
```
<RenderFile path="src/sample/html/first-with-font.html" />
ちゃんと赤色になりましたね！
赤色にしたい範囲を`<font color="red">`と`</font>`で囲みました。
よく見ると、開始のタグには`color="red"`という部分がありますね。
このfontタグにはcolorという**属性**が用意されており、これを使うことで色を指定できるのです。
```html
<タグ名 属性名="値">対象</タグ名>
```
```html
<font color="red">赤</font>
<font color="blue">青</font>
<font color="#008000">暗めの緑</font>
```
<font color="red">赤</font>
<font color="blue">青</font>
<font color="#008000">暗めの緑</font>
:::note info
今回説明のためにfontタグを使いましたが、fontタグは現在非推奨となっています。
実際に色を指定する場合は、後述する`CSS`を使うなどの方法を使用しましょう。
:::
今回登場したタグの他にも、様々なタグが存在します。
主要なものをTipsにまとめてありますので、ぜひ参考にしてください。
[いろいろなタグ](../tips/tag)
