Week 4: Advanced HTML Markups
As a former 3D Animator with more than 12 years of experience, I have always been fascinated by the intersection of technology and creativity. That's why I recently shifted my career towards MERN stack development and software engineering, where I have been serving since 2021.
With my background in 3D animation, I bring a unique perspective to software development, combining creativity and technical expertise to build innovative and visually engaging applications. I have a passion for learning and staying up-to-date with the latest technologies and best practices, and I enjoy collaborating with cross-functional teams to solve complex problems and create seamless user experiences.
In my current role as a MERN stack developer, I have been responsible for developing and implementing web applications using MongoDB, Express, React, and Node.js. I have also gained experience in Agile development methodologies, version control with Git, and cloud-based deployment using platforms like Heroku and AWS.
I am committed to delivering high-quality work that meets the needs of both clients and end-users, and I am always seeking new challenges and opportunities to grow both personally and professionally.
In the fourth week of our HTML course, we delved into the advanced markups. This week, we covered a range of topics that help structure and style web pages more effectively. Below is a detailed documentation of the topics covered and the key concepts learned.
Topics Covered:
Block-Level and Inline Elements
The
<div>ElementThe
<span>ElementHTML Comments
The
idAttributeThe
classAttribute
1. Block-Level and Inline Elements
Block-Level Elements:
Block-level elements start on a new line and take up the full width available.
Examples include
<div>,<h1> - <h6>,<p>,<ul>,<li>,<table>, and<form>.These elements are used to structure the main sections of a document.
Example:
<div>
<h1>This is a block-level element</h1>
<p>This is another block-level element</p>
</div>
Inline Elements:
Inline elements do not start on a new line and only take up as much width as necessary.
Examples include
<span>,<a>,<img>,<strong>, and<em>.These elements are used to style parts of the content within block-level elements.
Example:
<p>This is a paragraph with an <a href="#">inline link</a> and <em>inline emphasis</em>.</p>
2. The <div> Element
The
<div>element is a block-level container used to group other elements for styling and layout purposes.It doesn't provide any semantic meaning but is useful for applying CSS styles and organizing content.
Example:
<div class="container">
<h2>Section Title</h2>
<p>Content within a div element.</p>
</div>
3. The <span> Element
The
<span>element is an inline container used to group text or other inline elements for styling purposes.Like
<div>, it doesn't provide any semantic meaning.
Example:
<p>This is a <span class="highlight">highlighted text</span> within a paragraph.</p>
4. HTML Comments
Comments in HTML are used to leave notes or explanations within the code that are not displayed in the browser.
Comments are written between
<!--and-->.
Example:
<!-- This is an HTML comment -->
<p>This paragraph contains a comment above it.</p>
5. The id Attribute
The
idattribute provides a unique identifier for an HTML element.It is used to apply styles with CSS or to target elements with JavaScript.
Each
idvalue must be unique within a document.
Example:
<p id="unique-paragraph">This paragraph has a unique ID.</p>
6. The class Attribute
The
classattribute provides a way to classify elements into groups.Multiple elements can share the same class, allowing for shared styles or behaviors.
Unlike
id,classnames can be reused across multiple elements.
Example:
<p class="text-primary">This is a primary text paragraph.</p>
<p class="text-primary">This is another primary text paragraph.</p>
This week's lessons provided students with the knowledge to create more structured and visually appealing web pages using advanced HTML markups. By practicing these concepts through assignments, students enhanced their HTML skills and prepared for more complex web development tasks.