HTMLの要素とは

2 min 14 views

要素

要素とはマークアップしたい対象の文字列をタグで囲んだ全体のこと。

言葉で説明されてもピンとこないと思うので図で説明します。

<p>とは段落を表す要素名です。

この<p>と</p>で囲んだところが一つの段落として認識されます。

長文で改行したいところには、また別で説明しますが改行を表す<br>で改行できます。

<img>タグなど終了タグのないものもありますが、基本はこの形になるので覚えておいてください。


基本的な要素

<html>    HTML⽂書であることを宣⾔<p>           段落を表す
<head>      ⽂書のヘッダ情報を表す<br>           改行を表す
<body>       ⽂書の本体部分を表す<i>       斜体(イタリック)にする
<header> ページ上部のロゴやメニューを配置<b>           太⽂字にする
<main>    文書の主要なコンテンツを表す<u>            下線を引く
<nav>    ナビゲーションセクション要素<title>     ⽂書にタイトルを付ける
<section>        汎用セクション要素<ul>     順序のない箇条書きリスト
<article>         記事コンテンツ要素<ol>   順序付きリスト(Ordered List)
<footer>       著作権情報やリンクなど<table>       表を作るための要素

他にも色々(約110種類)ありますが、よく使うものをピックアップしてみました。

正直全てを使うわけではないし、最近はエディタの性能も良く、候補が出てくるので覚える必要はないです。

ただ、どんな意味があるのか軽くは理解しておきましょう。

(今作っている最中ですが、試験対策にも利用してもらえるように一覧表を用意する予定です。)


要素の入れ子とは

要素同⼠は「⼊れ⼦」構造で成り⽴っています。

入れ子とは要素を別のタグで囲うことをいいます。

HTMLには開始タグと閉じタグで囲っていくというルールがありますが、単にテキストを囲うだけでなく「テキストを囲っているタグをさらに別のタグで囲う」ということができます。

このように要素をまた別のタグで囲うことを入れ子にするといいます。

この呼び方以外にも、入れ子の英訳の「ネスト」を用いて「ネストする」と言ったりもします。


属性とは

「属性」とは要素につける設定のことです。

<要素名 属性名=“属性値”> のように書きます。

これはリンク先がhttps://aggressive-noise-design.comであることを示しています。

また「ここをクリック」と書いてある場所をクリックするとページに飛びますよと明示しています。


まとめ

勉強を始める前に抑えるべき基本となる説明を今回は説明しました。

基本がわかればHTMLは簡単なので焦らずじっくり勉強しましょう。

深く深く掘り下げれば先の見えない迷宮のようですが、普通のWebページを作るだけなら覚えることは少ないです。

また、プログラミング言語のように1000時間勉強することもないので気楽にいきましょう!

関連記事