Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I understand that rel got something to do with relationships between things (documents? elements?) but I don't really get anything past that. What exactly does it do when used in the achor tag ?
Also, are there specific values for x in rel="x"?
Typically they are used to provide information to search engines about the structure of your website. For instance, you can give links a next or prev rel attribute for paginating links (links which show the next/last set of search results); A nofollow to inform search engines not to crawl (this is also good for not passing SEO 'link juice' to external or low priority pages); Or you could supply a canonical value to tell search engines which is the default link for the page it is looking at (sometimes pages are accessible via a number of different links, and this avoids indexing of duplicate content which could hurt your SEO).
This describes only a few possible uses - it is a very versatile tag.
With regards to navigation, pagination and canonicalization, here are couple of useful links from Google:
https://web.archive.org/web/20180125083221/https://support.google.com/webmasters/answer/1663744
https://support.google.com/webmasters/answer/139394
it specifies the relationship between the current document and the linked document.
here you can find a good reference:
http://reference.sitepoint.com/html/a/rel
and this was helpfull to me too
http://www.falsepositives.com/index.php/2009/03/24/html-tags-and-rel-attributes-you-really-should-know/
Regards
the rel attribute links files such as CSS(cascading Stylesheets) JS(Javascript), and other indexed files to its sources.
For example if I wanted to link a stylesheet to my index.html
I would type
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
Let's see some examples of possible values of rel, which indicates the relationship between the href page(linked document) and the actual page:
cc by 2.0
Here the page indicates that the destination of that hyperlink is a license for the current page
<a rel="directory" href="http://dmoz.org/Computers/Internet/">Computers/Internet</a>
In this one the page indicates that the destination of the hyperlink is a directory listing containing an entry for the current page.
Check more at http://microformats.org/wiki/rel-faq#How_is_rel_used
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 months ago.
Improve this question
So I am now learning html, and I was just wondering why tags such as cite even exist. When I open a website as a user, I still see the text as italic when the code is written as cite.
I found that the tags are useful when it comes to screen readers, so basically for users that have problems with their vision.
Are there any more reasons for these tags? Thank you so much in advance!
Tags are small snippets of HTML coding that tell engines how to properly “read” your content. In fact, you can vastly improve search engine visibility by adding SEO tags in HTML.
When a search engine’s crawler comes across your content, it takes a look at the HTML tags of the site. This information helps engines like Google determine what your content is about and how to categorize the material.
Some of them also improve how visitors view your content in those search engines. And this is in addition to how social media uses content tags to show your articles.
In the end, it’s HTML tags for SEO that will affect how your website performs on the Internet. Without these tags, you’re far less likely to really connect with an audience.
About cite tag: The tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.). Note: A person's name is not the title of a work. The text in the element usually renders in italic.
Regarding the cite tag, according to MDN:
The HTML element is used to describe a reference to a cited
creative work, and must include the title of that work. The reference
may be in an abbreviated form according to context-appropriate
conventions related to citation metadata.
This enables you to manage all the css applied to quotes easily, were that to be your use case (if you happened to have a lot of quotes on a site). The italics you have observed are part of that css, or rather the default css applied by the browser.
In the broader spectrum
Oftentimes you will run into tags that as of today are not in use anymore. There's different industry standards for different time periods.
All of the tags exist, because there was a reason for web browsers to have a specific way of reading a piece of content.
For example centering a div used to be an almost legendary task that was achievable using multiple methods, all of which had different advantages and disadvantages. However, nowdays it's customary to use the flexbox.
Bottom line is its a way for web browsers and search engines to read and interpret the content you're providing
Tags such as and are used for text decoration nothing else you can also change text fonts and styles by using CSS.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I have some questions about meta tags.
At the top of a tab, where the title shows up, there's an image next to it. How do I add an image like that?
The <meta name="keywords" content="HTML, Questions," meta tag, does it still have any purpose?
Why is <meta name="author" content="Firstname Lastname" Used? What purpose does it serve?
How do you use <meta viewport>?
Looks like you didn't do a great research because all these answers can be found easily.
Metatags info: https://github.com/joshbuchea/HEAD#meta
1- It's called favicon.
2- Used to has a purpose but didn't more.
3- Crawlers like Google, Facebook, or even a custom, may identify the Author of the page accordingly to that information.
4- https://stackoverflow.com/a/14775557/2873889
In the past, meta tags were used by search engines to index web pages based on title, description, and even keywords. However, certain websites started overusing them, cramming popular keywords in the hope of getting better search results. Google, recognizing this, announced that they don’t use meta keywords or descriptions in their search algorithms for ranking purposes.
Coming onto one attribute at a time:
1) Description- Search engines generates a description from the content attribute.
When you share URL of your webpage to other websites or platforms, let's say you share a blog on Whatsapp, Whatsapp will show the description along with your URL to the users. You can try it on your own.
2) charset="UTF-8" - sets the encoding of your webpage. Another encoding is UTF-16.
3) Keywords- Keywords help other applications to know more about your website. Although many websites still use the keywords value of the name attribute, Google doesn't consider this in its search ranking algorithm or when displaying search results.
4) Author- You can set the author of a page using author attribute.
5) - Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
Meta tags can be used to perform the task of HTTP headers like redirection and refresh also.
To know more about meta tags you can refer to this link https://www.sitepoint.com/meta-tags-html-basics-best-practices/
Q1). You need to have a favicon . You can get more detail here: https://www.w3.org/2005/10/howto-favicon
Q2). Yes, meta tags are still useful.
Q3). This just states who created the webpage.
Q4). Check out https://www.w3schools.com/css/css_rwd_viewport.asp
Lastly, just look at w3schools.com and codeacademy.
You can add a favicon by using <link rel="icon" href="#" sizes="16*16"> and insert the image you want for your favicon in the href.
The keyword tag is used for search engine indexing.
The author tag is used to identify the creator of the content.Yes,both of them are still useful.
<meta name="viewport> is used to set the size of the visible portion of the document in different browsers:
<meta name="viewport" content="width=device-width, intial-scale=1.0">
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I have these subdomains:
uk.example.com
india.example.com
es.example.com
And each one has content specific per each country.
If I go to google.co.uk I have to see only contents from uk.example.com.
Which is the right metadata for this?
EDIT:
Google does not use locational meta tags (like geo.position or
distribution) or HTML attributes for geotargeting.
So, you can't use <html lang="en-UK"> as I originally said.
But it seems from here:
The first three elements used for geotargeting are strongly tied to
the server and to the URLs used. It's difficult to determine
geotargeting on a page by page basis, so it makes sense to consider
using a URL structure that makes it easy to segment parts of the
website for geotargeting.
that specifying a url, like you did, is enough!
source: http://googlewebmastercentral.blogspot.co.il/2010/03/working-with-multi-regional-websites.html or https://support.google.com/webmasters/answer/182192?hl=en#2
OLD POST:
Google supports rel hreflang
<link rel="alternate" hreflang="es" href="http://www.example.com/" />
<link rel="alternate" hreflang="es-ES" href="http://es-es.example.com/" />
<link rel="alternate" hreflang="es-MX" href="http://es-mx.example.com/" />
<link rel="alternate" hreflang="en" href="http://en.example.com/" />
(source: http://googlewebmastercentral.blogspot.dk/2011/12/new-markup-for-multilingual-content.html)
but if you're buying new domains, it's best to have correct ccTLD:
If you use a ccTLD or a gTLD together with Webmaster Tools, then we'll mainly use the >geotargeting from there
(source: http://www.seroundtable.com/seo-geo-location-server-google-17468.html)
see also:
Which one is the right way to add geolocation meta info to a site?
http://googlewebmastercentral.blogspot.in/2013/05/6-quick-tips-for-international-websites.html
You can use the geotargeting tool in Webmaster Tools to indicate to Google that your site is targeted at a specific country. Do this only if your site has a gTLD (generic top-level domain name). However, don’t use this tool if your site targets more than a single country. For example, it would make sense to set a target of Canada for a site about restaurants in Montreal; but it would not make sense to set the same target for a site that targets French speakers in France, Canada, and Mali."
https://support.google.com/webmasters/answer/182192?hl=en#2
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
This seems like kind of a basic question. What are the reasons one would choose to use a css document instead of altering the style with the style tags in the html document? Is it not possible, for instance, to alter IDs and classes from within the html style tags? Thanks- this is my first stackoverflow question!
There's nothing technically wrong with using the style tag, but most pages have a seperate style sheet file.
Here are some reasons to use a seperate style sheet file:
The page may load faster due to asynchronous loading by the browser.
Seperates your HTML markup from your CSS styles.
Caching.
Easier to maintain because all the CSS is in one place.
You may also want to look into LESS or SASS.
There are several benefits
Reusability. An external site sheet can be used by multiple documents, so you don't have to write a new style sheet for each.
Coherence. With external style sheets you can be sure that the documents have at least the same basic styles and are visually consistent. Embedded style sheets tend to drift away from the standard.
Performance. An external style sheet can be cached by the browser, which means it doesn't have to be transferred every time the client requests a document. An embedded style sheet has to be transferred every time the browser requests a document.
Maintainability. If you have a set of documents that have the same visual appearance, and a change has to be made (changes to the corporate identity for example), if the style sheet is external you have to change it in only one place. Using embedded styles you would have to make the same change in each document.
Check out this LINK
In my own words, using CSS makes thing a lot simpler as adding styles for each tag in HTML is basically just not practical. Hence defining how a particular element will look on the page just once and then reusing the same style multiple times saves a lot of time
CSS files is cacheable by the browser, the style tag in an HTML document just adds an extra file size overhead that needs to be downloaded everytime.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
In our project we both use input type=hidden elements and divs with display:none css for storing some data on html page without showing it to user.
So i wonder which way is more suitable in both performance and code integrity and html semantics?
The hidden input will be hidden regardless of the styling rules of the document (CSS), this may make it better performance wise but I don't have the data to show this. Having said that, input controls are meant to be submitted as part of a form.
There are other methods as well, like the HTML5 custom data attributes or using a script tag:
<!-- Custom data attribute -->
<div id="product" data-id="42">
<h1>Product name</h1>
</div>
<!-- JSON data embedded in a script tag -->
<script type="application/json">
{ "id": 42 }
</script>
There are many factors involved in performance. But unless you are storing a ton of data the performance differences are likely indistinguishable.
What's best for code integrity and semantics is dependent upon the data and how you are using it.
There are many options for storing data:
Storing data in a hidden input which is great for use with forms:
<input name="mydata" type="hidden" value="some data" />
Storing data in a hidden html tags which is often frowned upon by search engines because of it's abuse in trying to improve SEO ranking:
<div id="mydata" style="display:none">
some data
</div>
Storing data in javascript which is great for quick easy access:
<script type="text/javascript">
var data.id = 123;
var data.list = ["Yes","No","Maybe"];
</script>
Storing data in a META Tag which I've used on a rare occasion: http://code.lancepollard.com/complete-list-of-html-meta-tags#create-custom-meta-tags
<meta name="mydata" content="some data"/>
Storing data in a cookie which as long as cookies haven't been disabled this option allows for the data to expire:
http://www.w3schools.com/js/js_cookies.asp
HTML5 has an SQLite database:
http://html5doctor.com/introducing-web-sql-databases/
HTML5 specs allows for custom data attributes
http://html5doctor.com/html5-custom-data-attributes/
Semantics dictates the answer is - it depends on how you're using it.
If the data needs to be submitted as a form or is closely related to a form then use the input. I'm not sure what situations wouldn't fall in that category, since data that's only used on one page can be stored in a javascript variable if the user shouldn't see it.
I think, that first solution (with input type=hidden) is more pretty, because second solution depends on css, which may be disabled in browser and your data will be shown to user.