<H1>, <H2>, <H3>... Tags, Inline Within Paragraphs (<P>)

Removing newline after <h1> tags?

Sounds like you want to format them as inline. By default, h1 and h2 are block-level elements which span the entire width of the line. You can change them to inline with css like this:

h1, h2 {
    display: inline;
}

Here's an article that explains the difference between block and inline in more detail: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

To maintain vertical padding, use inline-block, like this:

h1, h2 {
    display: inline-block;
}

H1 tag and P tag on the same line?

So if you had:

<div id="containerIntro">
    <h1>Headline</h1>
    <p>And here the text right after...</p>
</div>

Your CSS would have to look something like this:

#containerIntro h1,
#containerIntro p {
    display: inline;
    vertical-align: top;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 28px;
}

See http://jsfiddle.net/F3Bcd/3/.

H heading + some other text on the same line

HTML

<h1>Skill Ratings <span>(scale of 5)</span></h1>

CSS

h1 span { font-size:16px; }

How to write both h1 and h2 in the same line?

Keyword float:

<h1 style="text-align:left;float:left;">Title</h1> 
<h2 style="text-align:right;float:right;">Context</h2> 
<hr style="clear:both;"/>

error on eclipse Invalid location of tag (b)

With headers and paragraphs it automatically starts on a new line, so the <br> tag is not necessary. <h1>, <h2>, <h3>, etc. are titles, and <p> are paragraphs.

You post titles above paragraphs and not inside them, which would look like this:

<h1>array_change_key_case</h1>
<p>your text</p>

Are H1,H2,H3,H4 tags block or inline elements?

They are block elements.

If you look at the HTML 4.01 strict DTD:

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">

<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

So, they are all defined as %heading entities, which in turn are part of the %block entities.

As for the question regarding if you can change the color - that's just styling and is fine, though I would do so in a CSS file, not inline:

H1, H2, H3, H4, H5, H6
{
 color: #ccccc;
}

TCPDF not render all CSS properties

In the first place, you should note that PDF and HTML and different formats that hardly have anything in common. If TCPDF allows you to provide input data using HTML and CSS it's because it implements a simple parser for these two languages and tries to figure out how to translate that into PDF. So it's logical that TCPDF only supports a little subset of the HTML and CSS specification and, even in supported stuff, it's probably not as perfect as in first class web browsers.

Said that, the question is: what's supported and what's not? The documentation basically skips the issue and let's you enjoy the trial and error method.

Having a look at the source code, we can see there's a protected method called TCPDF::getHtmlDomArray() that, among other things, parses CSS declarations. I can see stuff like font-family, list-style-type or text-indent but there's no margin or padding as far as I can see and, definitively, there's no float at all.

To sum up: with TCPDF, you can use CSS for some basic formatting. If you need to convert from HTML to PDF, it's the wrong tool. (If that's the case, may I suggest wkhtmltopdf?)

How to use an <h2> tag </h2> inside a <p></p> in the middle of a text?

It's not appropriate to use a tag that means "heading" within body text. The <h..> tags are logical tags; their use imparts meaning to the enclosed text -- namely, that the text is a section heading.

Although you could use the display: inline attribute, consider using a more appropriate tag, or even a <span> tag.

---

Related Topics