There is web-site for Nodeclipse FOSS project http://www.nodeclipse.org/
I am not quick at web development and styles, and there is problem I don't know how to approach:
On the main page http://www.nodeclipse.org/index.html there is <pre> element (source line)
and after it style is always different than at pragraph start.
I guess there's something to be in applied http://www.nodeclipse.org/pipe.css" (source), but what to look for? (As it is not about pre element but what happens after it)
FOSS project needs help with web.
As you can see, <pre> tag usage inside <p> tag breaks the DOM structure
So the text after pre tag are not enclosed inside the <p> tag.
It is not advised to use pre tag to display a content that doesn't lose it's meaning if not pre-formatted.
So use a <a> tag or some other suitable tags like span (if you don't want it to be a clickable link) to display the url and style it accordingly.
Related
I've just been going through a my current project and removing excess html and css where not needed, removing divs around abjects that didn't need a div for example and I was wondering, why do we need achors around everything:
<a href="Cake">
<div>
<p>This is not a lie.</p>
</div>
</a>
Why not allow simply allow:
<div href="Cake">
<p>This is not a lie.</p>
</div>
I'm overly simplifying here, but it's about the concepts.
In HTML, every tag has a meaning and a function. Sometimes it's purely aesthetics (<b>, bold text), sometimes it's semantics (<span>, a new chunk of inline text), sometimes both (<h1>, a header starts here). The point is to mark portions of text with semantics.
The <a> tag is a hyperlink. Almost everything between <a> and </a> is supposed to behave like this: if clicked, jump to certain URL. Now that URL is a property of the <a> tag and you specify it via href.
This href does not make any sense outside of the <a> tag since back when HTML was born, CSS and JavaScript didn't exist so you couldn't do things like making a <span> clickable like we can today. But even today, it doesn't make sense to allow elements to adopt functionality of other elements as it taints their semantics.
In your second example you have completely removed the <a> tag, so it isn't a link any more. Even if the parser allows href on the div, it'd be wrong to suddenly make it behave like an a tag since it isn't.
I'm creating a basic HTML and CSS course and was wondering whether the use of the tag inside another tag is called inline style.
<p style="font-family:Impact"> blah </p>
Thank you.
Yes.
On the other hand, I wouldn't recommend teaching the "inline style" anymore.
It is considered as bad coding. In stead, drop this style and stick to internal and external stylesheets.
Read here for more info on the different kinds of stylesheets
It is a "local style sheet" that applies to a single element on a page. Note that the <p> tag is a block-level (vertical) element. This tag is not an in-line element. Here is an example of an inline style sheet usage
<p>This is <span style = "color:red">way important</span>.</p>
Is there a way to have blank HTML tags or in other words, tags that do nothing? For example <p> turns the inclosed text into a paragraph, <b> turns the text bold, <div> creates a box. I'm looking for a tag that has no effect on the text or it's environment. I want this so that I can customise it myself with css or js.
I am <x class="FancyText">king</x> of the world.
There are no “blank HTML tags”. What come closest are span and div, but the latter causes line breaks before and after (block rendering) by default and cannot be used in inline context, and the former does not allow any block-level elements inside it.
In practice, you can use a made-up element, like <foo>...</foo>, though with some problems on older versions of IE. This is widely regarded as a bad move, though; using span or div, as appropriate, with a class attribute is recommeded.
Consider explaining what you are really trying to achieve, instead of referring to fictional HTML tags expected to do nothing.
For this you'd use either the div or span element. From the HTML5 editor's draft:
The div element has no special meaning at all. It represents its children.
The span element doesn't mean anything on its own. ... It represents its children.
The difference between them is that the div element should be used where flow content is expected (that is to say, sections on a page), whereas the span element should be used where phrasing content is expected (within text).
In the example you've given, you'd want to use the span element:
I am <span class="FancyText">king</span> of the world.
You can do the following:
<div></div>
This will do nothing unless you add a class or id.
Or,
<span>Some text</span>
This will do nothing unless you add a class or id.
if you want to use <x ...> txt </x> as a place holder,
than any officially-unused set of chars will do fine.
I use <a> ... </a> for that
What is the difference between an HTML Element and an HTML Tag ?
Is there any difference with rendering ? Any there special considerations when using a tag or an element ?
<p> is a tag, specifically an opening tag
</p> is also a tag, a closing tag
<p>This is a paragraph</p> is an element — opening tag, closing tag, and contents
Generally when you’re talking about HTML, it doesn’t really matter which term you use, but if we’re getting technical, the above points illustrate it.
Unless I’m missing something, you can’t use an element without using a tag (because elements are made from at least one tag), and whenever you use a tag, you’ve got an element.
Element and Tag are two terms that generally refer to the same thing.
When programming against HTML, however, Tag usually refers to a string (eg, "<b>...</b>), whereas Element refers to a DOM object representing a tag.
Unless you mean the HTML tag <html></html> which tells the browser this is an HTML document and HTML elements which are everything else as already mentioned.
Are both <h1><a ...> ... </a></h1> and <a ...><h1> ... </h1></a> valid HTML, or is only one correct? If they are both correct, do they differ in meaning?
Both versions are correct. The biggest difference between them is that in the case of <h1><a>..</a></h1> only the text in the title will be clickable.
If you put the <a> around the <h1> and the css display property is block (which it is by default) the entire block (the height of the <h1> and 100% of the width of the container the <h1> resides in) will be clickable.
Historically you could not put a block element inside of an inline element, but this is no longer the case with HTML5. I would think that the <h1><a>..</a></h1> approach is more conventional though.
In the case where you want to put an anchor on the header, a better approach than <a id="my-anchor"><h1>..</h1></a> would be to use either the id or the name attribute like this: <h1 id="my-anchor">..</h1> or <h1 name="my-anchor">..</h1>
In pre HTML 5 this one
<a><h1>..</h1></a>
will not validate. You can use it in HTML 5.
However, i would use this:
<h1><a>..</a></h1>
unless you need to add more than < h1 > inside the < a >
<a><h1></h1></a> is not W3C valid... Basically, you can't put block elements inside inline elements
<h1><a>..</a></h1> and <a><h1>..</h1></a> have always behaved almost the same, when style sheets do not affect the rendering. Almost, but not quite. If you navigate using the tab key or otherwise focus on a link, a “focus rectangle” appears around the link in most browsers. For <h1><a>..</a></h1>, this rectangle is around the link text only. For <a><h1>..</h1></a>, the rectangle extends across the available horizontal space, since the markup makes the a element a block element in rendering, occupying 100% width by default.
The following shows how a focused <a href=foo><h1>link</h1></a> is rendered by Chrome:
This implies that if you style elements e.g. by setting a background color for links, the effects differ in a similar manner.
Historically, <a><h1>..</h1></a> was declared invalid in HTML 2.0, and subsequent HTML specifications followed suit, but HTML5 changes this and declares it as valid. The formal definition has not affected browsers, only validators. However, it is remotely possible that some user agents (probably not normal browsers, but e.g. specialized HTML renderers, data extractors, converters, etc.) fail to handle <a><h1>..</h1></a> properly, since it has not been allowed in the specifications.
There is seldom a good reason to make a heading or text in a heading a link. (It’s mostly illogical and bad for usability.) But a similar question has often arised when making a heading (or text in a heading) a potential destination for a link, using e.g. <h2><a name=foo>...</a></h2> versus <a name=foo><h2>...</h2></a>. Similar considerations apply to this (both work, there may be a difference since the latter makes the a element a block, and before HTML5, only the former is formally allowed). But in addition, both ways are outdated, and using the id attribute directly on the heading element is now recommended: <h2 id=foo>...</h2>.
H1 elements are block level elements, and anchors are inline elements. You are allowed to have an inline element within a block level element but not the other way around. When you consider the box model and the HTML spec this makes sense.
So in conclusion the best way is:
<h1>Link</h1>
do you want to use a hyperlink <a href="…">/a:link, or do you want to add an anchor to your heading? if you want to add an anchor, you can simply assign an id <h1 id="heading">. you can then link it as page.htm#heading.
if you want to make the heading clickable (a link), use <h1><a></a></h1>/h1 > a – blocklevel elements first, and inline elements inside
Also, there is style hierarchy differences. If you have it as <h1>Heading here</h1>, The styles of the anchor will overrule the styles of the h1 element. Example:
a {color:red;font-size:30px;line-height:30px;}
WILL OVERRULE
h1 {color:blue;font-size:40px;line-height:40px;}
I think the <h1>text</h1> is the least problematic with weak or old browsers, but modern browsers and powerful search engines are supporting both it and <h1>text</h1>; So it's a good freedom and useful to use both to improve our web page.
«Hope that could be useful»
Both are correct. They depend on the sizing of the anchor tag which you want and how you want your website laid out.
You can do <h1>Home Page</h1>, in which case it would return: Home Page But with an Anchor.
Or you can do <h1>Home Page</h1> and it would return a H1 hyperlink instead of just heading an anchor to the H1, like so:
Home Page
However, mostly you cannot add links within H1 because it will just render it as an anchor onto the h1 rather than adding a hyperlink. However, I think I'm right in saying that you could see a difference in behaviour for this on different browsers.
But correct me if I am wrong. :)