Why bother with HTML5 header, main, section elements, et al? [closed] - html

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/

Related

Is there any meaning behind so many tags in html? [closed]

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.

Avoiding problems arising from having only images and no text as links for website navigation [closed]

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 8 years ago.
Improve this question
The website I'm making is for an author/illustrator and she wants words in the navigation bar to be written in her own handwriting, so the links in the navigation bar and her own name, which serves as the title, are all in the form of pictures rather than text.
Similarly, the homepage consists of some of her illustrations, each accompanied by a handwritten link, so that there is no text at all. I'm starting to realise from reading online that this may be seen as 'bad practise', so I want to ask those with more experience than me: how problematic is the lack of text?
I am not too worried about loading times and such - I've managed to make the image files quite small - but more things concerning accessibility and whether the site will appear in search engines.
And are there any ways I can avoid problems whilst still using the handwriting?
When you want to use images as navigation elements and are concerned about SEO and accessibility, you can use the alt-tag which you should use anyways.
Example:
<img src='images/nav1.png' alt='Home' />
Screenreaders and search engines use these tags to deal with images which they of course can not read.
There are two issues here. First, people who do not see images (for one reason or another) will find the site almost impossible to navigate, unless the img elements have alt attributes. Correctly written alt attributes resolve this problem and can be expected to provide adequate information to search engines as well. Second, people who use normal graphic browsers will see the texts in a specific appearance. This may mean that they find it less legible than normal text, perhaps even illegible. This greatly depends on the style of the text, including size and the contrast between text and background color.
If a downloadable font were used instead, via #font-face, then the latter problem would in principle be less severe, since users could disable page fonts and see the text in their preferred font. This is rather theoretical, though, and creating a font is nontrivial and probably not worth the effort here.
On the practical side, write the alt attributes and ask the author consider whether the font is legible enough to all visitors, including people with eyesight problems. It’s up to the author to decide whether the reduction in usability and accessibility is justified by the artistic impression made.
You can choose from many handwritting fonts and link them via #font-face.
If she wants to use her 'font', use images (ideally one image - looking for sprite) and put text underneath - it's call image replacement.

Html5 semantic elements - understanding [closed]

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

Are Non-HTML tags in a HTML document bad for SEO? [closed]

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
Is it a bad practice have non-HTML tags of the page? I need to use them for internal content processing needs and wonder if there are any troubles with it (SEO for example)?
Yes it is bad. Not particularly for SEO but for browsers. You are relying on the browser to ignore your tags and render the page correctly. Since every rendering engine loads a page slightly differently, you have no way of knowing how it will handle your bad html.
Can you wrap them in html comments? Like so:
<!--<not a real tag>-->
The browser and spiders will ignore these but since they are still part of the html, your parser might still be able to read them.
An alternative is to use HTML5's custom data attributes. Your parser should also be able to read these.
W3C also have an experimental custom elements spec. Browser support looks poor at present but this may be of interest in future.
Yes, it's bad for browsers (and a little for SEO). Each browser could interpret a random tag on its own way.
If you need to do internal content processing, you can store your data in attributes of your existing HTML tags, with data-* attributes (HTML5 spec.), like this:
<div class="simple-div" data-file="./abc.txt" data-pattern="(.+)"></div>
My link!
The HTML document shouldn't store data anyway.
I dont know what you want to do specifically, but you could use an invisible div or hidden field with custom data attributes? or even a comment?

how much does HTML5 outline algorithm boost SEO in general? [closed]

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 10 years ago.
Improve this question
So as the title suggests, im interested / curious about how much does HTML 5 outlining help boost SEO in general.
there are alot of tutorials and explanations as to what HTML5 will do for XYZ, and alot of how-tos but for some of the pluses that HTML5 currently(and future) brings, there isn't a clear mention(that i know of) as to how much better it will/or curently make things.
I work in a...normal team i guess in where we have dedicated graphic designers, coders, programmers etc and part of this team of course are the SEO guys.
Now MANY websites show (under the document outline tool) that many designers/developers are using HTML5 but when you look at their document outline, its all over the place and even have unnamed sections in their outlines.
my guess is that, theyre just using the regular DOC type of HTML <!DOCTYPE HTML> and rolling with it instead of typing the long/massive doctype and everything therein etc...
but that said, and as oppose to the regular "old" rules and debates of H1 tags etc...
Since many of HTML5s features are already in play, and most current browsers supporting them(at diff levels), does it hurt when having a semi messed up, unnamed sections in your outline hurt?
Overall, if i convert my page from html of old to new HTML5 standards and proper outlining etc, will it make my standings better?
in a simple question, FOR EXAMPLE, if my current page rankings are say 5/100 on google,
will implementing a better, newer doc outline with HTML5 bring me higher, say 3/100 or even 1/100.
You are under the wrongful impression that formatting of the code, or use of standards has something to do with how search engines rank your page. This isn't actually the case.
What does happen with semantic tags/classes/ids, validating documents, and standards compliant markup is make it a lot easier for search engines interpret the page properly.
The content, at which levels / order and importance (say with the header tags) mark how relevant it is, and a properly formed document only helps in recognizing the different sections, but has no inherent effect on how well its ranked.
In the end though SEO is slightly guessing how smart the search engine algorithms are, one might for instance assume that Google has some sort of consideration of grading an HTML4 markup page vs HTML5. Since HTML5 is more recent, it's likely to get some leverage over HTML4 markup since HTML4 is outdated.
There is no boost from using HTML5. Semantic markup helps SEO but the version you use, or format (as in microformats) does not. It's the content that gets ranked, not your markup.
I'm not sure what outlining means. Do you intent to verify that your document doesn't have untitled sections like in this article?
Which is your question:
Does Google like HTML5 more than other HTML's?
Does Google like valid HTML5 more than other valid HTML's that don't have valid HTML5 structre (i.e. messy or untitled sections)?
This is just my gut feeling but I'm guessing it doesn't matter what HTML you use. This article indicates code validity is not an issue in page ranking. Here it says Doctype isn't even registered by Google. (Just a couple of links, don't know how realiable they are.) It makes sense thought. PageRank algorithm can't really (again just my gut feeling) be so simple that would put a lot of weight on the validity of code or the used HTML language. Unique content, locality, links to other quelity sites etc. are far more important then few missing title tags or the fact source code is written using the latest HTML specification. Where would it end? Should PHP pages rank better than "pure" HTML. Is JavaScript an boosting factor or not? What JS library would be the most important one?
Sorry if I'm splitting hairs but used technology shouldn't matter, content should. (Don't really know if only content should matter thought...)