I have a situation where I will have a lot of content that has a heading in small text, and directly below it will be a longer heading (sometimes even a sentence) in much larger text, followed by the standard paragraph text. Here is an example of what I'm talking about:
body {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 0 auto;
}
h2 {
font-size: 12px;
text-transform: uppercase;
margin: 20px 0 10px;
}
.tagline {
margin: 0 0 20px 0;
font-size: 24px;
}
<h2>Section Title</h2>
<p class="tagline">A tagline... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos dolorem delectus neque est quidem numquam, incidunt corporis temporibus alias fuga.</p>
My initial instinct is to make the first part the heading element via <h2> and make the second section into a paragraph (as you can see in my example). But would this be correct? The larger text is definitely what people will most likely read first, but the smaller text is a better title for the section.
My question is am I good with this or should I swap it and make the small text a paragraph and the large text the heading tag?
In addition, I'm wondering if I should also be wrapping these two "headings" into a <header> tag as well?
Main Rule when dealing with HTML semantics is never work on the presentation part with HTML. That's the reason why we do have CSS.
Present days all websites are modifying there HTML semantics to meet WCAG standards. In simple words, those are some standards which when followed by developers helps people with accessibility problems access the web with ease.
For more details : https://www.w3.org/WAI/standards-guidelines/wcag/
So I suggest keeping the heading and sub-heading in the right way with right semantics. Think of a presentation in terms of CSS.
I'm not sure if this is the answer you are looking for, but I hope this helps to make a decision..
Reading the HTML spec on whatwg.org, this seems to be exactly what the hgroup element is for. In your case, the "correct" markup would be something like:
<hgroup>
<h2>Section Title</h2>
<h3>A tagline... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque.</h3>
</hgroup>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos dolorem delectus neque est quidem numquam, incidunt corporis temporibus alias fuga.</p>
The hgroup tag basically lets you write more than one header element while only "counting" the first one for document outline purposes. The subsequent ones are only aesthetic. Example use cases according to the spec are "subtitles", "taglines" etc.
Why not use hierarchy of headings? In your example, if tag line is a heading you should put that behind h3.
Screen readers don’t present CSS to users so ask yourself, “does the content ‘structure’ still make sense when css is reduced?” If you use proper semantics then the structure will be preserved but with mocking styles (like heading style applied to a p tag) will lose its meaning when CSS is removed. Meaning screen readers would just present the tag line as paragraph text vs. presenting it as a sub heading. People navigate or jump through headings using screen readers so p tag tag line will not be in their heading navigation.
Does that make sense? Happy to clarify anything confusing.
Related
I am currently new to HTML and CSS and do not have much knowledge about them. Recently, I came across a problem where my text-cursor is not visible when the background-color of a <div> element is darkish.
Here is an example:
<style>
.PreCode {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: initial;
color: rgb(28,26,26);
background-color: grey;
border: 1px solid black;
text-transform: capitalize;
font-weight: 100;
margin-top: 20px;
text-align: center;
padding: 10px;
}
</style>
Now when ever I try to focus the text written inside of a <div> element with this as the class my text cursor becomes transparent.
Is there any way to prevent this from happening? Is there a way to change the color of the text-cursor to the color of the cursor i.e red?
Here is the <div> code:
<div class="PreCode">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla necessitatibus dolorem suscipit. Quibusdam dolorem eos sunt voluptate neque, unde expedita, error modi, assumenda quisquam repudiandae iste provident rerum vel blanditiis.
</div>
The caret-color property is only supposed to apply to input elements and similar - elements that are intended to be user editable. So, if you apply is to a div (as here), you'll get unexpected results. (And, I suspect that you mean "invisible" rather than "transparent" - unless you actually see transparency being applied, but I suspect it's just that you can't see it against the dark background.)
Do you mean that you want the background colour of the highlighted text to be different from the default? In which case you need to set the background-color property for .PreCode::selection in your CSS.
Also, bear in mind that the way the cursor is rendered on screen depends on your browser and also your operating system. There are ways to set a custom cursor, but I don't think that's your problem here. The default cursor shapes and colours depend ultimately on the reader (i.e. your user's browser and OS). On my system, for example, the pointer is a black arrow with a white outline, and the text marker similarly has an outline. So, whatever background it's on, it remains visible.
It also depends what you mean by "cursor": the mouse pointer? The text-position marker? The actual cursor (the often-flashing vertical line that marks the text-input position)? Because the actual cursor will only be displayed in an editable element (as above), because it marks a text-input position and there isn't one of those at all if the text element doesn't accept user input.
you face that issue because you don't make changes on that line the caret-cursor property is used when you wanna make changes on any text, para, input, and etc.
Caret-Cursor : Set the color of the cursor in input elements.
if you wanna make your cursor color change in the div or see work or not you can add the contenteditable before the class then your code work properly and you also edit your text.
follow the code for the desired output.
<div contenteditable class="PreCode">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla necessitatibus dolorem suscipit. Quibusdam dolorem eos sunt voluptate neque, unde expedita, error modi, assumenda quisquam repudiandae iste provident rerum vel blanditiis.
now your code work properly if you want any help then ping me.
Thanks
Quick points, having trouble aligning a text in a table as it wraps the second line. I have treid justifying and block and in-line etc Appreciate any suggestions. What I need is that the second line aligns exactly under the first line eg: starts at vfdbd....
put the text inside a span element with display: inline-block;. That way the text start on the same line.
The wrapper needs to have text justification applied via CSS:
text-align:justify;
text-justify:inter-word;
In general, browsers do a crappy job as fully-justified text compared to "typesetting" applications for print. In general, full-justification on browsers makes text HARDER to read and should generally be avoided.
No need for an extra element if you know the width of the symbol (text or image) you're adding to the left of your first line.
The trick is to add a negative text-indent counter-balanced by a positive margin-left. Say you add a 40px-wide internet kitten via :pseudo + 8px of padding between image and text: the element then needs following first CSS rule:
/* Image is 40px-wide and we want it at 8px from text */
.txt-indent {
margin-left: 48px;
text-indent: -48px;
}
.txt-indent:before {
content: url(https://placekitten.com/40/40);
padding-right: 8px;
}
body {
width: 200px;
line-height: 1.5;
}
<p class="txt-indent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, natus soluta! Itaque, corporis veritatis quisquam ut debitis sed incidunt enim sit ratione sint repellat aliquid sunt rerum commodi asperiores ipsa!</p>
Ended up increasing line-height to make it work.
In this FIDDLE, the <footer> tag moves out of <p> tag when rendered, even though in the HTML it's placed inside the <p> tag.
Can anybuddy explain this behavior?
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus voluptatum tenetur sunt cumque quod non, excepturi, pariatur qui dolorem ipsum, nesciunt veniam ab! Quos vero perferendis, consequuntur modi, doloremque tempore!
<footer>Some footer </footer>
CSS
p{border: 1px solid #000;}
footer{border: 2px solid green;}
The answer is simple.
<footer> tag is not allowed inside <p>, <span> tag etc. Just like <p> tag not allowed inside <span>.
But you can use <p> inside <footer>.
<footer> itself is an independent section (It has a semantic to tell the browser that the section is the footer of the html page and has a display block).
replace the <p> tag with <div>
Dyana Putry, did not answer the question however when I tried what she suggested, it did make things clear as to why such behavior. Also, Rob (another comm enter) notes that a <p> element can only contain phrasing content and a footer's nearest ancestor must be a sectioning element.
This makes me conclude that it entirely depends on the parent element type. <p>, a phrasing context element cannot have any sectioning context element. while <div> a general element can be used in any context, therefore browsers doesn't mind a <footer>, sectioning element inside <div>.
I have two block. One of them triangular shaped. How make to flow around this div text? Example:
HTML:
<div class="container">
<div class="entry-cover">Triangle</div>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda autem ex
labore, repellat saepe soluta suscipit vel veniam.</p>
</div>
</div>
CSS has no!
You can use css shapes. Read this http://webplatform.adobe.com/shapes/.
You have to know that it's not cross browsers.
http://caniuse.com/#feat=css-shapes
EDIT - there is polyfill by Adobe, check this out.
https://github.com/adobe-webplatform/css-shapes-polyfill
So if your website need to cross browsers, you have to layout it with css (padding, margin, etc.) or spaces.
Why don't you use skew to the div which contains text. , might help. Other solution : You can use  
I am no guru at CSS so please excuse what might be a basic question. I have an annoying problem which I can't seem to fix:
Here is my text without CSS line-height:
I would like to move the text up closer to the heading tags so I did this:
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
The Result
The result is perfect and exactly what I want, but... the problem comes when I resize the browser.
Problem Resizing the browser
My Question
Why is the text condensing on browser resize? What am I doing wrong? Should I not use the line-height property? Any workaround for this?
The line-height property is used to control how much vertical space is allocated for each line. In general, it is used to adjust how much space there is between lines within an element.
line-height: 1 means that lines are exactly big enough to fit the tallest letters and lowest descenders, with no space between. A line-height of more than 1 means there is some extra space between lines, and less than 1 will result in lines overlapping.
line-height: 0 means that a line of text has no vertical space allocated to it, so all lines will overlap each other in one line. That is what you are seeing here: the text is wrapping onto a second line, which is rendered over the top of the first line.
What you are trying to do is adjust the space between elements, not the space between lines in a single element. For this, the recommended approach is to adjust either margin or padding. Consider adjusting the margins of your elements until you have your desired vertical rhythm.
For a really detailed explanation of how all three properties work, see this CSS Tricks article on the box model.
Example
body { font-family: sans-serif; }
.cramped h2 {
margin: 0.4em 0 0.2em;
}
.cramped p {
font-style: italic;
margin: 0;
}
<section class="cramped">
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscin.</p>
</section>
Add this to your CSS:
h2 {
margin-bottom: -10px;
}
h2 tags have margins by default
Here is the JSFiddle demo
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:23px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:23px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
try this it works fine on my browser
try this
p{margin-top:-10px; font-style:italic;}
#media screen and (max-width:768px){
h2{font-size:18px;}
p{font-size:14px}
}
Line height usage is for setting the distance (height) of each line. 0 value gives no distance so you have this problem.
You should let the line-height in the default value and reset default h2 and p element margin.
line-height
On block level elements, the line-height property specifies the
minimum height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that
is used to calculate line box height. On replaced inline elements such
as buttons or other input element, line-height has no effect. [1]
h2, p {
margin: 0;
}
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
Reference: MDN - line-height - w3.org - line-height