HTML Anchor Tag

How to use <a> tag without its default text effects

[Dannniel]

I am a novice in web development and making a web site on my own. I am encountering a problem when I put <a> tag around <div> like <a> <div>My content</div> </a>.
The problem is that 'My content' appears reddish instead of the black color I assigned to text in the div tag.
How can I overcome this problem.

[piatkow]

w3schools say:

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used to group block-elements to format them with CSS.

You are trying to place a block element inside an inline element. If you really must do things this way then you should be using span rather than div. If you want to style a link then you can apply the style direct to the A tag.

If you are using the tag as an anchor rather than as a link then you just close it straight away without any content between the two tags. This is not valid in html5

[Fotiman]

Welcome to WebmasterWorld!
Your <a> styles affecting the color. You could add styles that override the default link styles like this:

a div {
  color: black;
}

Note, though, if you have rules like a:hover, a:active, etc., then you may need to include those pseudo classes in this style rule as well.

You are trying to place a block element inside an inline element. If you really must do things this way then you should be using span rather than div. If you want to style a link then you can apply the style direct to the A tag.

Technically, this it is perfectly valid in HTML5 to include a <div> within an <a>.

[piatkow]

I haven't needed to look into HTML5 in any detail but are you really saying that the HTML5 standard explicitly states that a block element can be contained within an inline element?

You can physically do this with earlier releases but it isn't considered "valid".

NB the comment in my previous post about "validity" was explicitly about using A as an anchor rather than as a link and was taken direct from w3schools. Again browsers may still support it as they support many deprecated tags.

[Fotiman]

are you really saying that the HTML5 standard explicitly states that a block element can be contained within an inline element?

The notion of "block" and "inline" elements was somewhat replaced in HTML5. There's now notions of "phrasing content", "flow content", etc. But no, this is specific to <a> elements.
[html.spec.whatwg.org...]

And you are correct, this was invalid in earlier versions of HTML (though browsers still handled it).

[Marshall]

You might want to read this thread:
How to Make a div a Clickable Link [webmasterworld.com]

Marshall

[Dannniel]

thanks for your help Piatkow, Fotiman and Marshall. I set a{display:block;} and applied other styles and attributes to the anchor and now anchor itself is a block standing independently. I did not place it around or inside <div> and the code is working fine for now.
But all your suggestions are valuable for me. But I am facing another problem, which I will keep on facing as I am new to making a website. I am searching it on the net and will be back soon. Thanks again for your support.

[lucy24]

are you really saying that the HTML5 standard explicitly states that a block element can be contained within an inline element?

More accurately: hmtl5 now recognizes what browsers have always de facto supported: <a> isn't considered an inline element. I guess you'd have to call it a no-line element, since it doesn't create a block, but can contain a block.

I set a{display:block;}

No, don't do that. You may have misunderstood. But cheers to you for learning to make hand-rolled HTML and CSS instead of just grabbing a CMS and making pages without even trying to understand what's happening.

Every browser has a default way of handling any element, such as <p> <h1> <a> et cetera et cetera. The purpose of a stylesheet is to override these browser defaults. By default, a link is underlined and a different color-- generally blue at first and then purple if the user has visited it within the browser's memory. So to override:

a {text-decoration: none; color: inherit;}

will make a link look just like the surrounding text.

a:active {color: green;}
a:visited {color: #666;}

means a link is green while you're clicking on it, and then turns grey after you've used it.

I strongly recommend making up a little experimentation document. Give it a name in .html and open it in your preferred browser side by side with your text editor. Now see what happens when you change things. If you have a word processor or text editor with an "HTML preview" function, you can experiment without having to reopen or refresh the page each time you change something.

Bookmark this page:

http://www.w3.org/TR/CSS2/indexlist.html

There are plenty more pages for the different elements CSS3, but the CSS 2.1 index is the single most useful starting point. At first nothing will make any sense, but bit by bit you will come to understand what they're talking about.

[Dannniel]

Lucy, you mean to say that I shouldn't use <a> as a block and should rather use div and put anchor in it. thanks for the bookmark suggestion.

[lucy24]

You can use <a>, just don't say {display: block} because it won't do what you want and is likely to do what you don't want. Saying

a {display: block;}

means that any time you have an anchor, like in a <a href = "blahblah">midline link</a>, the browser will insert a line break before and after the linking text.

[Dannniel]

Okay! I got it now. thanks again Lucy.

[mickkennys]

Using Word Press and never had problem with those tags going all together.