Elements: Understanding div and section tags

on
Photo by Maik Jonietz on Unsplash

<div> tag can be used for

  • Grouping elements together. 
  • Is a container for content.

<section> tag can be used for

  • This is a good choice to include in web-pages as it helps HTML content have more meaning.

Exercise #1:

  1. Type in QWERTY There is a particular size size.
  2. Type in <p> QWERTY<p> and the result of size will change.

Syntax VS Semantic

  • Syntax is the rules of what something will have. 
  • Semantic is the logical flow and conceptual meaning.
Syntax is a clear rule and procedure/pattern, while semantic - interpret.

Exercise #2 / <section> + <article> element

<section class="cta"></section>
<section class="slider"></section>
<section class="weather-forecast"></section>
<h1>Weather forecast for London</h1>
<article class="day-forecast">
<h2>11 April 2023</h3>
<p>Sunny</p>
</article>
<article class="day-forecast">
<h2>12 April 2023</h3>
<p>Cloudy</p>
</article>
<article class="day-forecast">
<h2>13 April 2023</h3>
<p>Periods of rain</p>
</article>
</section>

<article> tag is used for

The article is a block because it takes available space. Block is like a house owner that will not allow anyone to rent or live in the house except her. In comparison inline elements are more kind and shares their space.

**IMPORTANT** There is no 100% strict rule on how to write all the code. Understand the basics and then you will gradually understand how tags works.

Alright, I'm going to make a coffee after this session.



Comments

Post a Comment