How can I write tag in standard html?

Question

I have two pages made using HTML and I use the following standards

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

The two pages are index.html, the other is about.html. I create a logo inside the index page as the following

HTML markup of Index.html

<div class="logo"></div>

in CSS I do the following

.logo {
background: url ('../images/logo.png') no-repeat;
height: 300px;
width: 100px;
}

In about.html page I write the following html markup

<a href="index.html">
   <div class="logo"></div>
</a>

The above markup is working fine, but when I use the w3c validator it gives me warning as it's not a standard markup.

My question is how can I make the html markup fits with the standards and gives the same result?

It might help if you post the warning that the validator gives you. — Shaun Bohannon, Mar 03 '12 at 16:53

Seth Carnegie · Accepted Answer · 2012-03-03T16:59:46.563

3

You should do this rather:

<a href="index.html" class="logo"></a>

And then your css will apply directly to the a instead of to a nested empty div. You'll need to add display: block; to the CSS though because a has a different default display.

edited Mar 03 '12 at 16:59

answered Mar 03 '12 at 16:54

Seth Carnegie

73,875
22
181
249

thanks a lot ! it really works, you are really great with a great help . thanks – HTML Man Mar 03 '12 at 17:05

Wesley Murch · Answer 2 · 2012-03-03T17:04:47.997

3

You have two choices if you need to keep this markup structure:

Use the HTML5 doctype, where block level elements inside anchors like <a><div>this</div></a> are valid and legal.

The HTML5 doctype is: <!doctype html>

Just bear in mind that there is currently no official HTML5 validation service.

Use an inline element like <span> for the logo:

<a href="index.html">
   <span class="logo"></span>
</a>

If you use #2, just add display:block to your CSS for .logo

Depending on your design goals and other markup, you may very well not need the inner element at all and can simply style the <a> element itself by giving it class="logo".

edited Mar 03 '12 at 17:04

answered Mar 03 '12 at 16:57

Wesley Murch

101,186
37
194
228

1

+1 for `display:block`. You don't even need the span element, the style can directly be applied on ``. – Rob W Mar 03 '12 at 16:58
No you don't *need* it, but I'm not sure what else the OP is up to with the design. Could be a "helper" tag or something, or maybe there are other adjacent elements in the ``. There are too many ways to possibly mark this up, just going with the OP's original HTML. – Wesley Murch Mar 03 '12 at 16:59
@Madmartigan thanks a lot, but i need that standard - html section 4 - as client ask for that specifically. – HTML Man Mar 03 '12 at 17:23
Then you'll have to use an inline element like ``, no inner element at all, or accept that the document doesn't validate. – Wesley Murch Mar 03 '12 at 17:25

score 2 · Answer 3 · answered Mar 03 '12 at 16:59

The problem you're seeing in the validator is because the <div> is a block-level tag, whereas the <a> tag is an inline tag.

Inline tags cannot contain block-level tags, which is why the validator is complaining.

In fact, this rule is widely ignored, because otherwise a lot of things become quite hard to make into links. In addition, it only applies to older HTML and xhtml versions (xhtml is particularly fussy about it); the current HTML5 standard does allow it, because they saw the problems caused by having the rule.

So the short answer is to use the HTML doctype (<!DOCTYPE HTML>)instead, and your problem will disappear.

The 'correct' answer is to style the <a> tag with display:block; or display:inline-block; so that it can then contain block-level elements. This will make it correct syntactically. However this doesn't usually satisfy the validator, as it just looks at the default display types, not CSS.

Alternatively, switch the <div> for a <span>. This will satisfy the validator, and you can still use display:block and friends to make it work like a <div>.

Hope that helps.

thanks a lot, but i need that standard - html section 4 - as client ask for that specifically. — HTML Man, Mar 03 '12 at 17:25
@HTMLMan - in that case, the last paragraph of my answer provides the solution: switch to `` rather than `
` inside an `` tag. It's the only way to satisfy the HTML4 rules fully. — Spudley, Mar 04 '12 at 12:29
"In fact, this rule is widely ignored, because otherwise a lot of things become quite hard to make into links." What would be an example of this, where you couldn't place the link inside the block? — BryanH, Aug 08 '12 at 17:50

score 0 · Answer 4 · answered Mar 03 '12 at 16:56

0

Instead of using the logo image as a background put an tag inside your DIV. You cannot wrap an tag around a block element like a DIV.

<a href="index.html">
   <div class="logo">
      <a href='gosomewhere.html'>
         <img src='mylogo.png'alt='' title=''/>
      </a>
   </div>

answered Mar 03 '12 at 16:56

xXPhenom22Xx

1,265
5
29
63

Thanks, I know that, but imagine i have 20 pages using html and your code a little bit long and a little bit noise when you read it from another one else – HTML Man Mar 03 '12 at 17:27
Agreed, wasnt sure if you wanted to keep the DIV structure. Also adding the image via the CSS you lose the ability to add TITLE and ALT tags which can be important for SEO and Accessibility, for instance images of products your selling, etc.. I guess it all depends on what the images are. – xXPhenom22Xx Mar 03 '12 at 17:38
yes you are totally right, but i use that only for logo, i think no problem at all if no one with disability cannot read the logo or my page have a broken link for logo. – HTML Man Mar 03 '12 at 17:59
also i can use title with tag – HTML Man Mar 03 '12 at 18:05
Correct, but search engines will look at that differently than an tag with a TITLE and ALT tag. For your need, applying the image via a CSS class is the way to go for a logo, but if you were listing products or other things you would want indexed by the Search Engines then its much better semantics to use an tag with a TITLE and ALT tag. – xXPhenom22Xx Mar 03 '12 at 18:10
Yes, you are correct, and i will keep that in my mind. Thanks – HTML Man Mar 03 '12 at 18:20

score 0 · Answer 5 · answered Mar 03 '12 at 16:56

Links (a tags) are inline elements, meaning multiple elements fit on the same line, while divs are block elements, which mean only one per line. It is invalid HTML 4.01 to insert a block-style element inside an inline-style element, since that prevents the inline element from actually being rendered as inline.

For more info on inline and block elements, see this page: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

score 0 · Answer 6 · edited May 23 '17 at 11:55

0

No it not valid to put and Div tag inside an Anchor Tag According to section 4 of W3c standards.

An anchor tag is an iline element and Div is a block level element. You cannot put a block level element inside and inline element.

Here is another good SO discussion on your matter.
Is putting a div inside an anchor ever correct?

edited May 23 '17 at 11:55

Community

1
1

answered Mar 03 '12 at 17:03

Rizwan Mumtaz

3,875
2
30
31

How can I write tag in standard html?

6 Answers6