Ok the topic I asked here is about "anchor" is that correct?
Ok this actually works now
**Development** this is on the First Site
And then where the Development is: (2nd site)
<a name="#tips1">**Developer**</a>
Did I miss something here?
Ok this is this first site:
http://i197.photobucket.com/albums/aa253/tintingerri/Test/test-4.png
Now if you can see, if you click on the "Development" it will go to the 2nd site. And in this 2nd site, this is where I listed the "Development" and "Consulting" in one page.
Now I would like that if the user click on "Consulting" it would go directly to the "Consulting" text and not to "Development" text first because they are written in one page.
So is this anchor?
I'm not sure I understand what you mean.
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
<hr />
<p id="apple">This is the Apple section.</p>
<hr />
<p id="banana">This is the Banana section.</p>
<hr />
<p id="grapes">This is the Grapes section.</p>
When you click on a link, it will take you to the section it's linked with via element IDs. The sections can be behind the <hr />.
Linking to another page is similar:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
Is this what you meant?
[EDIT]
After clearing the issue in the comments, the solution indeed turns out to be anchors. Page one, say, index.html, will have this code:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
While page two, say, fruit.html, will have this code:
<p id="apple">This is the Apple section.</p>
<hr />
<p id="banana">This is the Banana section.</p>
<hr />
<p id="grapes">This is the Grapes section.</p>
You don't have to use <p> tags, of course. You'll probably want to use <div> containers instead:
<div id="apple">
<p>My apple stuff</p>
</div>
<hr />
etc.
I'm really not sure what you're asking here, but I get the impression it's along the lines of:
If someone clicks the links, how do I show information related to that link on the same page?
Which is relatively easy:
html:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
<div id="apple" class="panel">
<p>Apple Stuff</p>
</div>
<div id="banana" class="panel">
<p>Banana Stuff</p>
</div>
<div id="grapes" class="panel">
<p>Grapes Stuff</p>
</div>
css:
.panel {
display: none;
}
.panel:target {
display: block;
}
JS Fiddle demo of the above.
I think you are trying to link to another place on your page?
For absolute, the following syntax is used: Link text.
With relative addressing, it is only necessary to use the name of the web page file you are linking to as the value in the href attribute provided that the page containing the link resides in the same folder as the page acting as the link's target.
Maybe still this doesnt answer your question?
For the same page, A named anchor inside an HTML document:
<a name="useful on same page">Useful Paragraph</a>
Create a link to the "Useful Paragraph" inside the same document:
Useful Paragraph
If I still havent answered the question, please provide more info
With an ul, very simple:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
Related
I just recently started learning semantic HTML tags and I'm a bit confused about when to use section or article when I want to make an overview of the whole website or just a list of contents.
For example, how would you structure something like this with semantic tags. Each item of this list would have their own page and a link in the main nav bar. And each of these pages would contain couple of blog posts inside.
<main>
<section>
<h2>Contents of this site:</h2>
<p>Here is a quick summary of what you can see on this website.</p>
<ul>
<li>
<h3>About me</h3>
<p>Learn more about the author of this site.</p>
</li>
<li>
<h3>Favorite music</h3>
<p>Here I will tell you about some of my favorite musicians.</p>
</li>
<li>
<h3>Favorite games</h3>
<p>Here I will tell you about some of my favorite games.</p>
</li>
<li>
<h3>Favorite books</h3>
<p>Here I will tell you about some of my favorite books.</p>
</li>
<li>
<h3>Favorite movies</h3>
<p>Here I will tell you about some of my favorite movies.</p>
</li>
<li>
<h3>Favorite recipes</h3>
<p>Here I will tell you about some of my favorite recipes.</p>
</li>
</ul>
</section>
</main>
Would this be the best practice or should I wrap each <li> inside of an article? Or should I just leave out the unordered list and just use articles only instead?
Thank you in advance for help explaining this.
If you want to make use of semantic <article> tag in this code, you can wrap your <h3> & <p> tag with <article> tag instead of wrapping <li> with <article> tag, and it won't work as you expected.
That all looks pretty good to me.
<section> is best used to divide up a page when you have different topics or different things to highlight. Say for example you have a Home page with a general summary at the top and a contact form lower down then a call to action lower down. You might want to use three sections for that. But, for semantics... sections are generic and there may be a tag which suits better and is more specific for the info you're displaying (see the link below).
<article> would be really good to use as a wrapper around the actual text for each blog post. Think of this one as highlighting the individually composed or unique info. News articles, reviews etc.
Info : https://css-tricks.com/how-to-section-your-html/
I wrote some custom HTML code in my Wikidot article - instead of the "original" Wikidot syntax, I have to use <a href="/page"> for links.
The content of my custom HTML block is like this:
<section class="intro">
<div class="container">
<h1>Headline-line text</h1>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>Time value </time> Text. Link here.
</div>
</li>
</ul>
</section>
The problem is that it loads the entire content of the HTML into that carefully selected small portion of the original site.
I can only assume that it has something to do with <div>s, as I've already seen this issue on other sites. Hence my assumption is that there must be a general source of this issue, and this is why I'm asking.
What's the reason of this problem and how can I avoid it?
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 getting 100 errors when validating my site. I don't want to continue the build until I get this worked out. I've gone line-by-line and I'm not understanding why I have these issues. The rough draft start page is at www.flynntec.com. An example error:
document type does not allow element "h3" here; assuming missing "li" start-tag [XHTML 1.0 Transitional]
or
document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag [XHTML 1.0 Transitional]
followed by
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
Sample HTML:
<li class="menu_right">Access
<div class="dropdown_5columns align_right">
<div class="col_5">
<h2>Microsoft Access</h2>
</div>
<div class="col_1">
<img src="media/Access Logo.png" width="120" height="118" alt="Microsoft Access" />
</div>
<div class="col_1">
<ul class="greybox"><h3>Beginner</h3><li>Welcome to Access</li>
<li>The Power of Access</li>
<li>Intro to Databases</li>
<li>Intro to Tables</li>
<li>Creating Forms</li>
<li>More...</li>
</ul>
</div>
<div class="col_1">
<ul class="greybox"><h3>Intermediate</h3><li>Custom Queries</li>
<li>Create Reports</li>
<li>Primary Key Guide</li>
<li>Filtering Quickly</li>
<li>More...</li>
</ul>
</div>
<div class="col_1">
<ul class="greybox"><h3>Advanced</h3><li>Web Integration</li>
<li>Advanced Forms</li>
<li>Using Triggers</li>
<li>Shortcuts</li>
<li>Expression Builder</li>
<li>More...</li>
</ul>
</div>
<div class="col_5">
<h2>Additional Free Resources</h2>
</div>
<div class="col_3">
<img src="media/youtube-logo.jpg" alt="YouTube Picture" name="youtube" width="90" height="70" class="img_left imgshadow" id="youtube_logo_2" />
<p>Microsoft Access is an ideal small-business database engine. YouTube is a great source for Access guides. We have compiled the best, most popular Access tutorials from YouTube and put them here for your convenience. </p>
<br />
<img src="media/microsoft-logo__111129012732.jpg" alt="" name="microsoft" width="90" height="24" class="img_left imgshadow" id="microsoft_logo_2" />
<p>Microsoft has fantastic resources on their website. Microsoft Training can be found here.</p>
</div>
</div>
</li>
Yes, there are opening and closing UL's.
Some HTML elements can only contain certain other HTML elements. An UL can only contain LI elements, so a H3 inside an UL is an error.
Either move the H3 out of the UL, or put it inside a LI.
What effect are you trying to achieve?
Also, even though your webpage thinks it's XHTML Transitional, you are serving it up with a text/html MIME type, so the browsers will treat it as HTML.
If you really want XHTML, make sure the MIME type is application/xhtml+xml. But then older versions of IE won't display it.
You can't have a h3 element directly inside ul - it needs to be within an li, or before the ul - that should already fix the majority of the validation errors...
As the error clearly states, your HTML is invalid.
<ul>s can only (directly) contain <li>s.
<ul> tag is for placing only <li> tags inside, why don't you put that <h3> before <ul> elements?
XHTML Transitional is complaining because you have an <h3> directly inside of your <ul>, without containing it in a <li>. This actually is bad practice.
<ul class="greybox"><h3>Beginner</h3><li>Welcome to Access</li>
<li>The Power of Access</li>
<li>Intro to Databases</li>
<li>Intro to Tables</li>
<li>Creating Forms</li>
<li>More...</li>
</ul>
You have h3's directly inside ul's for a start. They need to be outside the list, our inside an li.
I am finding that the more semantic I make my HTML using the new HTML 5 tags the easier it is to style and work with the document. I am new to HTML 5 and only a HTML novice but I want to make my HTML 5 as semantically correct as possible. Currently I have my HTML 5 footer divided like so.
<footer>
<section>
<h2>Contact</h2>
<ul>
<li>Email</li>
<li>Tweet</li>
</ul>
</section>
<section>
<h2>Explore</h2>
<ul>
<li>Stack Overflow</li>
<li>LinkedIn</li>
<li>Flickr</li>
<li>Google+</li>
</ul>
</section>
<section>
<h2>About</h2>
<p>
snip
</p>
</section>
</footer>
The particular tags I am querying are section and use of the h2 tag. I would think section is more semantically correct that aside or article as each section of the footer is, well, a section. The h2 is also a concern to me. I would like to use H1 as it is the first heading in the section but I am afraid the google spider will shun me and keep me from making web friends if I use h1 over h2.
Thoughts from people who have worked with semantics are very much appreciated.
You may want to add the address-tag around your contact information:
<footer>
<section>
<h1>Contact</h1>
<address>
<ul>
<li>Email</li>
<li>Tweet</li>
</ul>
</address>
</section>
<section>
<h1>Explore</h1>
<ul>
<li>Stack Overflow</li>
<li>LinkedIn</li>
<li>Flickr</li>
<li>Google+</li>
</ul>
</section>
<section>
<h1>About</h1>
<p>
snip
</p>
</section>
</footer>
this would be semantically correct but watch out for older browsers which are having problems with the implementation of <address>. In Firefox 3.6.12 were no block-elements allowed to be placed inside <address> like discussed here.
EDIT:
Also change the <h2> to <h1>:
Notice how the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.