In: Computer Science
Explain HTML Semantics with example Programs(atleast 5-10 programs with clear explanation )
1. Section
<html>
<body>
<h2>Section Tag Example</h2>
<section>
<h1>fast Food</h1>
<p>Consuming junk food could deteriorate your memory. Higher
intake of high fat and high sugar foods can slow down the speed of
learning, memory and attention.</p>
</section>
<section>
<h1>Home Made Food</h1>
<p>Homemade food is the best health well food. Preparing food
at home, we can control the cleanness, healthiness, freshness of
the meal. Many people do not care about preparing and eating at
home because they have not taken the time to understand the
benefits of eating homemade food.</p>
</section>
</body>
</html>
OUTPUT:
2. Article
<html>
<body>
<h1>The article element</h1>
<article>
<h2>Computer Engineering</h2>
<p>Computer engineering is the branch of engineering that
integrates electronic engineering with computer sciences. Computer
engineers design and develop computer systems and other
technological devices.</p>
</article>
<article>
<h2>Mechanical Engineering</h2>
<p>Mechanical engineering is the study, design, development,
construction, and testing of mechanical and thermal sensors and
devices, including tools, engines, and machines.</p>
</article>
<article>
<h2>Electrical Engineering</h2>
<p>Electrical engineering is an engineering discipline
concerned with the study, design and application of equipment,
devices and systems which use electricity, electronics, and
electromagnetism.</p>
</article>
</body>
</html>
OUTPUT:
3. Header
<html>
<body>
<header>
<h1>---Sports---</h1>
<p>Football</p>
</header>
<p>Charles was a natural footballer who quickly picked up the
arts of the game. The football association was being formed at the
time. </p>
</body>
</html>
OUTPUT:
4. Footer
<html>
<body>
<h1>Fast Food</h1>
<p>Most fast food, including drinks and sides, are loaded
with carbohydrates with little to no fiber.</p>
<p>When your digestive system breaks down these foods, the carbs are released as glucose (sugar) into your bloodstream. As a result, your blood sugar increases.</p>
<p>Your pancreas responds to the surge in glucose by releasing insulin. Insulin transports sugar throughout your body to cells that need it for energy. As your body uses or stores the sugar, your blood sugar returns to normal.</p>
<p>This blood sugar process is highly regulated by your body, and as long as you’re healthy, your organs can properly handle these sugar spikes.</p>
<p>But frequently eating high amounts of carbs can lead to repeated spikes in your blood sugar.</p>
<p>Over time, these insulin spikes may cause your body’s normal insulin response to falter. This increases your risk for insulin resistance, type 2 diabetes, and weight gain.
Sugar and fat</p>
<p>Many fast-food meals have added sugar. Not only does that
mean extra calories, but also little nutrition. The American Heart
Association (AHA) suggests only eating 100 to 150 calories of added
sugar per day. That’s about six to nine teaspoons.</p>
<p> fast-food drinks alone hold well over 12 ounces. A
12-ounce can of soda contains 8 teaspoons of sugar. That equals 140
calories, 39 grams of sugar, and nothing else.</p>
<footer>
<p>Writer: John</p>
<p><a
href="mailto:[email protected]">[email protected]</a></p>
</footer>
</body>
</html>
OUPUT:
5. navigation
<html>
<body>
<h2>Navigation Element</h2>
<nav>
<a
href="https://www.google.com/">Google</a> <br>
<a
href="https://www.hotstar.com">Hotstar</a>
<br>
<a
href="https://www.Youtube.com">Youtube</a>
<br>
<a
href="https://www.Instagram.com">Instagram</a>
</nav>
</body>
</html>
OUTPUT:
6. figure
<html>
<body>
<h3>Eiffel Tower</h3>
<figure>
<img src="e.jpg" style="width:30%">
<figcaption>The Eiffel Tower has been a powerful and
distinctive symbol of the city of Paris, and by extension, of
France.</figcaption>
</figure>
</body>
</html>
OUTPUT:
7. Mark
<html>
<body>
<p>Do not forgot to <mark>sign</mark> Assignment.</p>
</body>
</html>
OUTPUT:
8. summary
<html>
<body>
<h1> Summary element</h1>
<details>
<summary>Summary </summary>
<p>The summary tag defines a visible heading for the details
element. The heading can be clicked to view/hide the
details.</p>
</details>
</body>
</html>
OUTPUT:
9. time
<html>
<body>
<h1>The time element</h1>
<p>Bakery Shop opens at <time>7:00Am</time> to <time>8:00Pm</time> everyday.</p>
</body>
</html>
OUTPUT:
PLEASE DO UPVOTE IF FOUND USEFUL.