# Links are Outside the Border

**URL:** <https://forum.kirupa.com/t/links-are-outside-the-border/645507>\
**Category:** Uncategorized\
**Created:** [December 30, 2020, 2:52am UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507 "2020-12-30T02:52:55Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 30, 2020, 2:52am UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/1 "2020-12-30T02:52:55Z")

</div>

Why doesn’t the red border encompass the 2 links at the bottom?

 ![Screen Shot 2020-12-29 at 7.49.44 PM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/9/905ec1e1024f3d717897ac8546953edc34fb209a.png)

```
<html lang="en">
<head>
   <title>Messing With Page Layouts</title>
   <link rel="preconnect" href="https://fonts.gstatic.com"> 
   <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Open+Sans+Condensed:ital,wght@1,300&display=swap" rel="stylesheet">
   <style>
       h1 {
           text-align: center;
           font-family: 'Indie Flower', cursive;
       }
       h2 {
           text-align: left;
           font-family: 'Open Sans Condensed', sans-serif;
       }
       p {
           text-align: justify;
       }
       .links {
           margin: 50px;
       }
       .overall {
        border: 5px solid rgb(187, 76, 76);
    border-radius: 15px;
    margin: 10px 5px;
    padding: 4px;
       }
       .allwords {
        padding: 10px;
       }
   </style>
</head>
<body>
    <div class="overall">
    <div class="allwords">
        </div>
        <h1>Road Construction Equipment</h1>
        <h2>Specialized Winter Usage</h2>
        <p>But adding to the Canadian aviation sector’s woes as the year winds down is that ground has been lost to international competitors, in large part because there’s been little direct government support in Canada, industry executives say.</p>
        </div>
        <div>
            <a href="https://www.montrealgazette.com/cms/binary/1058422.jpg" target="_blank" class="links">Charles Fipke</a>
            <a href="https://okanaganlife.com/gem-guy-chuck-fipke/" target="_blank" class="links">Stewart Blusson</a>
        </div>
    </div>
    </div>
    
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [December 30, 2020, 3:07am UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/2 "2020-12-30T03:07:26Z")

</div>

Because the border is on overall and they’re not in it. Right now overall ends after the p. But if I had to guess you have two `</div>`s in there that probably shouldn’t be, the one that immediately closes allwords, and the one after the p closing overall.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 30, 2020, 3:53pm UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/3 "2020-12-30T15:53:00Z")

</div>

> [@senocular](#):
>
> Right now overall ends after the p

 ![Screen Shot 2020-12-30 at 8.52.22 AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/b/b0c8e14de1de693a9be04c35dc09ddc1f56267db.jpeg)

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [December 30, 2020, 5:46pm UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/4 "2020-12-30T17:46:58Z")

</div>

“A” is a closing tag that closes the empty allwords

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 30, 2020, 6:30pm UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/5 "2020-12-30T18:30:08Z")

</div>

Yikes! Didn’t notice that! OK - so how about this approach? Instead of trying to keep track of 3 dozen or so divs, is it acceptable to use other tags like section / headers and maybe some others that I don’t even know of, to avoid the confusion inherent in using many tags with the same name? I tried it with this code, got the result that I wanted with a lot more clarity.

```
<html lang="en">

<head>
  <title>Messing With Page Layouts</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link
    href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Open+Sans+Condensed:ital,wght@1,300&display=swap"
    rel="stylesheet">
  <style>
    h1 {
      text-align: center;
      font-family: 'Indie Flower', cursive;
      background-color: rgba(172, 85, 138, 0.322);

    }

    h2 {
      text-align: left;
      font-family: 'Open Sans Condensed', sans-serif;
    }

    p {
      text-align: justify;
    }

    .links {
      margin: 50px;
    }

    .overall {
      border: 5px solid rgb(187, 76, 76);
      border-radius: 15px;
      margin: 10px 5px;
      padding: 40px;
    }

    .allwords {
      padding: 10px;
    }
  </style>
</head>

<body>
  <section class="overall">
    <div>
      <h1>Road Construction Equipment</h1>
      <h2>Specialized Winter Usage</h2>
      <p>But adding to the Canadian aviation sector’s woes as the year winds down is that ground has been lost to
        international competitors, in large part because there’s been little direct government support in Canada,
        industry executives say.</p>
    </div>
    <div>
      <a href="https://www.montrealgazette.com/cms/binary/1058422.jpg" target="_blank" class="links">Charles Fipke</a>
      <a href="https://okanaganlife.com/gem-guy-chuck-fipke/" target="_blank" class="links">Stewart Blusson</a>
    </div>
  </section>
</body>

</html>
```

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [December 30, 2020, 7:07pm UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/6 "2020-12-30T19:07:55Z")

</div>

Yes, especially if you’re using them as they’re intended to be used 😉 Here’s a quick article I googled that talks about this (I’m assuming its pretty good though I haven’t fully read it myself):

[https://www.semrush.com/blog/semantic-html5-guide/](https://www.semrush.com/blog/semantic-html5-guide/)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 30, 2020, 7:17pm UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/7 "2020-12-30T19:17:10Z")

</div>

Unless you absolutely have to, you should try to avoid targeting elements like div directly in your CSS. Give each element a meaningful identifier like a `class` value or (rarely) an `id` value and have your CSS target the identifier. Even if you do break up your divs into `article` and `section` elements, give them a name and target them more specifically. It will save time troubleshooting bugs in the long-run 🙂

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 31, 2020, 2:24am UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/8 "2020-12-31T02:24:14Z")

</div>

Thanks to you both for the input. I will study the site provided in the link. As to your response Kirupa, I assume that you are happy with the code below. I am referring particularly to the class identifier “overall” in the opening section tag. Since I only have one section, there really was no need for a class identifier in this instance - you could simply target section in CSS. But you are saying that for any container - I should be using a class identifier - it’s better form. Have I got that right?

```auto
<body>
  <section class="overall">
    <div>
      <h1>Road Construction Equipment</h1>
      <h2>Specialized Winter Usage</h2>
      <p>But adding to the Canadian aviation sector’s woes as the year winds down is that ground has been lost to
        international competitors, in large part because there’s been little direct government support in Canada,
        industry executives say.</p>
    </div>
    <div>
      <a href="https://www.montrealgazette.com/cms/binary/1058422.jpg" target="_blank" class="links">Charles Fipke</a>
      <a href="https://okanaganlife.com/gem-guy-chuck-fipke/" target="_blank" class="links">Stewart Blusson</a>
    </div>
  </section>
</body>

```

[/quote]

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 31, 2020, 3:13pm UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/9 "2020-12-31T15:13:48Z")

</div>

![Screen Shot 2020-12-31 at 8.11.06 AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/0/064fa2c0a435b214c666c82c4a1803ea1c2e3747.png)

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [December 31, 2020, 4:11pm UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/10 "2020-12-31T16:11:17Z")

</div>

> [@John\_Stern](#):
>
> THE ONLY ADDITIONS I MADE TO THIS PAGE ARE THE 4 ARROWS. THE AUTHOR OF THE PAGE HAS EVERYTHING ON THE BOTTOM ROW WITHIN A FOOTER TAG. BUT I THOUGHT THAT THE 4 ARROWS POINT TO LINKS SO SHOULD THEY NOT BE WITHIN A NAV TAG INSTEAD OF A FOOTER TAG OR DOES IT EVEN MATTER?

Usage can be subjective. It can help to check out the docs for the different elements. For example for [nav on mdn](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav):

> - It’s not necessary for all links to be contained in a `<nav>` element. `<nav>` is intended only for major block of navigation links; typically the [`<footer>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) element often has a list of links that don’t need to be in a [`<nav>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) element.

So you could if you wanted to and it felt appropriate, but also not necessary. I could see it being used with jobs, contact, and legal, given that they’re different sections within the current site, but I wouldn’t expect it to be used for the follow us links.

As you get deeper into web dev, it can also help to pay attention to the impacts on accessibility these tags have. It’s not something you think about at first, but ultimately becomes important, especially in having ADA compliant web content. Afterall, [you wouldn’t want to get sued](https://martechtoday.com/is-your-website-at-risk-for-an-ada-accessibility-lawsuit-245172). 😲

---

<div class="post-metadata">

**Author:** ![abergquist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/abergquist/32/12871_2.png) [@abergquist](https://forum.kirupa.com/u/abergquist)\
**Post date:** [December 31, 2020, 5:39pm UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/11 "2020-12-31T17:39:35Z")

</div>

In addition to @senocular’s and @kirupa’s excellent advice, I also recommend formatting your code in VS Code. In Windows, pressing [Alt+Shift+F] works for me.

When the code is correctly formatted, it may help you more quickly see where a particular

 ends and, as a result, determine why it’s not working the way you expect it to work.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 31, 2020, 6:47pm UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/12 "2020-12-31T18:47:52Z")

</div>

I was slowly approaching the same conclusion on my own - that to some extent, the usage of tags is arbitrary - but it’s good to have that confirmed by those with experience in the subject.  
" I also recommend formatting your code in VS Code." - I do use VSC for writing code but I’m not sure what your phrase means. Are you simply recommending VSC as the program with which to write code or does formatting refer to a process in VSC once you have already written your code?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [December 31, 2020, 7:06pm UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/13 "2020-12-31T19:06:23Z")

</div>

> [@John\_Stern](#):
>
> I do use VSC for writing code but I’m not sure what your phrase means. Are you simply recommending VSC as the program with which to write code or does formatting refer to a process in VSC once you have already written your code?

VSC has a formatting feature for formatting your code. On windows, the keyboard shortcut for this is, as [abergquist](http://forum.kirupa.com/u/abergquist) said, Alt+Shift+F. You can also right-click and select “Format Document”

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/1/176c6cc56c4e7684a8409cbc4a3e6cbbb7742181.png)

Doing this will help show the hierarchies of the elements through indentation.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 1, 2021, 3:36pm UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/14 "2021-01-01T15:36:17Z")

</div>

Wow! Talk about having your eyes opened! That Format Document feature is super impressive! Suddenly, the overall layout has tons more clarity - very, very helpful - thanks.

---

<div class="post-metadata">

**Author:** ![ariful](https://avatars.discourse-cdn.com/v4/letter/a/bbce88/32.png) [@ariful](https://forum.kirupa.com/u/ariful)\
**Post date:** [February 17, 2021, 3:07am UTC](https://forum.kirupa.com/t/links-are-outside-the-border/645507/16 "2021-02-17T03:07:52Z")

</div>

![Capture](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/e/ec078d78025ba729ae758c76114e4518dd72c5e3.png)

You should delete the photo black part. It is an extra close div. class allwors close div is under button div.