Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I'm relatively new to coding and am studying semantic HTML5.
I just came across the <aside> tag in which the instructive text indicated it's used for pull-quotes among other things like bibliography, footnote, etc.
I've often seen - and frankly used - <quote> myself, but now I wonder if it's more broadly accepted to use <aside>.
What's the common practice here, or are they simply interchangeable?
There's no quote element in HTML.
From html5doctor for aside:
Represents a section of a page consisting of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
blockquote (which is what I assume you meant):
The blockquote element represents a section that is quoted from another source.
Content inside a blockquote must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.
There's also q:
The q element represents some phrasing content quoted from another source.
Not sure where your aside description is from, but generally anything you're quoting from another source, use either blockquote or q. Anything relating, but not core to another piece of content on the page, use aside.
I think what you're looking for has already been answered here. In short, <aside> is for information that is related but not pivotal to the main text, while <q>, or the quote tag, is for information that is directly referenced in the main text and is required for the main text to make sense.
to summarize why (and not ) should be used for pull quotes, here’s how you can determine if you’re using these elements incorrectly:
If you can remove an from the page, and the content to which it’s tangential becomes incomplete, then you should not be using
If you can remove a from the page, and the content around it is complete even without it, then you should not be using
So only use to quote external sources that are part of the primary content, not for ‘side’ content that’s decorative or is repeated in the primary content. The two quotes in this very article are legitimate content because without them the content would be incomplete.
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 is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 months ago.
This post was edited and submitted for review 7 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
Can assistive technologies work properly if semantic tags are nested within a div used as a container to create the webpage layout?
I used to create the layout first with div containers using grid or flexbox, and later put the content inside, But I was wondering if this way of work affects the normal flow of assistive technologies.
Many semantic elements (e.g. footer, header, etc.) aren't that much different from a div CSS-wise. So, you can certainly customize them straight away without wrapping them.
I guess (mostly based on A11Y guides I've read through & axe output) that nesting doesn't really matter. It's to say, mostly a footer and a footer wrapped into a div are equivalent.
It depends on context for sure, there are elements (e.g. table, ul) that can only have children of certain types. Nesting in those contexts could lead to invalid (and not a11y-friendly) markup.
In the wild, I've mostly seen that people consider it "clean" to maintain the "top-level" markdown (header, nav, menu, main, section, article, footer) unwrapped (partially, because it's quite easy to achieve, I think, since you don't normally have a lot of CSS attached to those) & wrap all the rest as needed since "down there" on lover levels, the markup tends to get way less structured anyway.
All this however, seems to be rather a matter of preference.
It's probably worth checking out how the Document Object Model (DOM) is created to understand:
Tokenizing: The browser converts strings of characters into distinct
tokens—as specified by the W3C HTML5 standard for example, "<html>",
"<body>"—and other strings within angle brackets. Each token has a
special meaning and its own set of rules.
Here it is worth paying attention to the phrase "Each token has a special meaning and its own set of rules". Now let's check the rule for <div> from HTML5 standard:
The div element has no special meaning at all.
The div element is not a semantic element, and in this, it differs from semantic elements.
If you want to style the div element, then this may also not be a winning trick for constructing the Object Model. Styles have the task of presenting content to the user. When building the CSS Object Model (CSSOM), styles are tightly bound by rules to HTML elements (tokens). This brings us back to the semantics of HTML elements (tokens).
So your question is related to understanding the semantics of tokens (HTML elements). I would venture to suggest that the Accessible Rich Internet Applications (WAI-ARIA) standard is largely intended to add semantics to non-semantic HTML elements, including the HTML element <div>.
Summary: The use of semantic HTML elements makes it easier to understand the structure of the content, including users with disabilities.
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
I've been programming websites using html 4 for the past few years. Yesterday I've decide to move on and learn HTML5. Sadly, old browsers don't support HTML5, but I've found a js file"html5shiv" that will 'force' the browser to understand html5.
While learning HTML5 new semantics I've encountered few difficulties with understanding the difference between few elements.
When I looked at the <figure> tag, I read that:
"While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document."
What is the meaning that it won't affect the flow of the document if removed?
Also, what's the difference between <div> and <section>? Moreover, what's the difference between <article> and <section> or <div>?
Thanks in advance!
div and section will be treated identically by browsers (because unknown elements are treated as divs.) The advantage of section is, it makes it explicit to someone reading source code, that this element represents a distinct set of information from other sections. And presumably in the future, search engines will prioritize information contained within a section over information contained in a div. In practice (as of 2013) a site will look and work the same if you replaced every section and article with a div. so the advantage is a) semantic readability and b) future proofing.
AFAIK the article tag denotes that its child elements (often sections) should be considered as parts of a whole.
quoting w3schools: semantic elements:
The <article> element specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the web site.
Examples of where an element can be used:
Forum post
Blog post
News story
Comment
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I'm working on a script that is programmatically formatting web content. Because the content is generated in a WYSIWYG editor that I have no control over, all new lines of text are exported as <div>s.
My very first gut reaction is DON'T DO THAT! But why? There's nothing exceptional about the <p> tag. I am concerned about any potential problem. I'd rather not waste the effort selectively adding <p>s in code if I don't have to.
This got me thinking...
SEO: Will google hate me for it?
Accessibility: Will screen readers die on this text or ignore it maybe?
Fancy: Will double-tap to zoom break on mobile devices?
Similar but different: Using custom HTML Tags
INB4 somebody complains about IE.
p tags do actually behave radically different than div tags, which is sadly beyond your control since this has to do with DOM parsing rather than CSS. Thankfully, you will most likely run into less problems with div tags than the former.
Even though p tags are block elements, they are defined to only be allowed to contain phrasing content. In reality, this means that they can only contain elements whose default display type is inline. Browsers will thus literally refuse to render e.g. div tags inside a p tag no matter what CSS you apply. div tags, however obviously don't have this restriction.
The only thing that I know of that differs to the favour of p tags, is that they don't require a closing tag if directly followed by one of a select few different tags (e.g. other p tags)
Other than that, there are no drawbacks in using div tags that I know of, and you are free to use whatever you want.
div tags will still let search engines index your text. Custom tags can be dangerous (especially on older browsers), but divs are widely supported. While there are some potential semantic differences, I doubt you would run into issues.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I read somewhere that using h1 h2 h3 properly on the page helps with Search Engine Optimization. How is that? Can somebody tell me the proper use of these or other tags or point me to some resource where i can get an understanding of it.
These indicate not only the size of the heading but also the importance.
The main headline will need an "h1" code to give it the greatest importance.
The main sub-headings, which are numbers one, two, and so on in the article outline deserve an "h2" showing they are next in line when it comes to importance.
The "h3" can be given to sub-headings under the main sub-headings such as "a,b,c" points in the article outline above.
SEO and Heading Tags
When the importance of a heading is established with HTML tags, you're actually making it easy for the search engine robots to determine what your web page is all about. The search engine doesn't have to guess at it. It can see exactly what your main topic is and place you under the appropriate keywords so your potential customers will be able to find you on the WWW.
Well there are dozens of factors which help you optimize your website or web-pages. Heading tags (h1, h2...) are just one of them, so if you truly want to optimize your web-pages, please make sure that web-page must comply with the below best & valuable ranking factors.
Unique Title relevant to the content of web-page
Snippets description which describe whole details in short of
webpage
Unique & proper formatted content
Heading tag (H1) with the most relevant keyword to the webpage, try
to place in upper portion of the page
Bold content which is more relevant & valuable within content
Well optimize Images Footer links
Recommend related content
Firstly, SEO is a fairly unknowable subject - it's a continuous arms race between the search engines and the spam kings. There's a lot of folklore, a lot of hearsay, and a things change all the time.
Having said that, Google do give general advice - http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=en.
By writing standards-compliant, semantic HTML, you make it easier for the search engine to interpret your content. This, in turn, allows it to decide if your content is relevant to a given search query. By saying "this is a heading" (i.e. using the h1 tag), you give Google a hint about the words in that tag - in this case, that it's probably the subject of the content.
The best resource on standards-compliant HMTL is the might Zeldman book - http://www.zeldman.com/dwws/.
SEO is mainly focussed on keywords in the document. The main priority is the title of the page. Then it is going to the heading tags (h1,h2,h3). Then the rest of the content (Google said they are not using meta tags, but it is better to have it also).
Using H1, H2, H3 etc in Webpage is giving preferences to the contents. Contents in H1 tags is more important than H2 tags like we do while preparing our documentation.
Also you can visit
http://www.debojyotipal.com/h1-h2-h3-tags-for-seo/
http://groups.google.com/a/googleproductforums.com/forum/#!category-topic/webmasters/crawling-indexing--ranking/5OROBdtsmPs
which will provide more insights.