Online Training
Q4 2024
Nov 19 to Dec 10
11.00 AM EST: USA, UK, Canada, Mexico and Europe
06.00 AM GMT: MiddleEast, Asia and Australia
Semantic HTML helps make web pages easier to understand by giving meaning to the HTML elements we use. Before Semantic HTML, elements like <div> were used for everything, which didn't convey much information about what the content inside was for. With Semantic HTML, we use specific elements like <header>, <footer>, and <article> that tell both developers and browsers exactly what each part of the page is for.
<!-- Non-Semantic HTML -->
<div id="footer">
<p>This is the footer</p>
</div>
<!-- Semantic HTML -->
<footer>
<p>This is the footer</p>
</footer>
Semantic HTML gives us elements that describe their purpose or position. For instance, <header> is used for the top part of the page where you might find a logo or navigation links. <nav> is used for navigation links and can be found in <header> or <footer>. <main> is where the main content goes, and <footer> is for the bottom section of the page.
<!-- Video Tag -->
<video src="4kvideo.mp4">Video not supported</video>
<!-- Audio Tag -->
<audio src="music.mp3"></audio>
<!-- Embed Tag -->
<embed src="image.gif"/>
With Semantic HTML, you can add different types of media to your web pages using <video>, <audio>, and <embed> tags. <video> is for video files, <audio> is for audio files, and <embed> can be used for various media types. These elements all use the 'src' attribute to link to the media file. Note that <video> and <audio> need closing tags, while <embed> is self-closing.
<figure>
<img src="keyboard.jpg" alt="QWERTY keyboard">
<figcaption>An image showing the layout of a QWERTY keyboard.</figcaption>
</figure>
The <figure> element groups together media like images or diagrams with a description. The <figcaption> element provides a caption for the media within <figure>. This is useful for organizing content and ensuring that the description moves with the media if its position changes.
<section>
<h2>Popular American Sports Leagues</h2>
<article>
<p>The NBA is one of the top sports leagues in the US.</p>
</article>
</section>
The <section> tag is used to define a section of a document, such as a chapter or a group of related content. The <article> tag is used for self-contained content like a news article or blog post. Typically, <section> helps to organize content into themes, while <article> provides independent pieces of content.
<article>
<!-- Main Content Goes Here -->
</article>
<aside>
<!-- Additional Information or Sidebar Content -->
</aside>
The <aside> tag is used for additional information that complements the main content but isn't essential for understanding it. It's often used for sidebars or extra notes that provide useful context without interrupting the main content. For example, a sidebar next to an article might contain related links or advertisements.
Favourites
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now
Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.
ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now!
Java
HTML and CSS 
Python
Javascript
Troubleshooting
Blogs
Learn
Tools