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.
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 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 run a site that was recently indexed by Google (a few days ago). The main page has a few small images separating paragraphs of text. When I search Google for the site, it happens to show the parts of the paragraphs with the images, in the search snippet, which would be fine except it displays the alt text of the images, which looks bad.
Is there a way to stop this from happening, besides removing the alt text or toying with the images' placement?
As far as I know, there is no way to prevent this. But looking at your problem with a more technical perspective, you could off course:
simply remove the alt text or use a better alt text
remove the images from the DOM and instead put a placeholder element instead of it like:
<div class="img-holder" data-src="/img/example.jpg"></div>
With javascript you could find all instances of .img-holder and replace them with an inline image with the given source (and alt-text when you also store that as data attribute).
You cannot prevent search engines, or other user agents, from doing whatever they like with attributes in your markup. You can add attributes, or change their values, in client-side scripting, and then the odds are that search engines do not see such additions or changes (since they normally do not run client-side script code).
If the images are just decorative separators between paragraphs, then you should simply use alt="", avoiding this problem (and other problems too).
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 4 years ago.
Improve this question
I have a custom control I built that contains a list of items to be selected.
I was concerned that these items would run together seeing as how there can be many different types of actions in this list.
Create
Edit
View
So I made the ability to separate these into groups by using a horizontal rule.
Someone I work with thinks that horizontal rules are a terrible design choice, and wants me to change it to a stylized DIV. I do not really have an opinion other than they are simple to implement. The HR I implemented is styled nicely and looks good.
Thoughts? Are horizontal rules a good or bad design choice?
Bad, and so is using a div simply for adding a horizontal div. Instead, consider putting the line which looks like horizontal rule as a border to the element you want to divide. This will be semantically correct as you are not affecting the structure of the HTML document you are creating.
This article goes in to depth about how div's can be abused by using them as presentation elements only. While sometimes there is no avoiding it, this is not one of those times.
I tend to agree with altCognito on this point, because they're purely presentational (at least they seem to be in every instance in which I've seen them used so far) they should be applied via the css.
There may well be a :after {content: /* hr */;} option, but, honestly, when there's border-bottom, which visually serves (or at least can serve) the same purpose, why bother with the <hr /> anymore?
They can, of course, be styled if you do decide to go with it, although W3 Schools suggest that all the potential styling options are now deprecated. If this is so, and it can't be 'officially' styled, it'd be best to avoid it, I think. Even if only from a purist mentality to maintain validity of your stylesheets.
The only problem with the HR is that it's always there. I'm assuming your co-worker believes that you might not always want the HR to be displayed, and using the DIV and a css solution let's someone remove or change it in one global css file. (although, the HR could be controlled by css also)
The div+css solution isn't a bad one, but for what you describe, the HR solution isn't bad either. I'd just go with whatever is convenient in this case.