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
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 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.
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 5 years ago.
Improve this question
all of this are only for make it more easy to read the html code? because they dont have any function more than that right ? ;( we can do all without that
<Div>
<p>
Example
</p>
</div>
<p>
same Example
</p>
all of this are only for make it more easy to read the html code? because they dont have any function more than that right ?
Not exactly.
These things make it easier for the browser and the website crawlers, screen readers, page printers, meta recorders, etc., -basically, any no-human/digital entity- to read the structure of the page, (combined with Schema metadata this can be quite powerful).
This means that you can put what you like in the <nav> tag or the <aside> HTML5 tag because the browser can read the syntax structure and know these are navigation links (therefoe useful for screen readers or for mobile devices to handle correctly) rather than core contents of the page central to the issue discussed on the page (such as details about why HTML5 is a good thing).
A good full answer to your question can be found here:
Why bother with Semantics.
Summary points from the link above:
More consistant cross browser implementation
Style normalization
Semantic markup makes glaring differences less likely.
Less typing
Craftsmanship: When something is well built it is less likely to break.
Accessibility
Maintainability: Code that makes sense is more maintainable.
Please bare in mind this article above was written in 2014 so it's references to "some browsers not being up to dat is now moot and old hat.
Your original statement including <div> tags is incorrect as ths is not HTML5 specific and a <div> is simply a container element that is used by your webpage styling and application level code such as javascript and CSS. A div can be anything you want it to be.
it supposes that it helps search engines to give a rank at the webpage and it could be used also for SEO.
https://www.codesmite.com/article/is-there-any-seo-value-in-html5-semantic-elements
Take from the above link:
Even in 2017 there are very few published case studies or official acknowledgements by Google that having an semantically HTML5 correct website will move you up in the rankings, or create better exposure from public searches. But it is safe to acknowledge that the more semantical detail you provide to bots then the better search engines will be able to understand and index your content. Using HTML5 elements surely can’t hurt.
https://www.inboundnow.com/html5-semantic-elements-mean-seo/
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.