/    Sign up×
Community /Pin to ProfileBookmark

Is putting PHP tags within HTML tags invalid markup?

I often test web files containing PHP on my local machine without a web server, at least until all basic style and HTML layout issues are resolved. Recently I began adding small PHP blocks to dynamically add some styling within HTML tags. I realize the PHP won’t run with no server, but I still always expect PHP open/close blocks to be ignored. But I’ve noticed that the trailing “>” symbols in PHP closing tags are displayed, when (1) the PHP blocks appear within an HTML tag *BUT* (2) only when browsed without a server.

So can anyone tell me why or whether this behavior can be prevented? More important, is putting a PHP block INSIDE an HTML tag considered “invalid markup”? A short example (file is test [dot]php) appears below. When run from an actual web server there is no issue, but when run as a simple ‘file’ on a local machine, the unwanted “>” shows up anywhere PHP blocks appear WITHIN HTML tags. Note that renaming the file to “test.html” won’t alter the affect.

If anyone is curious, my reason for doing this is to dynamically add style attributes to certain container DIVs, to alter the way child IMGs are displayed. It DOES work flawlessly on every browser I’ve tried, but if the local machine test is revealing it to be invalid markup, I’d like to correct it.

[code=html]
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<div <?php ?> > <!– trailing ‘>’ displayed. Why? –>
<br>test<br>
<?php ?> <!– ignored by browser –>
</div>

</body>
</html>

[/code]

to post a comment
PHP

15 Comments(s)

Copy linkTweet thisAlerts:
@NogDogJan 30.2019 — Yep, HTML knows nothing about PHP. If you're going to use PHP, then the PHP process has to parse the file first and do whatever processing is required, and then that process ends up outputting the resulting HTML, which is all the browser (should) ever see. The &lt;?php ?&gt; is "ignored" because to HTML it looks like a HTML tag -- though one it knows nothing about, so just ignores it. In the other example, it probably doesn't matter if it's &lt;?php ?&gt; or &lt;^xyz ^&gt;, as it still results in the &lt;div&gt; it's embedded in being malformed.

Which all gets back to setting up a local PHP environment where you can develop/test your PHP, whether via setting up your own local web server with XAMPP/wampserver/etc., an appropriate Docker container, or whatever you prefer.
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 30.2019 — @NogDog#1600542 I understand all the browser SHOULD ever see is the HTML, So why in this case would it not? I really would like to know if there is anything bad or evil about placing <?php ... ?> inside a DIV tag. If the answer is YES, why? If NO, then why will a browser NOT ignore the PHP tags, as I described them in this case?

Fortunately it doesn't happen in a proper web server situation. But my project involves tweaking a legacy site of mine, and I would like the site be able to be viewed if supplied on a CD or DVD, without a web server too. Obviously in that case I DON'T expect the PHP code to do anything, so the "DVD" version will not have my PHP styling tweaks. BUT... I would like them to at least be ignored!
Copy linkTweet thisAlerts:
@NogDogJan 30.2019 — Having the <?php ?> tag inside of a <div> tag is no different than any other tag inside of another. E.g.: you would not expect this to be valid, would you?
<i>
</i>&lt;div &lt;span&gt; id="foo"&gt;

Changing &lt;span&gt; to &lt;?php ?&gt; doesn't suddenly make it okay -- _since the browser knows absolutely nothing about PHP code_.
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 31.2019 — Come on @NogDog! I was just making a simple example and trying to avoid bogging my question down with application specifics. What I'm ACTUALLY doing is more like this...

<div class = "formatPic" <?php getWidth() ?> <img src="somefile.jpg" style="width:100%; height: auto;></img></div>

Then when the "getWidth() PHP function is parsed by a server, the construct is changed to something like this...

<div class = "formatPic" style="width:44.32%" ?> <img src="somefile.jpg" style="width:100%; height: auto;></img></div>

The "42.32%" is obviously a calculated value. When parsed by a web server, several <div>s that are image containers are resized this way. It allows me to place photos with different sizes and aspect ratios together, and make them appear side by side neatly with identical heights. I was trying NOT to get into these specifics, to FOCUS on the question. But do you see now that putting a PHP construct inside an HTML tag might have a useful purpose? If not, trust me... it WORKS!.

