I want to use h1 in a element. Which one is more correct?
<h1>Home</h1>
OR
<h1>Home</h1>
As w3 describes the markup A:
An anchor is a piece of text which marks the beginning and/or the end
of a hypertext link.
The text between the opening tag and the closing tag is either the
start or destination (or both) of a link. Attributes of the anchor tag
are as follows.
This means both are correct, and they don't have the exact same effect. So it depends on what you want to make a hyperlink, in case you surround the entire <h1> you need to put it as a parent. This will make the entire block clickable, including the space to the right:
<h1 style="background-color: yellow">Anchor for entire title</h1>
In case you want to get only a specific part of the <h1> you only surround that part like this:
<h1 style="background-color: yellow">Anchor only for this</h1>
According to HTML5 specs both are correct:
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).
Both are fine.
It really depends if you want the whole heading to be a link or just the text in it.
(It's a bit odd to make the main heading for your page a link to the top of the page (or anywhere else for that matter) though.)
Related
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'm doing an HTML write up for a colleague that is going to go on our intranet site, but I have to write the instructions in the HTML itself. I need to write the word <div> in the instructions, but I need to have it so the '' displays as the word , not an actual div.
Because I'm writing it directly inside the HTML, I need a way of somehow escaping the HTML, but keep the word and it's arrow brackets.
How do I go about doing this?
EXAMPLE
<p>This is some text followed by the word <div>, but not an actual div.</p>
Replace < with < and > with > Those are HTML Entities which can replace real tags. That way, it'll apear as <div> althought it isn't actually a div.
<p>This is some text followed by the word <div>, but not an actual div.</p>
I'm doing some of these basic lessons for HTML on Codeacademy, and I've hit my first round-block. Why doesn't this construct work properly?
<h1>
First text.
<h4>
I'm a different size than the first text.
</h4>
I'm not the same size as the first text. Why?
</h1>
I don't really know what headings are. Code Academy hasn't really explained much.
Thanks to anyone who takes the time to look at my n00b question.
I can't find a good reference for this, but it looks like nesting these tags is simply not allowed.
Browsers are pretty lenient about what they'll attempt to display. In this case, I believe the browser closes the h1 tag for you when it encounters the h4 tag. Then it quietly ignores the spurious </h1> it finds later—remember that it already closed it for you.
So the actual elements I see in Chrome are roughly this:
<h1>First text.</h1>
<h4>I'm a different size than the first text.</h4>
I'm not the same size as the first text. Why?
You can see this yourself in Chrome's developer tools (or the equivalent in your browser of choice).
UPDATE
The HTML 5 spec is a good place to learn about this. If I'm understanding it correctly, h1, h2, etc. are "flow content" and expect "phrasing content" to be nested inside (not other flow content). I'm new to reading this spec, so I may be misunderstanding the structure of the document. Someone please correct me if I'm wrong!
If you want to achieve this used span tag instated of nesting head tag.
Like this :
<h1>
First text.
<span>
I'm a different size than the first text.
</span>
I'm not the same size as the first text. Why?
</h1>
CSS:
h1 span{
font-size:20px;
display:block;
}
Heading tags are block level elements like <p> tags. You can think of them taking up a whole line. Thus with your example you're trying to squeeze a whole line inside of a full line. It just won't fit. Your browser probably assumes you meant to have a </h1> right before the <h4> tag in your example. Thus the remaining text after the </h4> tag is just seen as plain text and the closing </h1> tag is simply ignored.
If you want switch between h1 text and h4 text. you need something like this:
<h1>first text.</h1>
<h4>I'm a different size than the first text.</h4>
<h1>I'm now the same size as the first text</h1>
If for some inexplicable reason, you want the h1,h4,h1 tags in the same line. You'll need to use css. You could add a class, then set them as inline block. However, if you just want to change the styling of text in a line, you should use span tags instead.
I have a long one-page HTML webpage with anchored links (llorch.org). But I want links to the blue border instead of h2.
<h2><a name="AboutMe">Sobre mí</a></h2>.
In order to make that possible, I tried to link to div instead of h1. So.
<a name="expositio1"><div class="expositio"></a>
<h2><a name="AboutMe">Sobre mí</a></h2>
And it works: http://jsfiddle.net/jv4cK/
But it's not validated.
Is there another way to link to a border? Oh, I forgot to say: it works in every browser, except IE. IE makes this weird border above the blue one.
Where you currently have:
<div class="expositio"><a name="expositio2"></a>
Adjust it to use:
<div class="expositio" id="expositio2">
The existing bookmark for #expositio2 should jump to an element with this id. Using the name attribute is actually deprecated, so using an id is the correct way to do this.
i have a set of items (or a list of items, but i don't want to imply the usage of list), they contain an image link, a title, and a description. The image link needs an hover effect (alpha changes when mouse over), and there's a certain way I want to lay out them: image on the left, then title and description on the right. also there is background for the whole block of items.
here's a screenshot of what i want it to look like:
alt text http://img26.imageshack.us/img26/9806/screenshothmr.png
so my question is what is a good semantic html structure for this? i tried to use dl like this:
<dl>
<dt></dt> <!-- using the background of anchor for the hover effect -->
<dd>Title<p>description goes here</p></dd>
<dt>...
</dl>
but i'm having a hard time to get the css working for this. e.g. i need an extra background for each set of a, dt and dd, and i don't wanna use 3 different images to combine the background. so now i'm thinking to use a bunch of divs to do this:
<div>
<!-- image link with background hover -->
<h4>Title</h4> <!-- i also wanted to use h4 inside the dd, but it won't pass validation -->
<p>description goes here</p>
<div>
the problem with this layout is that it doesn't look semantic to me. i could wrap it around in the li with an unordered list, but that seems like extra markup.
maybe i'm just being too picky, but i do wanna find out if there's a good solution for this. it's quite a long question, and thank you for reading it to the end.
I'd say that using <DL> for this purpose is actually less semantic then using <DIV> - you're most certainly not creating a definition list.
Link, header and paragraph wrapped in a div seem perfectly acceptable to me. You can try using unordered list instead; but you'll likely have same (or worse as you won't have dt / dd separation anymore) problems with CSS as you did with <DL>. Plus using header tags won't validate within list item either, so you'll have to resort to another paragraph / div / span - definitely less than ideal.
Update (based on idrumgood's comment below):
Header (and other block-level elements) do validate within unordered list item, so perhaps the following approach would both be semantic and work with your styles:
<ul>
<li>
<!-- image link with background hover -->
<h4>Title</h4>
<p>description goes here</p> <!-- perhaps you won't need the actual paragraph tag -->
</li>
</ul>
I think your latter example is perfectly good. You're using tags that aptly describe the content they contain, and even if you were to turn off your styles, the general idea of the page would still be there (a key to semantic web).
I agree with idrumgood, this isn't a list of projects, it's a set of projects. Use the divs, it is a perfectly valid usage of it. If you were using HTML5, you would use "section" for each item and "figure" for the screenshot.