I have some question about html-style
At the moment I use following style:
<h2>Headline</h2>
<h4>Subline</h4>
<p>text
tzext
text
text
</p>
Is there a recommand html tag that only defines text and I could define headings myself, somehow like this:
<text class="headline">Headline</text>
<text class="subline">Subline</text>
<text>
....
.....
</text>
Wouldn't this be better style?
How do you do this?
Regards
Headings use <h1> through <h6>. You really shouldn't use anything else for headings as these tags exist specifically for this task, If you have multiple sets of headings on a page, you should group them in the <hgroup> and <header> tags.
Keep in mind your code has to be semantic, and make sense. When screen readers come across your site, they need to understand where the important headings are. If everybody just used generic tags, it would be impossible for accessibility to make sense of your page. The same goes with search engines and any other form of programmatic consumption of your data.
Using h1/2/3/4 tags is the best way to do it. You can also give a h1 a class like so:
<h1 class="yourclass">
you can then select that specific h1 in your css by selecting your h1 class
.youclass{your css}
, or you can select all h1's on your page in css by just type
h1{ your css here}.
in html 5 you have new html elements for header, footer, also paragraphs...more cool features are there. You should check out..This helps semantics as well...
From the CSS specification:
Note. CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.
There is more to a webpage then the way it looks. People access them with screen readers. Search engines index them. Tables of contents are automatically generated for them. etc.
So no. Hundreds of <text> elements would not be better style.
Your original example isn't very good either. You have no <h3> (I'm assuming the <h1> appears before the snippit). Don't skip heading levels.
If the <h4> is supposed to be a subtitle for the heading (rather then the start of a subsection within it) then you should be looking to use <hgroup> too.
If u use CSS it would be better as it reduces the number of lines required to HTML file. There
are many ty
Related
In terms of what Bootstrap provides, I don't see why anyone would use a p tag over a h tag for creating headers.
<h1>Bootstrap</h1>
<p class="h1">Bootstrap</p>
The Bootstrap documentation says the following regarding p tags:
.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
As someone who is new to frontend development, I don't understand the situation ...cannot use the associated HTML element, if anyone could explain.
Every tag has it's own meaning - semantic HTML. E.g. h1:
Use only one per page or view. It should concisely describe the overall purpose of the content.
But if you do not want to add any special meaning to your page part, just for it look like <h1>, then you use CSS to style elements like it.
Generally speaking, HTML labels (h1, p, a, etc) have semanting meaning. This is, they provide information on the element besides some basic styling, and this is key for accessibility (for example when using a screen reader).
Sometimes, you might want to have a text element with h1 aspect (font family, size...) but without such importance from a semantic point of view, that is why Bootstrap offers h1 as a class.
I hope this clarifies your question :)
These classes gives the same styling to the elements, but not their HTML properties, meaning that any scraper, parser, or search engine indexer won't see it as a header but just a normal paragraph text, which is sometimes the desired output when you need to highlight something to the user visually, but not mark it as a header for the indexers.
In terms of semantic HTML and SEO you should use heading tags (h1, h2, h3...), but, if you want to give, for example, H1 appearance to an element or without impact on the semantic, you should use heading classes
Is it necessary to have a heading of <section> in HTML5 like mentioned here http://blog.whatwg.org/is-not-just-a-semantic
Sometime on a page we have some elements which are related and can be combined in a <section id="semantic name"> instead <div id="semantic name"> But we don't have any Heading for that..
Is it OK to use <section> without having <h1>, <h2>, <h3> inside
According to the HTML5 Doctor, you should not use <section> if there is no natural heading for it. Also, they say:
The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
Also, check out this nifty flowchart to decide what element is best to use in your situations.
No, it is not required.
You can easily check this by reading the definition of the section element ("should" is not "must") or by validating your HTML.
The W3C validator will report a warning when no heading is used, but a warning is not an error.
Its only necessary if it wont [validate] (http://validator.w3.org)
The use of section tags is to convey the structure of your content, like a book is split into chapters, paragraphs, etc
If your page is mash of images to look like a magazine cover you may not have a need for adding any sections. You'll most likely still want structure for navigation but that's not done using sections.
I would say any page containing chunks of text (most pages) should use a section tag rather than a div. keep the divs for controlling layout only.
My best advice is to see how your site looks in a text only browser, or other accessible client. It amazing how rubbish most sites are designed for accessibility. My take is that section tags are an attempt to improve that.
As the title says, would it be better to wrap text using <div> or using <p>. Which would work better for SEO?
Semantically you should always use <p> to hold any "content" text within the body of your page. Similarly, headings should always go in <h1>, <h2> etc. Only use <div> for layout and positioning purposes (so for example as a wrapper around the main body of content, sidebars etc).
Search engines will typically rank pages using semantic HTML higher in their results as pages laid out in this way are more "machine-readable".
Div always uses for styling and decorating the form so that it is not a useful element to wrap texts. in a well-formed & standard html tag, you have touse p to show the search engine or whoever, that you are displaying a paragraph or your are writing some text
It is not a command but a best practice which you need to follow for a better coding.
Do not use same element for same reasons. each one has one destiny.
Search engines crawl the page and look for semantic structure and determine a logical hierarchy for your content.
<h1> tags are treated different to <h2>, <h3> and so on. a <div> tag would put your content on par with other content within other div tags.
I'd choose <p> over a <div> if the content is 'important', relates to what your website is about and has a chance to contribute towards your SEO.
You should always use the right tag for the job.
<div> is used to divide the page into logical sections. <p> is for paragraphs of text. <h1> through <h6> are used for headings. <ul> and <ol> represent lists of data. <table> and it's children are for tabular data. <form> is for forms and so on.
Working this way has benefits for SEO because the search engines know what sort of data they're reading and can rank it's importance accordingly. It also gets you a good way towards improving accessibility (e.g. screen readers will often build a page outline based on heading structure). More importantly for you, it makes it a lot easier to style your website consistently.
It doesn't make a difference for SEO as far as I'm aware, p will be just fine.
Semantically, p is supposed to represent a paragraph and div an arbitrary (sub)division - practically, however, the distinction between the two is fuzzy, and certainly won't matter for SEO purposes.
you should use one of them if you are using <P> than don't use wrap these both are same and no one is better for seo because html and css code don't have mean for seo.
if html tags or css name can make site better than seo have no mean because about all site have html tag. that sure alt and title can make your site according seo.so you should use one of them according you.<p> or wrap
As long as only word wrap is concerned, they are the same. you can set CSS attribute of word-wrap with break-word to force word wrap, see a cross browser solution here. you can even do word hyphenation or justification using this lib .
Regards.
p will be fine/
but i prefer using that in html5 tagging/
header, nav, section, aside etc./
What I want to do is
<div>some text <span>different text</span> more text </div>
I wasn't sure if I needed one of <a><p><h1> tags to use text or if I could simply just write it with just div.
Does it affect proper markup or SEO?
Also in cases where I am using the header tags <h1><h2>, etc.
How many can I go up to? Such as <h7>+?
And just wondering, can I use the same heading as many times as necessary right?
As in, if I declare <h1> to have some font declarations can I use it multiple times on a page?
Divs will be fine, but they are not particularly descriptive, neither is span.
Allways try to use the tag that best describes the content. eg. use for a paragraph of text, for some important information etc...
Try to reserve for things like layout, a thing that carries no real information.
Just text without any formatting, without any position, without anything, just text (which will look very bad and completely NOT USER friendly, like this answer!) divs are okay.
You may even just write the text. There is no need to put divs if there is no need of formatting of any kind.
DIV and SPAN are used for grouping. You should still have semantic markup like P for paragraphs or H1 through H6 (that's as high as it goes) for headings. Just worry about semantics and well-formed documents; SEO will take care of itself if you do those two things (and have useful content of course).
People use the A (anchor) tag a lot for different reasons. Mainly it's because HTML stands for HyperText Markup Language—the "hyper" connotes the incorporation of additional content/media/features compared to plain text documents. One of the biggest distinguishing characteristics of hypertext documents is the ability for one document to link to another using hyperlinks—this are created with the A tag.
The A tag can also be used to link to different sections of the same document or another document. These points are specified by the A tag as well, like so:
<p><a name="top">Hello World</a></p>
<p>Blah, blah, blah.</p>
<div>Back to top</div>
Additionally, anchors can also be created using the ID attribute, which can be used in almost any tag:
<h2 id="ToC">Table of Contents</h2>
...
<p>View the Table of Contents
to see all sections of this guide.</p>
I see the <p> tag used a lot in the code of others but have never used it in my own work.
I'm wondering what advantage this gives over using a <div> tag?
Are there any benefits I could get
from incorporating the <p> tag
into my pages?
Is there any disadvantage in only
using <div> tags without <p>?
DIV indicates a separate section on a page, which is not semantically connected to the others. With P tags you indicate that this piece of text is broken into paragraphs but it still stays a single entity.
ADDED: With "semantics" people usually refer to the possibility to extract information from HTML as to what various elements of a page represent and how they are related to each other, as opposed to treating the whole HTML as just a markup to be rendered. For example, when you do menus it is recommended that you use ULs (unordered list) for that purpose, because it will be possible to learn from the markup that all LIs (list items) contained within a particular list probably mean choice options of the same level. I know it is helpful for screen readers for impaired people that you try to make your markup as semantic-rich as possible.
If you're not concerned with this, then it is virtually no difference for the rendered result whether you use DIVs or Ps. You can style both with CSS to achieve the same look and feel.
Semantic HTML is still not "the absolute good" to be strived for. For many people semantics does not add any value as they wish just that their pages are rendered correctly. That's why the ever-lasting discussion on whether to use tables for markup (and add semantics where it does not belong) or stick to CSS is not going to end any soon.
p means 'paragraph', div means 'division'. That's as complicated as it gets. It's a way of telling search-engines, scrapers, tools, etc that this is a paragraph of text.
div is undesirable when you're actually marking up a 'paragraph' of text.
Both tags have a different purpose.
p indicates a paragraph, usually for
organising content (text and
images,mostly)
div on the other hand is a
rectangular space on the canvas,
usually for layout purposes.
Example: You would put your navigation panel in a div, making it easy to move it from the left to the right of the page, or switching to a 3 column layout. The different sections in your navigation (first the general site navigation, next specific hotlinks to the most recent blog post or whatever) could be seperated by putting them in defferent paragraphs.
(I know, bad example, because the navigation is better represented by unordered lists, but what the hey).
In direct answer to your question, they give you the advantage of differentiating between organising your layout and organising your content, in a way that becomes clear in the HTML source.
If you are tagging content so you can lay it out with CSS, you probably want <div>; <p> should be used to indicate a paragraph of text and that's it.
Beyond just the semantics of it (which are important), you will also want to consider validation problems. According to the HTML4 spec, you are not allowed to nest other block-level elements (<div>, <ul>, other <p>, etc) inside a <p> without invalidating your HTML.
I've seen a number of instances where parsers will choose to prematurely close the <p> to allow the other nested block element to begin.
Are there any benefits I could get
from incorporating the tag into my
pages?
Yes, provided that you use it correctly -- because the use of semantic HTML is always a benefit.
There are a range of reasons why this is so, but the primary one for people who need a quick explanation is SEO. Search engines will understand your page better if you use semantic HTML.
p tags are for paragraphs. p tags often contain additional CSS styling regarding the textual content that goes into them, and this styling can be defined in various places in the css documentation. for example, a p usually has a bit of extra space below it. if you try laying something out with p tags, you'll end up with uneven padding.
It is better to use divs if you want to have more control over the content in your page from a programmatic perspective. sticking to divs for all layout concerns will also allow you to use p tags exclusively for paragraphs.