All I want to know is WHY a trailing ">" is shown above each of my IMG tags that have such a container <div>,, when the file is viewed on my local machine, and whether anything could be done about that case.
Copy linkTweet thisAlerts:
@NogDogJan 31.2019 — Sorry, guess I'm not explaining it well? There is nothing special/magical about <?php ?> tags, _unless the file is being parsed/processed by PHP_ -- which is not happening when you just view a PHP file directly with your browser instead of through a web server that is processing it as PHP. So, if just viewing it in your browser, it sees the start of a tag, such as "&lt;div", but before you get to the closing "&gt;" of that div tag, if you put in a "&lt;?php ... ?&gt;" tag, it sees that closing "&gt;" of the "?&gt;" and interprets that as being the close of the div tag. Then, when it finally gets to what was intended to be the closing "&gt;" of the div, it considers the text to no longer be within a tag, so it's just output a document text.
<i>
</i>&lt;div &lt;?php do_something(); ?&gt; &gt;This is a test.&lt;/div&gt;
| | |
| | +-- Just a "&gt;" character
| |
| +---- Looks like end of DIV tag
|
+-------------------------------- Start of DIV tag
Copy linkTweet thisAlerts:
@rootJan 31.2019 — @PeterPan_321#1600548 all the browser sees is the rendered output along with bits it can't render.

You will have instance where your scripts can be displayed in the page, often because you broke something.

HTML is not meant to fail like languages, it is meant to display and render as best it can and the ultimate goal being that in a failure situation, the page can still be read.
Copy linkTweet thisAlerts:
@ginerjmJan 31.2019 — Personally I find it cumbersome and silly to use the php open/close tags inside my html code. Should you need to include dynamic information in your web page (the html portion) then simply plug in a php variable where it needs to be. Of course I use the heredocs construct to output 95% of my html so this is a pretty easy way of building my web page (HTML) and including the desired dynamic data. Posting a <?php ...... ?> here and there and everywhere in simple html statements is so confusing and obscuring that it makes it hard to just read along what the code is trying to do.

I would guess that I use maybe one or two pairs of php tags in my entire script all the time. And they may be hundreds of lines long!

If you are simply trying to test your html then why not develop it as a standalone html module and test that and then add that entire thing to your php script using the heredocs and copying in your tested html code? Then add the php vars where you need them. I use a php function to embed my html code in my script and simply call it when I'm ready to output my page. Sure I develop some of that dynamic data such as an html table outside of all this but, again, I use the heredocs or a simple echo statement to generate the code inside a php var without having to use the php open/close tags.

Just my $.02!
Copy linkTweet thisAlerts:
@SiriusGDJan 31.2019 — I am by no means an expert on combining php, HTML and javascript but for the most part I've been successful. I'm an old school programmer from before client server and the internet. What I do these days is I create a php file. I use php to process all my data upfront and prep it for the following HTML. Then I use heredocs to enter into HTML and use the php data variables.
<i>
</i>&lt;?
$width = getWidth();

echo &lt;&lt;&lt;_END
&lt;div class = "formatPic" style="$width"&gt;
&lt;img src="somefile.jpg" style="width:100%; height: auto;&gt;
&lt;/div&gt;
_END;
?&gt;

*note: in HTML <img> does not have a closing tag.
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 31.2019 — Thanks everyone! Let me address some of this.

FIRST.. @SiriusGD#1600602 and @ginerjm#1600595 This looks like a great solution if it works! So instead of having something like...

<div class="formatOic" <?php code() ?> >

I COULD instead just place a PHP variable inside an actual literal "style" attribute, as you suggested... "<div class = "formatPic" style="$width">", So if that works it means that with NO PHP, (as when viewed with no server), the $width will be meaningless and have no effect. But with PHP available (on a server), how is the "$width" evaluated without the PHP tags? If the simple inclusion of a "$" symbol with no PHP tags triggers PHP parsing, wouldn't that infer ANY "$" symbols (like a price) anywhere in the code be misinterpreted as a missing variable?

@NogDog#1600554 - and @root - Now I understand! thank you!
Copy linkTweet thisAlerts:
@SiriusGDJan 31.2019 — @PeterPan_321#1600605

To use a dollar sign for a currency symbol you would have to "escape" the character with &#36;.


Or just use single quotes --> '$100' as opposed to double quotes. Double quotes interpolate the variable inside of them. In other words, single quotes you get the text string you see, double quotes interpret the variable to it's value.

Btw, either way in that HTML statement, $width would be seen as the value it contained. Remember, this is a php file.

Also, php variables cannot start with numbers. $100 is not valid as a variable name.

So you could say:

$amount = 100;

and output:

echo " '$' . $amount ";

and get ---> $100
Copy linkTweet thisAlerts:
@SiriusGDJan 31.2019 — @PeterPan_321#1600605

Another note. I'm not sure why you would view code that has php in it without a php interpreter. If it's because you are testing in development and you don't have a php interpreter on your machine locally, then have you heard of Xampp? It's free and it's a "web server" that you can install on your computer with a php interpreter so you can do local testing. It also has a database engine in it so you have access to local databases you build.

