htmlでmainタグが認識されない

将来的にWebアプリケーションの開発、起業がしたい。

htmlでmainタグが認識されない

エラーメッセージ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>KUJIRA CAFEへようこそ</title>
</head>
<body>
<div class="wrapper">
<!-- ヘッダー -->
	<header class="header">
			<h1 class="logo"><a href="index.html"><img src="image/logo.png" alt="KUJIRA Cafe"></a><h1>
			<nav class="nav">
					<ul>
							<li><a href="index.html">ホーム</a></li>
							<li><a href="about.html">店舗案内</a></li>
							<li><a href="access.html">アクセス</a></li>
							<li><a href="menu.html">メニュー</a></li>
							<li><a href="contact.html">問い合わせ</a></li>
					</ul>
			</nav>
	</header>
<!-- ヘッダー　ここまで -->
<!-- メイン -->
	<div class="keyvisual">
			<img src="image/keyvisual.jpg" alt="">
	</div>
	<main>
			<h2>News<h2>
			<p class="news-item">4月29日（土）は、九寺楽町の春祭りに出店するため、お店は休業させていたただきます。春祭りでタルトやキッシュ、コーヒーも販売するので、ぜひお越しください。</p>
			<p class="news-item">3月20日（月・祝）は、18時からアコースティックギターデュオ「<a href="http://www.sbcr.jp" target="_blank">PICNIC</a>」のライブを開催します。投げ銭方式です。お楽しみに！</p>
	</main>
<!-- メイン ここまで -->
<!-- フッター -->
	<footer class="footer">
		<p>&copy;Copyright KUJIRA Cafe. All rights reserved.</p>
	</footer>
<!-- フッター ここまで -->
</div>
</body>
</html>


```ここに言語名を入力
ソースコード

試したこと

ネットで色々調べてみたんですが、ダメでした。

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

MacBook Pro を買いました。プログラミング始めたばかりです。
とりあえずhtml書いてみようでやってる最中に起こりました。
cssは全く何もしていません。
miのhtml5を使っていますが、ここに載せているソースコードでは<main></main>が認識され、青く表示されますが、僕のmiではそのまま黒文字で表示されます。
因みにheader,footerタグは認識します。

m.ts10806

2018/08/14 21:20

質問テンプレート部分の文言が多く残っています。質問内容や意図を読み取る上ではノイズにしかなりませんので、自身の質問に関係のある文章（およびソースコード）のみ残すか、きちんと残りのテンプレート部分を埋めてください。

m.ts10806

2018/08/14 21:22

また実際のコードを提示してください。再現確認がとれないと的確な回答にはなりません。「ネットで色々調べてみた」結果「試したこと」を記載してください。

行動規範の内容に同意します

回答3件

mainタグが認識されない

とはどういうことでしょうか？

ローカルに保存したhtmlのmainタグ内に記述した内容が表示されないということでしょうか
サーバにアップロードしたhtmlのmainタグ内に記述した内容が表示されないということでしょうか
mainタグにデフォルトでかかるはずのcssが効いていないということでしょうか
mainタグを認識して発火するスクリプトが動作しないということでしょうか
mainタグ内のものは表示されるのに，mainタグだけが開発者ツール上で確認できないということでしょうか

⋮

具体的に教えてください

またMacなので，ブラウザはIEではないと思われますが，
使用しているブラウザは何でしょうか？

Web開発においては，これも重要な情報です
（ブラウザ固有のバグ・仕様に悩まされることはよくあるため）

一応，開発者ツールについて，いくつかリンクを張っておきます．

こんなのが開発者ツール（↓のgifはWindowsのFirefox）

質問の仕方について

要旨を伝えやすくするため，いらない文章は削除してください
状況確認のため，何をして，どうダメだったのか具体的に書いてください
状況確認のため，作業を行ったOS・ブラウザ等について詳しく書いてください
状況確認のため，実際に書いたコードやその構成を示してください

質問文はMarkdown記法が使えます．読みやすい文章にするため，積極的に活用してください

投稿2018/08/14 16:03

liveasnotes

総合スコア1284

ベストアンサー

下記をお使いであれば、main要素が無いので色はかわりません。

【mi 用 HTML5 モード | らぶらぶはぁと】
https://loveloveheart.com/mac/mi-html5-mode

HTML5 の W3C Working Draft 29 March 2012 に基づいた内容を収録しています

投稿2018/08/15 05:37

kei344

総合スコア69407

退会済みユーザー

2018/08/15 05:58 編集

色が変わらない場合でも、<main></main>タグとして機能してもらえるのでしょうか？機能しない場合はmain要素を入れることはできるのでしょうか？

kei344

2018/08/15 07:44

> タグとして機能ブラウザでの表示、という意味であれば大丈夫です。mi はあくまでただのテキストエディタなので、そこで色が変わるかかわらないかはブラウザでの表示と関係がありません。 > main要素を入れることは mi 用の拡張機能が自由に作れるようなので、ご自身で作成されれば作れるかもしれませんが、もともと最新のHTMLに対応したエディタを探されるほうが早いと思います。

退会済みユーザー

2018/08/15 12:34

初心者の初歩的な質問ですみませんでした。ありがとうございます。

行動規範の内容に同意します

どのブラウザで見ているのかにもよると思うのですが
IEなどのブラウザだとmainタグが認識されず要素がインライン要素になるようです
手っ取り早い解決策はmainタグにdisplayをブロック要素にするか、
もしくはmainタグの使用をやめるかでしょうか
参考url
https://qiita.com/NoxGit/items/df9d79d6fd3f1bf3a944

追記
ブラウザによってデフォルトの挙動が違うので
(デフォルトでかかっているcssが違う)
それを統一するcssが配布されているのでそれを使うといいかもです。
https://kumaweb-d.com/web/reset-css/
mainタグのデフォルトが対応しているどうかはちょっとわからないですが...
マニアックではないタグはこれで統一できるかと

投稿2018/08/14 15:24

編集2018/08/14 15:52