If you open a Wikipedia page, you’ll notice it’s not just one endless wall of text. It’s divided into sections. “Early life,” “Acting career,” “Music career,” “Public image.” Each of those is a division of content.
That’s exactly what <div> is in HTML. The name stands for division. It’s a way to take related elements and put them into one block.
For example, instead of leaving “Early Life” floating with its own heading, paragraphs, and image, we can wrap it all inside a <div>:
<div>
<h2 id="early-life">Early Life</h2>
<p>She was born in <abbr title="The largest city in the United States">New York City</abbr> and grew up with a strong interest in performing from a young age.</p>
<p>With support from her family, she auditioned for roles as a child and appeared in early film and theater projects.</p>
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Lee_Strasberg_Institute_115_East_15th_Street.jpg/800px-Lee_Strasberg_Institute_115_East_15th_Street.jpg"
width="300"
alt="Lee Strasberg Theatre and Film Institute building in New York City"
/>
<figcaption>The Lee Strasberg Theatre and Film Institute, where Johansson learned to act as a child</figcaption>
</figure>
</div>Right now, it won’t look any different in the browser. But you’ve created a clear division in your code.
That matters later, when you start applying CSS. You’ll be able to style the entire “Early Life” block in one go, instead of targeting each piece separately.
Styling Div
Right now the <div> is invisible. To prove it’s really wrapping our content, let’s add the smallest bit of CSS. We always write CSS inside a <style> tag.
<style>
div {
background-color: lightyellow;
}
</style>Output
This means: for every <div> on the page, apply the following style inside the { } — in this case, give it a light yellow background.
Now when you reload the page, the “Early Life” section will stand out.
You’ll learn CSS in detail later. For now, this is just to show that <div> really creates divisions.
Assignment
Right now, only the Early Life section is inside a <div>. Your job is to organize the rest of the page by grouping related parts into their own <div> blocks.
Solution
<h1>Scarlett Johansson</h1>
<a href="#early-life">Early Life</a>
<a href="#acting-career">Acting Career</a>
<hr/>
<p><abbr title="American actress and singer">Scarlett Ingrid Johansson</abbr> (/dʒoʊˈhænsən/; born November 22, 1984) is an American actress and singer.</p>
<p><a href="https://en.wikipedia.org/wiki/Scarlett_Johansson_filmography">
Her films
</a>
as a leading actress have grossed over $15.1 billion worldwide, making her the <a href="https://en.wikipedia.org/wiki/List_of_highest-grossing_actors">
highest-grossing lead actor in history
</a>.</p>
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Scarlett_Johansson-8588.jpg/800px-Scarlett_Johansson-8588.jpg"
width="250"
height="auto"
alt="Scarlett Johansson at an event"
/>
<figcaption>Johansson in 2025</figcaption>
</figure>
<!-- Early Life -->
<div>
<h2 id="early-life">Early Life</h2>
<hr />
<p>She was born in <abbr title = "The largest city in the United States.">New York City</abbr> and grew up with a strong interest in performing from a young age.</p>
<p>With support from her family, she auditioned for roles as a child and appeared in early film and theater projects.</p>
<figure>
<a href="https://en.wikipedia.org/wiki/Lee_Strasberg_Theatre_and_Film_Institute" target="_blank">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Lee_Strasberg_Institute_115_East_15th_Street.jpg/800px-Lee_Strasberg_Institute_115_East_15th_Street.jpg"
width="300"
height="auto"
alt="Lee Strasberg Theatre and Film Institute building in New York City"
/>
</a>
<figcaption>The Lee Strasberg Theatre and Film Institute, where Johansson learned to act as a child</figcaption>
</figure>
</div>
<!-- Acting Career -->
<div>
<h2 id="acting-career">Acting Career</h2>
<hr />
<p>She began acting as a child and appeared in several minor roles before her breakout.</p>
<p>She became widely known for performances in Lost in Translation and Girl with a Pearl Earring.</p>
<h3>1994–2002: Early work and breakthrough</h3>
<p>She appeared in several films as a child actress and gained attention with The Horse Whisperer.</p>
<p>Her breakout role came with Ghost World, where she was praised for her performance.</p>
<h3>2003–2004: Transition to adult roles</h3>
<p>She moved into more mature roles and gained critical acclaim for Lost in Translation.</p>
<p>That same year, she also starred in Girl with a Pearl Earring, which further raised her profile.</p>
<figure>
<img
src="images/transition.jpg"
width="250"
height="auto"
alt="Scarlett Transition"
/>
<figcaption>Johansson attending the premiere of Girl with a Pearl Earring at the 2003 Toronto International Film Festival</figcaption>
</figure>
<h3>2005–2009: Collaborations with Woody Allen</h3>
<p>During this time, she appeared in multiple films directed by Woody Allen, including Match Point and Scoop.</p>
<p>These roles showcased her versatility and expanded her reputation in the industry.</p>
<figure>
<img
src="images/campus.jpg"
width="250"
height="auto"
alt="Scarlett Johansson during her 2005–2009 collaborations"
/>
<figcaption>Johansson on the campus of Columbia University during the filming of The Nanny Diaries, 2006</figcaption>
</figure>
<h3>2010–2014: Marvel Cinematic Universe and worldwide recognition</h3>
<p>She was introduced as Natasha Romanoff, also known as Black Widow, in Iron Man 2.</p>
<p>This role became a defining part of her career and brought her worldwide recognition.</p>
<h3>2015–2020: Blockbuster films and critical acclaim</h3>
<p>She continued as Black Widow in multiple Marvel films, while also taking on independent projects.</p>
<p>Her performance in Marriage Story earned her major award nominations and critical praise.</p>
<h3>2021–present: Black Widow lawsuit and professional expansion</h3>
<p>She starred in the solo Black Widow film, released in 2021.</p>
<p>She later filed a lawsuit regarding the film’s release, while also expanding her work as a producer.</p>
</div>
<!-- Music Career -->
<div>
<h2>Music Career</h2>
<hr />
<p>She has released music projects and collaborated with other artists.</p>
<p>While acting is her primary work, music has been another creative outlet.</p>
</div>
<!-- Public Image -->
<div>
<h2>Public Image</h2>
<hr />
<p>She is noted for versatility across different genres and styles.</p>
<p>Public and media discussions often highlight her longevity and influence in contemporary film.</p>
</div>
<!-- See Also -->
<div>
<h2>See also</h2>
<hr/>
<ul>
<li>List of actors with Academy Award nominations</li>
<li>
List of actors with two or more Academy Award nominations in acting
categories
</li>
<li>List of actors nominated for two Academy Awards in the same year</li>
</ul>
</div>
<!-- Notes -->
<div>
<h2>Notes</h2>
<hr />
<ol type="a">
<li>Johansson was nominated for Best Actress in a Motion Picture Comedy or Musical for Lost in Translation and Best Actress in a Drama for Girl with a Pearl Earring.</li>
<li>Johansson was nominated for Teen Choice Awards for Choice Movie Actress: Sci-Fi/Fantasy and Choice Summer Movie Star Female, and People’s Choice Awards for Favorite Movie Actress, Favorite On-Screen Chemistry (shared with Jeremy Renner), and Favorite Face of Heroism.</li>
<li>After Candice Bergen, Drew Barrymore, and former cast member Tina Fey.</li>
<li>Created during the COVID-19 pandemic with closed theaters, it was a premium add-on that let Disney+ subscribers watch new content locked behind a paywall.</li>
</ol>
</div>
<!-- References -->
<div>
<h2>References</h2>
<hr />
<ol>
<li>“Does Scarlett Johansson Remember Her Lines From The Most Famous Films?”. British Vogue. Retrieved August 15, 2023.</li>
<li>“Scarlett Johansson”. British Film Institute. Retrieved May 7, 2019.</li>
<li>“La monogamia es antinatural”. El País. February 9, 2006.</li>
</ol>
</div>
<!-- Movies -->
<div>
<h2>Movies</h2>
<hr />
<ol type="A">
<li>Lost in Translation</li>
<li>Girl with a Pearl Earring</li>
<li>Lucy</li>
</ol>
</div>
<!-- Table -->
<div>
<table border="1">
<!-- Header -->
<thead>
<tr>
<th colspan="2">Scarlett Johansson</th>
</tr>
</thead>
<!-- Body -->
<tbody>
<tr>
<td rowspan="3">Born</td>
<td>Scarlett Ingrid Johansson</td>
</tr>
<tr>
<td>November 22, 1984 (age 40)</td>
</tr>
<tr>
<td>New York City, U.S.</td>
</tr>
<tr>
<td rowspan="2">Citizenship</td>
<td>United States</td>
</tr>
<tr>
<td>Denmark</td>
</tr>
<tr>
<td>Occupations</td>
<td>Actress · Singer</td>
</tr>
<tr>
<td>Years active</td>
<td>1994–present</td>
</tr>
<tr>
<td>Works</td>
<td>Performances · Discography</td>
</tr>
</tbody>
<!-- Footer -->
<tfoot>
<tr>
<td colspan="2">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Scarlett_Johansson%27s_signature.svg/1920px-Scarlett_Johansson%27s_signature.svg.png"
alt="Scarlett Johansson's signature"
width="150"
/>
</td>
</tr>
</tfoot>
</table>
</div>
<!-- Forms -->
<div>
<h2>Form</h2>
<form>
<input type="text" placeholder="Search Wikipedia">
<input type="submit" value="Search">
<input type="radio" name="text-size" value="small"> Small <br>
<input type="radio" name="text-size" value="standard" checked> Standard <br>
<input type="radio" name="text-size" value="large"> Large <br>
<p><strong>Color (beta)</strong></p>
<input type="radio" name="color" value="auto"> Automatic <br>
<input type="radio" name="color" value="light"> Light <br>
<input type="radio" name="color" value="dark"> Dark<br>
<p><strong>Choose a movie genre:</strong></p>
<select name="genre">
<option>Action</option>
<option>Drama</option>
<option>Comedy</option>
<option>Science Fiction</option>
</select>
</form>
<form>
<input type="text" placeholder="Enter your name">
<input type="submit" value="Submit">
<p><strong>Select your country:</strong></p>
<select name="country">
<option>United States</option>
<option>India</option>
<option>United Kingdom</option>
</select>
</form>
</div>
<!-- CSS -->
<style>
div {
background-color: lightyellow;
}
</style>⬅️ Previous Lesson Next Lesson ➡️