Kursus Membuat Web

iklan

HTML 5 Tag <main> atau Element <main>

Tag <main> atau element <main> harus merupakan bagian utama dari isi dokumen atau aplikasi.

Pengertian dan Penggunaan Tag <main> atau Element <main>

Isi didalam tag <main> atau element <main> harus dokumen yang unik.

Seharusnya tidak berisi dokumen yang isinya berulang seperti sidebar, link navigasi, informasi copyright, logo situs, dan form pencarian.

Dalam satu dokumen tidak boleh ada lebih dari satu tag <main> atau element <main>.

Tag <main> atau element <main> tidak boleh menjadi anak dari element <article>, <aside>, <footer>, <header> atau <nav>.

Contoh Code Penggunaan Tag <main> atau Element <main>

Pada contoh berikut, kita melihat ada 2 artikel tentang apple (ini adalah topik utama dari halaman web ini), maka topik utama ini akan kita letakkan dalam tag <main> atau element <main>.

Contoh Code Penggunaan Tag <main> atau Element <main>
<!doctype html>
<html lang="id">
	<head>
   		<title>Contoh Penggunaan Tag main</title>
   		<meta charset="UTF-8">
  	</head>
  	<body>
	  	<!-- other content -->

		<main>
			<h1>Apples</h1>
		 	<p>The apple is the pomaceous fruit of the apple tree.</p>

		 	<article>
		 		<h2>Red Delicious</h2>
		  		<p>These bright red apples are the most common found in many supermarkets.</p>
				<p>... </p>
				<p>... </p>
		  	</article>

			<article>
				<h2>Granny Smith</h2>
				<p>These juicy, green apples make a great filling for apple pies.</p>
				<p>... </p>
				<p>... </p>
			</article>
		</main>

		<!-- other content -->
  </body>
</html>

Berikut adalah program kelulusan yang menjadi isi utama website ini yang akan diletakkan pada tag <main> atau element <main>, Perhatikan dalam contoh ini tag <main> atau elemen <main> berisi elemen <nav> yang terdiri dari link ke sub bagian dari isi utama.

Contoh Code Penggunaan Tag <main> atau Element <main>
<!DOCTYPE html>
<html lang="id">
	<head>
		<title>Graduation Ceremony Summer 2022</title>
		<meta charset="utf-8">
	</head>
<body>

	<header>The Lawson Academy:
		<nav>
			<ul>
			<li><a href="courses.html">Courses</a></li>
			<li><a href="fees.html">Fees</a></li>
			<li><a>Graduation</a></li>
			</ul>
		</nav> 
	</header>

	<main>

	<h1>Graduation</h1>

	<nav>
		<ul>
			<li><a href="#ceremony">Ceremony</a></li>
			<li><a href="#graduates">Graduates</a></li>
			<li><a href="#awards">Awards</a></li>
		</ul>
	</nav>

	<H2 id="ceremony">Ceremony</H2>
	<p>Opening Procession</p>
	<p>Speech by Valedictorian</p>
	<p>Speech by Class President</p>
	<p>Presentation of Diplomas</p>
	<p>Closing Speech by Headmaster</p>

	<h2 id="graduates">Graduates</h2>
	<ul>
		<li>Clara Faulkner</li>
		<li>Anastasia Luccio</li>
		<li>Ebenezar McCoy</li>
		<li>Karrin Murphy</li>
		<li>Eloisa Faulkner</li>
		<li>Susan Rodriguez</li>
	</ul>

	<h2 id="awards">Awards</h2>
	<ul>
		<li>Clara Faulkner</li>
		<li>Eloisa Faulkner</li>
		<li>Karrin Murphy</li>
		<li>Susan Rodriguez</li>
	</ul>

	</main>


<footer> Copyright 2012 B.lawson</footer>

</body>
</html>
Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015