Task 4 : HTML Semantics

[yogeshtakeo]

Task 4: HTML Semantics

Objective:

Apply HTML semantics in real world

Task Overview

• Understand the importance of HTML semantics in web development.
• Apply CSS styling to the HTML component using inline styles. (optional)

Task Details

Read an article about the importance of HTML semantics in web development. HTML Semantics Link

Implement HTML semantics:

1. Inside the index.html, use HTML semantics to structure the content.
2. Add semantic HTML tags such as<header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> to represent different sections of the component's content.
3. Place some placeholder content within each semantic tag (e.g., headings, paragraphs, and lists).
4. Apply CSS styling with inline styles: (optional)

This will be useful in the future to use inline styles in React JSX to apply CSS styling to the semantic components. . Optional : Experiment with different CSS properties such as background-color, color, font-size, padding, margin, and border.

Render the Semantic components:

1. Import and render the Semantic component in another component
2. Verify that the Semantic components are rendered correctly and the CSS styles are applied through the inspect panel.(optional)

Test and refine the styling:

• Open your project in a web browser and inspect the rendered semantic components.
• Adjust the CSS styles and properties as needed to achieve the desired visual appearance. (optional)
• Refresh the browser to see the updated styles.

Task Submission

Take a screenshot of the rendered semantic components in the browser. Share the screenshot of the output and the code that you have written in the issue comment box. Don't forget to mention GitHub URL and your name in the comment section.

[Oshinacharya1]

[Nikhil5918]

[komalallaparthi]

[komalallaparthi]

[Nikhil5918]

[Nikhil5918]