Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Build a Simple Website Text Editors and HTML Finishing the HTML

Posted by Joan Nyberg
Joan Nyberg
246 Points

H1 appearing as linked text

What am I doing wrong? The H1 is appearing as linked text. <div id="intro" class="grid_9"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a></p> </div>

13 Answers

Jordan Clarke
Jordan Clarke
23,464 Points
Jordan Clarke
Jordan Clarke
23,464 Points

Hi Joan.

Can you wrap your code with 3 backticks (```) on the line before and after like this:

        ```
        <p>This is code!</p>
        ```

Then we can see what might be wrong.

Juan Jose Cortes Guzman
Juan Jose Cortes Guzman
7,894 Points
Juan Jose Cortes Guzman
Juan Jose Cortes Guzman
7,894 Points

Alright, the problem is in the unordered list, you have this code:

<ul class=nav> 
    <li><a href="#">About</<a></li> 
    <li><a href="#">Cupcakes &amp; Prices</<a></li> 
    <li><a href="#">Locations</<a></li> 
    <li class="last"><a href="#">Contact Us</<a></li> 
    </ul>

The a tags weren't closed properly, check against the following code:

<ul class=nav> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Cupcakes &amp; Prices</a></li> 
    <li><a href="#">Locations</a></li> 
    <li class="last"><a href="#">Contact Us</a></li> 
    </ul>

Replace the </<a> with </a> at the end of each list item, and that should fix the problem.

Juan Jose Cortes Guzman
Juan Jose Cortes Guzman
7,894 Points
Juan Jose Cortes Guzman
Juan Jose Cortes Guzman
7,894 Points

What's the code you're using? Make sure the text is not surrounded by <a></a> tags.

Joan Nyberg
Joan Nyberg
246 Points
Joan Nyberg
Joan Nyberg
246 Points

<h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1>

ie, h1 in angle brackets followed by the text and ending with a /h1 in angle brackets.

Joan Nyberg
Joan Nyberg
246 Points
Joan Nyberg
Joan Nyberg
246 Points

<h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1>

ie, h1 in angle brackets followed by the text and ending with a /h1 in angle brackets.

Joan Nyberg
Joan Nyberg
246 Points
Joan Nyberg
Joan Nyberg
246 Points

Thanks. Here is what I have: <div id="intro" class="grid_9"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a></p> </div>

Juan Jose Cortes Guzman
Juan Jose Cortes Guzman
7,894 Points
Juan Jose Cortes Guzman
Juan Jose Cortes Guzman
7,894 Points

The code works fine, only Browse Our Cupcakes appears as a link. Maybe is something in your CSS.

Joan Nyberg
Joan Nyberg
246 Points
Joan Nyberg
Joan Nyberg
246 Points

Here is the whole intro section. The H1appears as a link in both IE and Firefox and has since I first inserted it, even before adding css info from later videos. 

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smells Like Bakin' Cupcake Company</title>
  <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
  <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
  <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
</head>
<body>
  <div class="container clearfix">
    <div class="grid_4">
      <img src="img/logo.gif" alt="Smells Like Bakin">
    </div> 
    <div class="grid_8 omega">    
      <ul class=nav>
        <li><a href="#">About</<a></li>
        <li><a href="#">Cupcakes &amp; Prices</<a></li>
        <li><a href="#">Locations</<a></li>
        <li class="last"><a href="#">Contact Us</<a></li>
      </ul>
    </div>
    <div id="intro" class="grid_9">
      <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1>
      <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
    </div> 
    <div class="grid_3 omega">
      <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">
    </div>```
reuben east
reuben east
2,403 Points
reuben east
reuben east
2,403 Points

'''html <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'> the googleapis.com needs these ( " ) after the m or it keeps going ''' hope this helps and It prints right. I have been having trouble with code here.

reuben east
reuben east
2,403 Points
reuben east
reuben east
2,403 Points

It still didn't print the code ( link href='http://fonts.googleapis.com" )

reuben east
reuben east
2,403 Points
reuben east
reuben east
2,403 Points

I found it the http only has a single ' instead of " it should be href="http://fonts.googleapis.com/css?family=Nunito" I hope this work I think that that's it.

Joan Nyberg
Joan Nyberg
246 Points
Joan Nyberg
Joan Nyberg
246 Points

Perfect. Thank you so much. The underlining is gone and the H1 is displaying in the correct color.

Juan Jose Cortes Guzman
Juan Jose Cortes Guzman
7,894 Points
Juan Jose Cortes Guzman
Juan Jose Cortes Guzman
7,894 Points

Cool!