Are either of these valid to make a container with a hover effect become a link? I have six of these on my homepage, addition to a few text links a the top of the page?
I thought wrapping the whole div would work, then thought maybe I just wrap the hover state. Neither worked.
<a href="/organdonor.html">
<img src="/images/console/organdonor.jpg" />
<div class="mask">
<h2>Organdonor.gov</h2>
<p>GOVERNMENT</p>
</div>
</a>
</div>
<a href="/coach.html">
<div id="console_coach" class="view">
<img src="/images/console/coach.jpg" />
<div class="mask">
<h2>Coach</h2>
<p>FASHION</p>
</div>
</div>
</a>
These are both valid according to HTML5. However, please do notice older versions of HTML did not consider non-inline elements as valid child elements of an anchor tag.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:
https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element
Related
I have the following code, which is generating dynamically.
<a href="www.someurl.com">
<div class="sub">Sub Title</div>
<div class="main">Main title</div>
</a>
Now If I open site in Android mobile and go to Accessibility > Talkback > On
go to Website and do swipe Left to Right to announce all items one after one
When I reach to <a> tag, its announcing all divs inside the <a> tag, and on next swipe again its announcing 1st div and 2nd div.
Can you please suggest me how can I make the <a> tag announce only once. Thanks..
To make a span into a clickable link.
I have made a span that contains only a background image (as part of a Gilder/Levin image replacement technique) into a clickable link, and it seems to work fine -- but, so far, that is only on my own desktop computer, and on Chrome, Opera, and IE 11.
Is this viable?
<div id="logo">
<a href="[absolute url]">
<span></span>
</a>
<h1>page name</h1>
</div>
It works on my computer, with Chrome, IE11 and Opera. Will it work universally?
While it might look okay in most browsers, you're using the <a> element incorrectly, as what goes inside it should be a meaningful label. The proper thing to do would be to wrap the entire <h1> in the link, or to put the <a> within the <h1> (both are valid HTML5).
<a href="[absolute url]">
<span></span> <h1>page name</h1>
</a>
But judging from your comments, it's probably too early for you to start worrying about image replacement techniques an web semantics when you're still figuring the syntax out.
What's the point of image replacement techniques and why using an empty <a> tag is bad?
The Gilder/Levin image replacement technique involves adding non-semantic elements to a page (such as <span> elements) and using CSS to replace them with icons, so that these elements are ignored by screen readers. After all, an icon next to a menu button might make the button more visible for someone who can see, but the icon becomes redundant when you're blind and are using a screen reader which will read the text of the button out loud anyway. This also might make your website easier to parse by search engines.
However, in the original code, you didn't put any label on the link (actual text between the <a> and </a>), therefore making it especially confusing for screen readers and robots to know what this link is supposed to be. The entire title should be within the <a> element in this case, allowing the whole line to be clicked to follow the link. It's definitely not a good practice to use an empty <a> element, and the fact that there is a <span> within it changes nothing.
And since the idea of leaving an <a> element is semantically absurd, I haven't found any reliable place documenting the behavior of such an element across browsers.
wasn't pretty sure what you are asking for:: or trying to achieve.
3. wrap span in a href tag.
2. span onclick() function with javascript
1. span:hover with css.
<div id="logo">
<a href="[absolute url]">
<span>this span is now like link text.</span>
</a>
<h1>page name</h1>
</div>
<div id="logo">
<span onclick="myFunction()">this span is now like link text.</span>
<h1>page name</h1>
</div>
<style>
span:hover{color:red;}
span:active {color:green}
</style>
The css one isn't really click stuff.
Yes, it's a reliable way to put <span> or <img>(or any element you want to be a link) in a <a> tag.
click here for Definition and Usage
The tag defines a hyperlink, which is used to link from one page
to another.
The most important attribute of the element is the href attribute,
which indicates the link's destination.
I am trying to make a portfolio page and am want to use a thumbnail of one of my projects (a live page) as a link to that project. I've gotten the thumbnail made, but can't figure out how to make it a clickable link.
This is my code so far:
<div class="thumbnail-container">
<div class="thumbnail">
<figure>
<iframe src="https://codepen.io/valsburger/full/wppwmJ " scrolling="no">
</iframe>
</figure>
</div>
</div>
I've tried putting an element around the iframe in several locations. Nothing seems to be working.
Don't do that, will cause your page to be slower and frankly is just unnecessary.
Here is a photo of the page you want to:
Here is the code you should use:
<div class="thumbnail-container">
<div class="thumbnail">
<figure>
<img src="https://i.stack.imgur.com/7y4fc.jpg">
</figure>
</div>
</div>
An iframe is a "window into another world". There's could be lots of links in that window. So, it would be a bad idea if you could link the iframe itself. An iframe gets embedded, you cannot link it.
And frankly, I'm not sure WHY you'd even want to link an iframe in the first place? Seems very odd to me. Why don't you link the thumbnail itself?? That would be just a normal img element.
An ugly solution would be to place a transparent, relatively positioned <div> on top of the <iframe>, size it to cover the <iframe> and wrap it in <a> tags linking to your page.
Although I would suggest using regular <img> elements as thumbnails.
I often see things like :
<div id='side_logo'>
<a class="logo" href="index.html">
<img src="img/logo.png">
</a>
</div>
What are the advantage to use the above markup instead of just :
<a id='side_logo' class="logo" href="index.html">
<img src="img/logo.png">
</a>
It allows better control over styling. For example, if you wanted the logo in your example to sit inside a colored box that was larger than the logo image, but you only wanted the logo itself to be a clickable anchor.
In the actual example you've selected, <div> turns the <a> from an inline element to a block element, which has different properties.
One reason I often use a wrapping div is that it mixes better with other block elements. As a rule, I don't like to have inline elements butting up against block elements. You can set the a to display: block, but I've found that somewhat unreliable in some browsers (where things like margins on the a don't work reliably on every page load).
If you have a mixture of links, lists, spans, images, and tables on the first layer of the body, things can get all jumbled up with the diversity of default css properties.
The text windows needs to have fixed width and length and must auto wrap long texts. It must not have horizontal scroll bar but it needs vertical bar. You can only display text but cannot enter text into it. What html/css to use? I think the preview window in SO's ask question page meets the requirement! It is just a div. How is that done?
You can use a simple div to show chat bubbles. I would personally use something simple, such as:
<div class="chat-bubble"></div>
All the content would be wrapped inside that div. I would then style the chat-bubble class in CSS to make it look how I want it to.
Here is a pretty neat walkthrough on making chat bubbles in CSS that should be a good starting point for what you're trying to do.
I realize this question is somewhat old, but I think it's an interesting case.
Using a div HTML element is possible, but not the best solution when it comes to semantics. Keep in mind that div is the most generic HTML element. It says nothing about your markup's content other than it should be divided from the rest somehow.
A better approach would be to use a mix of more descriptive HTML 5 elements, and overwrite their default styling with something that looks like a chat bubble.
Consider this example, adapted from this article
<ul class="chat">
<li class="message">
<figure class="sender">
<img src="https://example.org/avatar.png" alt="" class="avatar" />
<figcaption>Example sender name</figcaption>
</figure>
<blockquote>
<p>Text message</p>
</blockquote>
<li>
<!-- more chat messages ... -->
</ul>