I cannot comprehend this.
Using <cite> text </cite> separately like this just makes the text appear a little bite italic, but i cannot understand the purpose of cite being used as an attribute in blockquote.
For example:
<blockquote cite="http://www.example.com">
For 50 years, WWF has been protecting the future of nature.
</blockquote>
Now, where does this url link appear? Everywhere i look it just says "it's for reference", but reference where?
The link is not showing on the output unless I use href and <p> to make it appear.
So what exactly does this attribute cite does in this case? Where does this url appear?
As per https://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#attr-q-cite
Content inside a q element must be quoted from another source, whose address, if it has one, may be cited in the cite attribute. The source may be fictional, as when quoting characters in a novel or screenplay.
If the cite attribute is present, it must be a valid URL potentially surrounded by spaces. To obtain the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents should allow users to follow such citation links.
<p>
... or better said by Frank,
<q cite="https://www.goodreads.com/author/show/22302.Frank_Zappa">
So many books, so little time.
</q>
</p>
Since it's not a link (not something a human can follow) it's clearly for SEO purpose, but mostly for indexing. So if you take a quotation from another resource, like another websites page, a cite attribute pointing to the site you've taken that quote from - helps search engines index such resources relations.
Related
I tried to search the web about what is the purpose of the HTML <var> Tag and didn't find any good explanation or let say I'm not satisfied yet. I can read what they say about it but I don't understand the purpose. I tried two different lines of code and both gives me the same thing now I need to know what exactly is <var> and why we should use it rather than a single style.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
<p style='font-style:italic'>y = mx + b</p>
Reference to name only one: https://html.com/tags/var/
Funny because I read the explanation but I still don't see what is the use of <var> other than just making the text italic!
Here is how W3Schools defines HTML:
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
The way I see it is that, even though <var> and <i> have the same output printed to the browser, they mean different things, specially if you are "reading" pages without opening a browser like search engines do.
Check it is not particular to the example you mentioned. Look at the example on <b> and <strong> (https://www.w3schools.com/html/html_formatting.asp). They also have the same output but mean different things.
Semantics.
<p> tags are generic paragraph elements, typically used for text.
<var> elements represent the name of a variable in a mathematical expression or a programming context.
If you italicize a paragraph it may resemble the default styling of the <var> element, but that's where the similarities end. Also, they're different to screen readers.
Here's an example using both elements and you can see that semantically, it's a paragraph of text that contains references to variables in a mathematical sense:
<p>The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length, <var>w</var> the width and <var>h</var> the height of the box.</p>
When I want to emphasize or discuss a word that is related to computer code inside a block of normal text, I use the <code> tag. For example:
If you set the variable foo to the value 'bar', then something will happen. If you set foo to any other value, then nothing that's any good will happen.
What is the best semantic HTML5 tag to use to emphasize or discuss a word that is not related to computer code? The way I am thinking of this, it would be (or could be) styled like <code> but not monospace. For example:
The word math is a shortened version of the word mathematics, which has its root in some ancient language that I am not going to research right now.
If you're looking for the tag indicates that its content is being referenced / used as an object for discussion
you can use <dfn> tag. According to MDN:
The HTML Definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence.
I just found the updated meaning of the <i> tag for HTML5. From MDN:
The HTML <i> element represents a range of text that is set off from the normal text for some reason. Some examples include technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type:
Musa is one of two or three genera in the family Musaceae; it includes bananas and plantains.
It is a good idea to use the class attribute to identify why the element is being used, so that if the presentation needs to change at a later date, it can be done selectively with style sheets.
So, this is what I am going to do for this case... <i class="example"> or similar.
html4 says this:
In order to avoid problems with SGML line break rules and inconsistencies among extant implementations, authors should not rely on user agents to render white space immediately after a start tag or immediately before an end tag. Thus, authors, and in particular authoring tools, should write:
<P>We offer free <A>technical support</A> for subscribers.</P>
and not:
<P>We offer free<A> technical support </A>for subscribers.</P>
and this:
SGML (see [ISO8879], section 7.6.1) specifies that a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag. This applies to all HTML elements without exception.
The following two HTML examples must be rendered identically:
<P>Thomas is watching TV.</P>
<P>
Thomas is watching TV.
</P>
So must the following two examples:
<A>My favorite Website</A>
<A>
My favorite Website
</A>
So, one shouldn't rely on them being ignored or not. What about html5?
UPD Or let us put it this way: can I treat them as being ignored or sometimes they matter (manifest themselves in one way or another)? In which ways, if any?
UPD Um, should I have said I had refactoring in mind...? I'm trying to make templates a little more readable, that's what made me think about it.
Spaces are definitely not ignored in inline tags (i.e. <a>, <span>, <strong>, ...), for instance in this example,
<p>We offer free <a>technical support</a> for subscribers.</p>
<p>We offer free<a> technical support </a>for subscribers.</p>
if you set the CSS to something like this
a { text-decoration: underline; }
you can definitely see the difference.
Sometimes line breaks can produce weird results in inline tags, for example if you write the code like this,
<p>We offer free <a>
technical
support
</a> for subscribers.</p>
it seems to ignore the first line break, but not the last.
Here's a fiddle for both examples: http://jsfiddle.net/Niffler/fnnanru2/
Within block tags (i.e. <p>, <h1>, <div>, ...) spaces as well as line breaks at the beginning or end of the tags should always be ignored (i.e. <p>test</p> should look the same as <p> test </p>).
And as another user wrote in a comment, a line break will generally render the same as a space.
Also, multiple spaces or line breaks or combinations thereof generally get summarized to one space.
SHOULD spaces be ignored by browsers, and ARE spaces ignored by browsers are two totally different questions.
You should not put spaces after the opening tag, even though it (sometimes) works. Because of the documentation on this, the browsers could change to obey that rule without notice.
They shouldn't be rendered the same way, but currently most browsers render
<P>We offer free<a> technical support </a>for subscribers.</P> and
<P>We offer free <a>technical support</a> for subscribers.</P>
the same.
Remember: all of this could change without notice, so I would definitely follow the documentation's rules.
I want to give different name to the text I have like "wizerunek firmy" (it's corporate identity in Polish) and I want to put english translation of that text (because of SEO reasons). What tag and attribute should I use to have good semantic html? alt attribute is good candidate, but what tag? or maybe there is special tag just for this kind of things in html5.
The appropriate element in most cases would be span (i.e., there is no element especially for offering translations). With span, you may only use the global attributes.
Of those global attributes, only the title attribute may show content to the user. The passage "could be a footnote or commentary on the text" might apply in your case (it’s not a 100% match, though). But don’t use it if the translation is important or relevant for the content!
As you want to offer a translation, you should use the lang attribute. Because the attribute applies to both, the element content as well as the attribute value, you need to add two span elements:
<span title="corporate identity" lang="en"><span lang="pl">wizerunek firmy</span></span>
(Depending on context, there might be more appropriate elements (abbr, b, dfn, i etc.), but don’t use these in the general case, only if their definition applies to your specific use.)
If the translation is relevant/important, don’t hide it in a title attribute (many users/consumers won’t notice or can’t access it):
wizerunek firmy (angielski: <span lang="en">corporate identity</span>)
Maybe something like that:
<p>Is true that <i class="foreignphrase" lang="pl">Polska jest wspaniałe</i> all agree to that.</p>.
the 'semantically correct' tag would all depend on where on the page your phrase is and what context it is used in.
I think that the tag I'm looking for is em, and the code can look like:
<em alt="Corporate Identity">Wizerunek Firmy</em>
EDIT
if em and alt is not good then it can be:
<i title="Corporate Identity">Wizerunek Firmy</i>
Yet another tag that was given new meaning in HTML5, <small> apparently lives on:
http://www.w3.org/TR/html-markup/small.html#small
The small element represents so-called “fine print” or “small print”,
such as legal disclaimers and caveats.
This unofficial reference seems to take it a little further:
http://html5doctor.com/small-hr-element/
<small> is now for side comments, which are the inline equivalent of
<aside> — content which is not the main focus of the page. A common
example is inline legalese, such as a copyright statement in a page
footer, a disclaimer, or licensing information. It can also be used
for attribution.
I have a list of people I want to display, which includes their real name and nickname. The nickname is sort of an "aside", and I want to style it with lighter text:
<li>Laurence Tureaud <small>(Mr.T)</small></li>
I'll need to do something like this for several sections of the site (people, products, locations), so I'm trying to develop a sensible standard. I know I can use <span class="quiet"> or something like that, but I'm trying to avoid arbitrary class names and use the correct HTML element (if there is one).
Is <small> appropriate for this, or is there another element or markup structure that would be appropriate?
The spec you're looking at is old, you should look at the HTML5 spec:
https://html.spec.whatwg.org/multipage/
I suggest <em> here instead of small:
<p>Laurence Tureaud also called <em>Mr. T</em> is famous for his role
in the tv series A-TEAM.</p>
<small> is not used commonly in an article sentence, but like this:
<footer>
<p>
Search articles about Laurence Tureaud,
<small>or try articles about A-TEAM.</small>
</p>
</footer>
<footer>
<p>
Call the Laurence Tureaud's "life trainer chat line" at
555-1122334455 <small>($1.99 for 1 minute)</small>
</p>
</footer>
Article sentence:
<p>
My job is very interesting and I love it: I work in an office
<small>(123 St. Rome, Italy)</small> with a lot of funny guys that share
my exact interests.
</p>
Personally I would think <small> would not be the correct tag for this as it suggests the text will be physically smaller which doesn't seem to be the case with your example. I think using a <span> would be more appropriate or possible the HTML <aside>. http://dev.w3.org/html5//spec-author-view/the-aside-element.html
You should ask yourself how you would prefer the document to be displayed when style sheets are not applied. Select the markup according to this, instead of scholarly or scholastic theories about “semantic markup” (see my pragmatic guide to HTML).
If smaller size is what you want, then use <small> or <font size=2>. The former is more concise and easier to style, and it is more “resistant” (on some browsers, settings that tell the browser to ignore font sizes specified on web pages do not remove the effect of small). So it’s a rather simple choice.
On the other hand, font size variation inside a line of text is typographically questionable. In printed matter, it is much more often accidental, an error, rather than intentional. Putting something in parentheses is normally a sufficient indication of being somehow secondary