I'm trying to optimize my pages via CSS for printing from the browser. The problem I'm having is setting up the page breaks properly. I have it preventing page-breaks in the middle of images and blocks of text that shouldn't be separated exactly how I want. However, the problem I'm having is that sometimes there's a horizontal rule separating a new section and then just the title of the next section (and potentially a description of that section), with the rest of the actual section displayed on the next page. This is confusing and poor formatting, as normally if the title of the section is that close to the bottom of the page, you'd just throw in a page break before it to bump the whole thing to the next page and not worry about the tiny amount of space on the previous page you're sacrificing.
The HTML here is very simplistic. It's not wrapped in a million things, just a horizontal rule, header, paragraph with a description, then the content of the section. What I tried to do is wrap the header and description in a division together and make it so it can't page-break inside or after, like so:
<a id="section_1"></a>
<div class="no-page-break">
<h2>Section 1</h2>
<p>Section 1 Description</p>
</div>
<div>
<!-- all the content for this section -->
</div>
<hr />
<a id="section_2"></a>
<div class="no-page-break">
<h2>Section 2</h2>
<p>Section 2 Description</p>
</div>
<div>
<!-- all the content for this section -->
</div>
<!-- and so on -->
.no-page-break { page-break-after: avoid; page-break-inside: avoid }
I was hoping it would see the entire block as un-breakable and bump the whole thing down to the next page, but it didn't do anything. Maybe I've just been staring at this problem for too long. Does anyone know how I could prevent each section of my page from breaking up in this manner?
Note: I don't want it to always break before each section, as that could potentially waste a lot of page space if there's only a little bit leftover from the previous one.
Bonus: If anyone knows how you'd be able to hide the horizontal rule if it broke at that point, that'd be helpful too. But that's just a minor annoyance that I'm not really worried about.
The only way I can think of is to move the horizontal rule into the bottom of the last section and before you want the page break. Then wrap all the next section in a node and add no-page-break to that. There are too many factors when printing that the browser just cannot detect so if you can cleverly group things it will help a lot.
Related
A while back if I built an html 4 page I would use div, span h1,h2,h3, strong, p and then style my css accordingly.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 why are these tags here?
Now I want to use HTML 5 and I am very confused because after doing some research I see that there is allot of conflicting information.
So to start with these tags below and lets say my design is very image heavy
<section><nav><article><aside><header><footer><main>
in the old days I would write my html like this below
<div> <!-- large background image design -->
<div><!-- large background title left --><h1>hello world</h1> <!-- large background image --><div>
<div><!-- large background title right --><div>
<img src="" alt="" />
<h3>image description</h3><div><!--little image--></div>
</div>
Is it correct to write the code like this now ( swapping out the outer div for a section )
<section> <!-- large background image design -->
<header>
<div><!-- large background title left --><h1>hello world</h1> <!-- large background image --><div>
<div><!-- large background title right --><div>
</header>
<img src="" alt="" />
<footer>image description<footer><div><!--little image--></footer>
</section>
How do you know what tags should be used?
Does it matter if I only use divs as before?
Do the new tags really add any value?
Are you able to point me in the direction of easy to understand examples and explantations?
Why should I use these new tags do they really add any value?
List item
I see amazon.com is still HTML 4
w3schools who claim to be html5 don't have any <footer> or <nav> or <section> tags -> they have divs?
OR: Am I reading to much into this and just do what I think is correct and use the html5 elements that are available for what I am building? and validate it against the http://validator.w3.org/ The HTML5 part even though it says experimental
Thanks for the advice
Many of the new tags are to provide semantic and structural meaning to your document, even if you're not using them directly for styling. This improves machine-readability of your document. Semantic markup allows software to more effectively identify and classify portions of your document.
For example, you can use a list <ul><li>...</li></ul> or a bunch of DIVs to accomplish the same task, but a list has semantic meaning - a grouping of items, whereas a bunch of DIVs do not.
There's noting wrong with wrapping your menu in <nav>, even if it's all DIVs or UL/LI inside. NAV just identifies that section of the page as a navigation element, the same with HEADER, FOOTER etc. In fact, many of these tags come from a typographical background - the terms used in describing elements of pages in magazines and newspapers.
1.How do you know what tags should be used?
identify the header of your page or the header of a section and use - header tag
which part represents the footer of your page or the footer of a section ? - use footer tag to mark it up
instead of using <div id="main">, you can now use <main> tag to mark up main content
identify less relevant content from the relevant content, and figuratively speaking place it aside by using aside element
and so forth
4.Are you able to point me in the direction of easy to understand examples and explantations?
watch HTML5 free video demonstrations on w3-video.com
Will inserting line breaks in HTML like this affect the output?
<header>
<div id="someid">
something here
</div>
</header>
I've been trying to study web development, and different tutorials use different formats. Will the extra lines between tags affect the output? I personally would prefer it that way since as a newbie, it looks more readable to me.
No - whitespace is collapsed in the output.
Primarily that means two things:
1 - Leading/trailing whitespace in an HTML element is not displayed, so these two divs will display the same:
<div>Some stuff</div>
<div> Some stuff
</div>
2 - Multiple whitespace characters in a row will be collapsed into one space. That means these two divs will display the same:
<div>Some stuff</div>
<div>Some stuff</div>
Here's a nice article for further reading.
No, it does not. I think what you are looking for is something like this:
<header>
<div id="someid">
<br>
something here
<br>
</div>
</header>
The <br> tag produces a newline in text.
Whitespaces are ignore from the output, at one or two exceptions (fortunately, you can see this at an advanced level only)
You can put 1 blank line or 1000, the result will be the same
Linebreaks won't affect the rendering, but multiple whitespaces are collapsed into a single space, which might make a difference.
For example, when you're indenting tags for readability the output will have a space between the tags. When your intention is for those elements to sit directly next to each other you'll find they don't.
See this link for examples and techniques to combat the unwanted space.
No,.. but sometimes yes.
At an old job they had to remove newlines and indents from divs because of some bad bootstrap grid CSS (an early unofficial copy that mutated over time) that they used across all their sites.
This was a really weird issue that baffles me and we basically had to always make sure our closing tags for 'cols' were on the same line as the next opening tag with no whitespace at all.
Eventually, I stopped this by convincing them to use an official bootstrap grid.
The text windows needs to have fixed width and length and must auto wrap long texts. It must not have horizontal scroll bar but it needs vertical bar. You can only display text but cannot enter text into it. What html/css to use? I think the preview window in SO's ask question page meets the requirement! It is just a div. How is that done?
You can use a simple div to show chat bubbles. I would personally use something simple, such as:
<div class="chat-bubble"></div>
All the content would be wrapped inside that div. I would then style the chat-bubble class in CSS to make it look how I want it to.
Here is a pretty neat walkthrough on making chat bubbles in CSS that should be a good starting point for what you're trying to do.
I realize this question is somewhat old, but I think it's an interesting case.
Using a div HTML element is possible, but not the best solution when it comes to semantics. Keep in mind that div is the most generic HTML element. It says nothing about your markup's content other than it should be divided from the rest somehow.
A better approach would be to use a mix of more descriptive HTML 5 elements, and overwrite their default styling with something that looks like a chat bubble.
Consider this example, adapted from this article
<ul class="chat">
<li class="message">
<figure class="sender">
<img src="https://example.org/avatar.png" alt="" class="avatar" />
<figcaption>Example sender name</figcaption>
</figure>
<blockquote>
<p>Text message</p>
</blockquote>
<li>
<!-- more chat messages ... -->
</ul>
In a web page that shows a list of tutors, the current HTML codes:
<div id="tutors">
<h1>Tutors</h1>
<div class="tutor">
<h2>John</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>Mary</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>David</h2>
<p>...</p>
</div>
</div>
Now, for some reasons, the word Tutors which is currently wrapped by h1 needs to be removed in the page. I can think of 3 choices:
Use css to hide it.
Simply remove it, and the page will have h2
without h1.
Remove it, and change all h2 to h1.
Which one is more appropriate?
#3: Remove it, and change all h2 to h1.
For SEO, hiding text is frowned upon because it can be considered black-hat SEO. Unless you're going to replace the header with an image that has the text, "Tutors".
Should I include my logo text using 'alt' or CSS?
Hiding Text with CSS for SEO
If you insist on hiding the text, Accessibility/SEO Friendly CSS Hiding
You cannot have <h2> unless there's an <h1> beforehand.
Headings, heading hierarchy, and document outlines
None of these options are good SEO.
This is risky and a bad practice. Search engines have become very good at figuring out when text is hidden and if they find that a heavily weighted tag like <h1> is hidden it will hurt your rank.
You should never skip a step in the hierarchy of headers (don't have <h3>'s without <h2>'s etc.). In addition they should always appear in decreasing order of importance.
Every page should have exactly one <h1> and it should be the first heading tag. They are on the order of <title> in terms of SEO weight.
Why does this headline need to be hidden in the first place? It seems like a good description of the content of the page.
Depending on the use case for the page, any three of those sound like valid options. That said, here are some things I thought about when considering this question:
SEO: it appears there is some opinion out there that the choice of tag content may affect search engine ranking.
Style-less rendering: if for some reason the page might be rendered without the accompanying css sheets, be aware of the effect of default rendering on the page and how you might want it to perform
Be aware that there are new common tags like 'section' in HTML 5, which might fit your page and be a bit clearer semantically than H tags
This is a preference. You should always separate presentation and structure, so I would say just comment it out, and put that it use to be there. If you hide it, this really isn't presentation because it is never seen. So 3 would be the most appropriate.
Doesn't matter.
If you are using jQuery to show and hide things it has no bearing on SEO. Search engines see what you see when you view source in all practical senses. You aren't doing anything sneaky anyway.
Reference my post here on stack overflow If I do everything on my page with Ajax, how can I do Search Engine Optimization?
because what you are doing is AFTER the search engines have looked at it for all practical purposes.
Perhaps you should consider formatting these items as a definition list, e.g:
<div id="tutors">
<h1>Tutors</h1>
<div class="tutor">
<h2>John</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>Mary</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>David</h2>
<p>...</p>
</div>
</div>
becomes:
<dl title="Tutors">
<dt>John</dt>
<dd>...Description here...</dd>
<dt>Mary</dt>
<dd>...Description here...</dd>
<dt>David</dt>
<dd>...Description here...</dd>
</dl>
And then apply CSS classes and styles to the elements to prettify it for sighted users. Just a thought.
I was wondering about a proper way of structuring a document-like html page. It's obvious that the title of the page should be marked as <h1> and section headings as <h2>.
As for the footer, right now, I have:
<div id="footer">Footer content</div>
and this will be displayed in every page of the document. I realized that screen reader will not notify the users if it's reading the footer content. I feel that uses should have the option to skip reading the footer content.
Is it necessary to let screen reader announce that it's going to read the footer content and is there a proper way to do so?
Thanks!
A common way to allow screen readers to skip over repeated parts of your website are to include hidden a anchor to a position right after the element you'd like to skip.
For example, on one of our websites, we do this to allow skipping over our navigation bar.
<div id="navbar">
<a title="Skip Navigation" href="#skipnav"></a>
<img id="home" src="transparent.gif" alt="Home" />
...
</div>
<a id="skipnav"></a>
The "Skip Navigation" a is selectable by using the keyboard and the screen reader will read "Skip Navigation". The user can then "click" on it to jump later into the page. In this case, right after the navigation.
Can you use html5? If so it contains a <footer> tag.
I'm a screen reader user and the h1 and h2 headings will work well. There's no good way to allow a screen reader to skip certain text that I know of which will work with all screen readers and browsers. Assuming your content is something like the following though
<h1>title</h1>
<h2>section1</h2>
section content
<div id="footer">Footer content</div>
<h2>section2</h2>
section 2 content
<div id="footer">Footer content</div>
A screen reader user should be able to figure out they hit the footer again after hearing it the first time. They can then use quick navigation keys provided by all modern screen readers to skip to the next heading thus not listening to the footer again.