https://www.apachefriends.org/index.html
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 31.2019 — OK folks (@SiriusGD#1600608 & @ginerjm#1600595 ). Your idea is sound but it doesn't (and probably) won't work in my case. And one of you mentioned that it "is a PHP file", but it doesn't matter whether its PHP or HTML, because I can coerce the Apache server to parse HTML as PHP, with an addition like this to the .htacess file in the folder where this activity is needed...

AddType application/x-httpd-php .htm .html

I'm sure most of you have heard of this trick (and it is tricky for reasons involving a different subject)

But either way (whether I name the file HTML or PHP, and whether or not I include the HTACESS trick), The '$' symbol is only recognized within actual <$php ... ?> tags. At least during any content within the <HTML> tags. So yes, I CAN use just a variable prepended with '$' as some of you suggested, but if I don't surround it with the PHP tags nothing happens (its displayed verbatum).

This makes sense if you think about it. Look at any PHP mail form example that combines PHP with viewable HTML . Quite often you'll see initially empty variables (like $name, $address) get added into form data, so that if the visitor forgets something important, the page can be re-displayed after the POST, with the visitors existing data filled in. That way he/she only needs to correct the part that they forgot. BUT... in all these examples, the form data in the HTML section uses PHP tags, for example like this...

<input type="text" name="name" value="<?php echo $name;?>"><br>

I've never seen an example where the 'value' in the above was simply ' value=$name; '. Maybe some servers will do it, but when you think about the problems it could cause (failing to 'escape' a '$' symbol in a price, for example) I can see why servers ignore it. Anyway, mine does.

Its not so bad, as in my case all I have to put in is a short function call with no parms. But I'm still going to end up with those extra '>' symbols if there is no PHP parsing available.

And @SiriusGD#1600608, the reason I would view without an interpreter is because I'm making adjustments to a large legacy website which SOMEDAY I may archive onto a DVD, and offer it to my visitors for donations. While some of the 'tweaks' I'm doing with my PHP will not show up in that case, I'll make sure the pages are still "presentable", if not absolutely ideal. Unless I move to a javascript solution. (possible but will be slower).

Anyway, thanks everyone. At least I understand why the problem happens, and will try to consider work-around which do NOT require adding HTML tag attribute data directly.
Copy linkTweet thisAlerts:
@ginerjmJan 31.2019 — As I noted in my wordy note from earlier - I use the php tags USUALLY at the start of my script and never turn it off (usually). So virtually all of my code is inside the php interpreter. LIke when I use a php function to display my web page, that is a PHP function, defined inside open php tags, so the use of heredocs there simply makes it easy to output everything.

Note that you must always be sure that you php vars are INSIDE of double quotes so that means a string such as

"<a href='$myvar'>"

works since it is properly wrapped.

Whereas

'<a href='$myvar'>'

would not.

Note that your line that mentions 'value=$name' is not valid coding for html but "value='$name'" would be. And when writing very long strings of html code, as long it starts with a double quote then all of the included php vars will be interpreted properly.
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 31.2019 — So I think I've decided on a solution that is so obvious, I'm embarrassed to even say it. But here goes...

Since in my case I'm using PHP to append a customized 'width' style to my DIVs, and since this is a responsive page where all these widths are specified in percentages anyway, I really don't need the PHP at all once the work has been done. In other words, whatever screen or browser window size the images are viewed on, it won't change the percentages needed for a correct display.

SO... I'm just saving the page as a .PHP, so it can be parsed without any .htacess tricks, view the page on a browser, then view the source. The source will have all the PHP removed, and all my custom tags are now correctly filled in with the PHP generated style data. So all I have to do is copy the whole thing, and paste it back into the original HTML version of the page, and move it to the server. Now the page looks perfect with or without PHP.

DUHHHH!!!!!!!!!!!!!!!!!!!! --- I'll stop coding now and rest my brain, which obviously has not been working this week. :-)
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 31.2019 — @ginerjm#1600616 good point you mentioned here when you said...

"Note that your line that mentions 'value=$name' is not valid coding for html but "value='$name'" would be. And when writing very long strings of html code, as long it starts with a double quote then all of the included php vars will be interpreted properly."

Going a step further, I've often mentally given up and gone another rout, when faced with the prospect of having PHP (or javasript. document.write() calls for that matter), when the normal code I would have manually written already requires double quotes with sections of single quotes within. There's always a way to do it with proper escaping, but it can be very confusing!
×

Success!

Help @PeterPan_321 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.11,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...