Exam Help - Improved Styling with CSS

Language Help HTML
,
1

I’ve been going through the Web Development course and so far it’s been pretty good. But I’m stuck at this question:

The HTML document below contains the markup for a daily newspaper for pets. Update the document to implement web design best practices by properly differentiating between the newspaper’s title, article headers, and subheaders. This will give the website the correct visual hierarchy for each text.

The code is:

The Daily Meow

Urban Cats End Metro City's Rodent Problem

Making the city cleaner one meal at a time

Lion leopard siberian donskoy egyptian mau. British shorthair cougar or malkin bombay but tom. American bobtail norwegian forest, for ocelot cougar for panther singapura for ocicat. Tomcat. Ocicat. Tomcat cougar, american shorthair. Russian blue birman. Birman jaguar. Malkin.

Op Ed: In Defense of Belly Rubs

Not for every cat, but certainly worth a try.

Tiger bombay balinese panther tabby kitten tiger. Singapura siberian for burmese for lynx or american bobtail or kitty. Jaguar savannah. Tiger lion yet balinese munchkin abyssinian but cornish rex, jaguar. Grimalkin tom. Bombay munchkin. Ocicat lynx, lion maine coon. American shorthair. Mouser. Tom persian. Sphynx. Birman munchkin bobcat tom.



The problem is, I find the question extremely vague. I have no idea what exactly I’m supposed to do. I know I’m meant to use an article tag, but don’t know what other tags I am to use.

Also, when I ran the code the first time and got it wrong, it told me “Did you update the paragraph element containing the page title to be an <h1> element?” and I am at a loss. Is the page title (Urban Cats) not already an h1? I don’t see a <p> title anywhere!

Someone please help me here! I hope I’m allowed to ask for help on the exam, as there is no built-in system for assistance.

1 Like
2

You can imagine the structure of every article as a kind of tree. In the tech world, trees are often represented, in text form, as left-aligned lists where each time an element is embedded inside another, we add it as a new sub-list. That sounds vague, so here’s an example:

Web Page (for an article)
 - html
    - head
    - body
      - header
        - nav
          - about page
          - blog
      - main
        - article
          - h1 (article title)
            - h2 (sub-title)
              - p (paragraphs)
            - h2
             - p
      - footer
        - p

In code, that might look like:

<html>
    <head>

    </head>
    <body>
        <header>
            <nav>
                <a href="about">about</a>
                <a href="blog">blog</a>
            </nav>
        </header>
        <main>
            <article>
                <h1>cats: are they solid or liquid?</h1>

                <h2>the liquid believers</h2>
                <p>they can fit through anything</p>

                <h2>the solid camp</h2>
                <p>they are walking chonks</p>
            </article>
        </main>
        <footer>
            <p>made with love</p>
        </footer>
    </body>
</html>

So you can try imagining this article as a tree, and then ask what each tree element should be called and where it should sit in the tree. The website is called the Daily Meow, but that’s not the title of the page. h1’s are typically reserved for page titles, so it should be in the header. That means the next section, or the “meat” of the page, is going to be in the main section. The title of the page is " Urban Cats End Metro City’s Rodent Problem", so it should be an h1. The first sub-title is “Making the city cleaner one meal at a time”. As it is one step down from the page title, it should be an h2. And so on.

3

Hi javaace, thank you so much for taking the time to respond.

However, I am still confused at why it is prompting me to change the page title from a paragraph element to an <h1>. The page title (Urban Cats) is already an <h1>, not a <p>, so why is it telling me that?

4

Can you show me what your code looks like? Or what you are looking at? It’s difficult to assist without seeing that.

5

!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>

<body>
<h6 id="title">The Daily Meow</h6>

<h1 id="urbanCats">Urban Cats End Metro City's Rodent Problem</h1>
<h4 id="urbanCatsSubheader">Making the city cleaner one meal at a time</h4>

<p>Lion leopard siberian donskoy egyptian mau. British shorthair cougar or malkin bombay but tom. American bobtail norwegian forest, for ocelot cougar for panther singapura for ocicat. Tomcat. Ocicat. Tomcat cougar, american shorthair. Russian blue birman. Birman jaguar. Malkin.</p>

<h4 id="opEd">Op Ed: In Defense of Belly Rubs</h4>
<h6 id="opEdSubheader">Not for every cat, but certainly worth a try.</h6>

<p>Tiger bombay balinese panther tabby kitten tiger. Singapura siberian for burmese for lynx or american bobtail or kitty. Jaguar savannah. Tiger lion yet balinese munchkin abyssinian but cornish rex, jaguar. Grimalkin tom. Bombay munchkin. Ocicat lynx, lion maine coon. American shorthair. Mouser. Tom persian. Sphynx. Birman munchkin bobcat tom.</p>

</body>

</html>

(indents mine for visual clarity.)

6

Was the page title originally an h6? Or did you make it an h6? Also, it’s looking like they want “The Daily Meow” to be the h1 for the page.

1 Like
7

All of that is the default code.

You were right, thank you. They did want the daily meow to be the h1, and the article headers “urban cats” to be h2s, and below to be h3s, and so on.

I ran out of tries but I will reattempt and update what else needed changing.

The fact that they said it was a paragraph element- despite it being an h6- was very confusing. I hope they correct this soon.