[solved] My anchor moves my botton lol

[solved] My anchor moves my botton lol
0

#1

Sooooo. I anchored one of my buttons and it moved the button to the end of the group.
I think I placed it wrong.
Can you guys check it out? Line 11-13
btw do I have to anchor hrefs?


#2

There are two things here you should fix.

  1. You wrapped a button in an anchor tag, which doesn’t make sense. You should either use a button or an anchor tag, but not both combined.
  • Buttons are used for forms (like submitting) or if you want to modify their behaviour with JavaScript (opening a modal for example).
  • Anchor tags are for linking to other pages or sections within the same page.

Judging from your code, you might want to use an anchor tag instead of the button, because you want to link to a different section in your document.

By the way, this also applies for the other buttons in the navigation, you should switch to anchor tags.

  1. The button got moved to the right because you forgot to add the Bootstrap specific classes: class="btn btn-primary"

Ideally, it should look like this:

<div id="button-group" class="btn-group btn-group-lg">
  <a href="#about" type="button" class="btn btn-primary"><i class="fa fa-2x fa-info-circle"> About</i></a>
  <a href="#projects" class="btn btn-primary"><i class="fa fa-2x fa-suitcase"> Projets</i></a>
  <a href="#contact" type="button" class="btn btn-primary"><i class="fa fa-2x fa-id-card"> Contact</i></a>
  <a href="#social" type="button" class="btn btn-primary"><i class="fa fa-2x fa-github-square"> </i>   <i class="fa fa-2x fa-facebook-square"> </i>   <i class="fa fa-2x fa-free-code-camp"></i></a>
</div>

#3

-Anchors will only be words and won’t have that button look.
-I thought buttons were for actionable items, I’ll have to check that when I get out of work but that’s what I read.

  • And the documentation says btn-primary is only a color, I used btn-info instead.

#4

Looking closer at the snippet you put up for me…It looks like your using button stuff inside an anchor tag…:thinking:
I’m gonna have to check that out tx @andre


#5

In Bootstrap, it doesn’t matter if you put the style .btn .btn-primary on an anchor tag or a button, the visual outcome is almost the same. However, the use of either of these should be clear to avoid further problems.

Have a look at this thread in Stackoverflow: https://stackoverflow.com/questions/11899622/html-css-buttons-when-to-use-what

They basically explain the difference. In your case, you want to link to a different section in your document, so an anchor tag should be used. If you would like to submit a form or toggle some JavaScript action a button should be used.


#6

Please explain what “problems” your referring to, ty.

On a solved note, I think what’s happening here is I may be using the wrong HTML element because I thought only < buttons> look like buttons.

tx for the help.


#7

I refer to problems with SEO, as it is very important to use the correct HTML elements on your website to get the best SEO results.

Basically, you are right: without any CSS, a button element looks like a button and a link looks like a text element with underline and in blue. That’s the default browser’s style. But for things like this we have CSS to add all kind of styles and make our links look like buttons or vice-versa. Whatever your project requires :wink:


#8

Welcome to the wonderful world of accessibility and semantic markup!

As you noted - Bootstrap, and also therefore CSS generally, can style pretty much anything to look like anything else:

image

So, as in this pic, you can make a <p> or <h1> look like a button.

Ever browser has some default styles built in (which we see in the <button> above), but what I applied to the p and h1 was a couple of Bootstrap classes that are typically reserved to overwrite default buttons.

That’s all pretty cool - but just because you can do something with CSS, it doesn’t mean you should!

The idea of semantic markup is that you should use the elements that say they will be used for the thing they actually do.

For example, a <h1> element should only be used for top level headings. Even though it’s style is big and bold, you shouldn’t use it just for style - it should convey the information ‘This is a heading’.

Anchors and buttons have slightly different purposes. Ask yourself what you expect to happen when you click a link, vs a button…you probably assume that a link will take you to a new place, whereas a button will submit a form or trigger some sort of action.

If you want a link to look like a button for stylistic reasons, that’s ok (but it may confuse your users, so be careful).

When it comes to accessibility, though, you want your markup to be as semantic as possible. You might like the look of a button for your thing that links you to another part of your page - but it should still be called an anchor. Screen readers present links and buttons (and navs, and headings, and everything else) in different ways. Also, web crawlers will treat them differently (think Google).

Anyway…it’s a bit of a rabbit hole, but if you want to learn more about accessibility, you could start with this article:


#9

IT WORKS!!
HAHAHAHAHAHA
:laughing: :laughing: :laughing: :laughing: :laughing: :laughing:
:sob: :sob: :sob: :sob: :sob: :sob:

Aw man what a relief :relieved:
-using anchor tags with the btn Bootstrap classes renders the visual aid I want for my links.

  • Also I think I need to learn something about that SEO. I guess HTML is not only how Web Browsers render pages but also how SEO’s rank and find them (or the content within them).

#10

Thanks so much for your help @andreasremdt.
Man, ppl kept saying “don’t use buttons in acnhors” but I had to get that look.
You taught me some super valuable stuff.


#11

That’s so crazy!! Like in a :+1: way. Think about it guys, that means that the styling possiblities are endless because they’re are (maybe all) interchangeable!
*give me a sec to go through the rest of your post :laughing:


#12

-I think that’s a great point becasue I feel like semantic naming (@shout to @BenGitter for droppin’ some knowledge in that) is really all about how Browsers and devices render stuff. But then we can always override them and…well now I’m going down the rabbit hole lol.

I’ll try and read that link @JacksonBates tx man