Muhammad Sufiyan's Blog

Week 4: Advanced HTML Markups

Muhammad Sufiyan's photo
Muhammad Sufiyan
·

3 min read

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:

  1. Block-Level and Inline Elements

  2. The <div> Element

  3. The <span> Element

  4. HTML Comments

  5. The id Attribute

  6. The class Attribute

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 id attribute provides a unique identifier for an HTML element.

  • It is used to apply styles with CSS or to target elements with JavaScript.

  • Each id value must be unique within a document.

Example:

<p id="unique-paragraph">This paragraph has a unique ID.</p>

6. The class Attribute

  • The class attribute provides a way to classify elements into groups.

  • Multiple elements can share the same class, allowing for shared styles or behaviors.

  • Unlike id, class names 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.

HTML5saylanismit