Table of Contents
Semantic Tags
HTML5 introduced several new semantic elements that make your code more readable and accessible:
<article>- Defines an autonomous content area.<aside>- Represents content tangentially related to the content around it.<footer>- Defines a footer for a document or section.<header>- Represents introductory content or a set of navigational links.
Responsive Design
Use media queries to make your web pages look great on all devices! Here’s a basic example:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}Forms and Inputs
HTML5 forms support several new input types and attributes that enhance user experience:
type="email"- Validates the input to ensure it is an email format.type="date"- Provides a date picker for easier input.required- Ensures the input must be filled out before submission.
Using SVGs
SVGs are scalable and suit any screen resolution. Here’s how you can include them:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black"
stroke-width="3" fill="green" />
</svg>Enjoy creating high-quality graphics that look sharp on any device!