So this is quite interesting to me. I've got the following example markup:
<a href="test.html">
<h2>Hello World</h2>
<div>
<p>Hello again</p>
</div>
</a>
When I have my Google Chrome (Version 26) rendering this, it shows me exactly this markup. But when I add an anchor inside the div like this:
<a href="test.html">
<h2>Hello World</h2>
<div>
<p>Hello again</p>
</div>
</a>
The browser outputs the following:
<a href="test.html">
<h2>Hello World</h2>
</a>
<div>
<a href="test.html">
<p>Hello again</p>
</a>
</div>
So this is absolutely not what I want. I can imagine it might makes sense in order to be able to click the inner link, that the anchors are only applied to some elements, but I would need it just how i wrote it there. It makes sense, because I have to copy the inner div to another position via JavaScript. But when I do that, the code is already messed up and shows the first link.
Does anybody know how to deal with this?
Many thanks in advance!
It is not allowed to nest a elements:
Content model:
Transparent, but there must be no interactive content descendant.
Interactive content is "content that is specifically intended for user interaction". For example a, button, input, audio, ….
Related
I have two divs that act as links (<a>). One in one paragraph, the other in the second paragraph. The second link works: on mouseover (in Chrome) the bottom left of the window displays the link address. The top one does not do the same. What is wrong? I'm talking about the links in the paragraph tags, not the menu links.
<body ontouchstart>
<div class="header">
<div class="logo">Q<sup>3</sup></div>
<div class="desc">Quito's Qustom Qode</div>
</div>
<div class="row">
<div class="sidenav col2">
<a id="about" class="link-active">about</a>
<a id="pricing">pricing</a>
<a id="projects">projects</a>
<a id="legal">legal</a>
</div>
</div><!-- /row -->
<div class="row">
<div id="content" class="col10">
<div class="info">
<div class="about">
<div class="profile-back">
<div class="profile"></div>
</div>
<div class="about-me">
<p>Kevin (Quito [Key'-tow]) Williams is an aspiring front-end web designer. He has 5 years of experience in HTML, 4 years experience in CSS, and is currently studying jQuery. As a modern web designer, he is using his coding background to study the latest web technologies: HTML5, CSS3, RWD. In addition to his web technology languages, he is also familiar with: C<sup>++</sup>, Javascript, Java, Perl, Lua (Minecraft based), LISP, SQL. </p>
<p>Hello</p>
You've forgotten to add the actual link on your anchor tags through href.
Your current code:
<a id="about" class="link-active">about</a>
<a id="pricing">pricing</a>
<a id="projects">projects</a>
<a id="legal">legal</a>
Changes:
about
pricing
projects
legal
Can you be a bit more clear about what outcome you are expecting?
Edit: I think i understand now, "About" "Pricing" "Projects" should be hyperlinks?
you are missing the "href" attribute in the tags which should fix your problem.
If you don't want the link to direct to a different page, you can use href="#" to stop this.
Are you on about the following lines?
RWD.
<p>Hello</p>
If so, both are working fine in chrome and IE for me. I'm not sure what the issue is for you.
try this code,add target="_blank" in your a href
<p>Hello</p>
And the working fiddle link is here https://jsfiddle.net/p7mnsj3p/
I am a little bit in doubt of a small thing here. I have made a wireframe, that I started to make. The line: "A catcy piece of text" has to have a background. But how do I make that background, without styling all h2 tags? As I understand it is not good practice to give a h2 tag a class?
HTML
<section class="container-fluid" id="section1">
<div class="v-center">
<h1 class="text-center">COMPANY NAME</h1>
<h2 class="text-center">Change this <b>subline</b> here</h2>
<p class="text-center">
<br>
Get Free Membership
</p>
<h2 class="text-center">A CATCY PEICE OF TEXT</h2>
<p class="text-center"><i>Enter your email for more news</i></p>
</div>
</section>
Using an ID or even a unique class is fine, nothing wrong with it. But to answer your question without referring to the classes, you need to use the hierarchy of your DOM elements. One such way would be:
section > div > p + h2 {...}
The says select the h2 element that is the adjacent sibling of a paragraph that is the child of a div that is the child of a section.
Check out the MDN section on CSS combinators for more info.
I cannot understand why there is a break between "Hello 1" and "Logout". Can anybody see why?
<h4 class="hello">Hello, <em><?php echo $_SESSION['username'];?>!</em></h4>
Logout?
test
<div id="container">
<div class="topbar">
<p id="headline">Test</p>
<p id="headline_1">Page</p>
</div>
</div>
Headings, including h4 elements, are display: block by default so they generate line breaks before and after themselves.
You can alter that by:
Not using a heading element (the text doesn't look like it is a sub-sub-sub heading so this is probably the best approach).
Modifying the display
Floating elements
Using Flexbox
Using CSS grids
Reason is described by some people as above. One solution can be like this:
<div>
<span class="hello">
Hello, <em><?php echo $_SESSION['username'];?>!</em>
</span>
Logout?
</div>
I have a HTML markup for each brand in my page like this
<ul>
<li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
<h2>mallname</h2>
</div>
</a>
</li>
</ul>
is that heading position ok inside a hyperlink, or should I change it to
<ul>
<li>
<h2>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
mallname
</div>
</a>
</h2>
</li>
</ul>
which one is the more right way to write it, and what is the result that will be read by crawler for the heading in both case?
If in the first one, the heading content is only mallname, will the second one be read as mallname mallname mallname as there is a title attribute in the hyperlink and alt attribute in the image inside the heading
here's one of the result of the list item
In your first example, the h2 doesn’t describe the content of the li. In scope of this heading is everything following it, until the next heading starts. So in fact, the previous heading would describe the following content, and so on. This problem always arises when using headings without sectioning elements in lists.
In your second example, the h2 probably contains more than it should (two times "mallname"; the one in the title attribute is not considered to be part of the heading content). But what is the actual content here? There is only a heading, which doesn’t seem to make sense.
Your alt content is probably not correct/useful. When it is exactly the same as the corresponding heading, the you should probably use an empty alt value. But it’s likely that the image represents something in addition to the heading: describe this in the alt content.
Duplicating the heading content in the title attribute doesn’t seem to make sense, either. Only use it for additional helpful (but not essential) content.
So you should use something else: sectioning elements. Judging from the screenshot, it might be the case that article is appropriate (if not, use section).
By using a sectioning element like article, the heading doesn’t have to be placed on the top.
<ul>
<li>
<article>
<a href="/brand/mallname">
<img src="/Images/mallname.png" alt="Mallname offers … and …. It’s ….">
<h2>mallname</h2>
</a>
</article>
</li>
</ul>
However, use this only when the h2 describes the ìmg! When the image is only an alternative to the heading (or only decoration, and the actual image content isn’t relevant in this context), why use headings at all? In that case you’d have just a list of links:
<ul>
<li><img src="/Images/mallname.png" alt=""> mallname</li>
</ul>
Inside of <ul> should go <li> tags, so I think the first markup is more right, if to close eyes on the <div> elements inside of <a>.
Set your <a> to display: block; and you'll be correct with the first one.
You are missing the <ul> tags that are required as a parent for the <li>-tags.
Assuming you'd add the <ul>-tags that are missing: <ul> is not allowed as a child element for <h2> so that renders the second version as no good => first one is "more right".
The tests, I took the liberty to add the missing <ul>'s & mandatory parents, the doctype is HTML5:
W3C markup validator gives green light for this one:
<!DOCTYPE HTML>
<html><head><title>tets</title></head><body>
<ul><li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
<h2>mallname</h2>
</div>
</a>
</li></ul>
</body></html>
W3C markup validator gives the aforementioned error to this one:
<!DOCTYPE HTML>
<html><head><title>tets</title></head><body>
<h2><ul>
<li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
mallname
</div>
</a>
</li>
</ul></h2>
</body></html>
I'm trying to make a couple of DIVs clickable in its entirety. I tried this...
<div id="features" class="threeSplit">
<div id="box1">
<a href="javascript:;">
<h3>Watch TV anywhere</h3>
<p>While you're out of town, you can still watch live television.</p>
</a>
</div>
<div id="box2">
<a href="install">
<h3>No subscription</h3>
<p>Save your money. VRT and RTBF channels are available at no cost.</p>
</a>
</div>
<div id="box3">
<a href="coverage">
<h3>Picking up channels</h3>
<p>Television channels can be picked up from antennas near you.</p>
</a>
</div>
</div>
Click here for live version. Now, XHTML 1.0 Strict does not like that I put block elements inside an anchor tag. Is there a better way that does comply with XHTML Strict? I know the page still contains lots of validation errors, but this is only a quick 'n dirty mockup.
You could use an onclick event within the div elements...
<div id="box2" onclick='window.location = "install"'>
<h3>No subscription</h3>
<p>Save your money. VRT and RTBF channels are available at no cost.</p>
</div>
You could either
Put span tags inside of your a tags, instead of h3 and p, and style them accordingly
Use javascript to catch the click and follow the link, doing away with the a tag
The last option, I would say, is more elegant.