Assuming some HTML like this...
<section>
<h1>Some stuff</h1>
<!-- That was some stuff... -->
</section>
I add comment tags around the HTML I want to comment out. I want to comment out everything, but the comment is closed by existing comment.
<!--
<section>
<h1>Some stuff</h1>
<!-- That was some stuff... -->
</section>
-->
What is the best way to handle this scenario without losing all my inline comments.
A HTML comment start with a <!-- and ends at the first --> encountered. There's no way to change this behavior. If you want to hide a large section with may contains comments during the development, you can wrap in a <div style="display:none"></div>. But don't do that in production, it's bad.
To comment block with nested comments:
sub inner (block) comments from "--" to "~~"
<!-- *********************************************************************
* IMPORTANT: to uncomment section
* sub inner comments "~~" -> "--" & remove this comment
*********************************************************************
<head>
<title>my doc's title</title> <~~! my doc's title ~~>
<link rel=stylesheet href="mydoc.css" type="text/css">
</head>
<body>
<~~! my doc's important html stuff ~~>
...
...
...
</body>
*********************************************************************
* IMPORTANT: to uncomment section
* sub inner comments "~~" -> "--" & remove this comment
*********************************************************************
-->
thus, outer most comment ignores all "invalid" inner (block) comments
As far as I know, there is no way to block that.
You need to be careful what you are commenting out or not.
See : http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.4
What you can try is to use PHP to comment out HTML code...
Hope it helped!
You cannot comment it out without removing inner comments because HTML will consider the code as
<!--
<section>
----
---- //All this code comes under commented
----
some stuff... -->
It will consider only the beginning comment tag before <section> and end comment tag after "some stuff ...". So HTML will not treat the one comment tag after <h1> which is already under commented.
Look for shortcuts in your editor to do nested comments in html.
In VSCode I use this extension:
https://marketplace.visualstudio.com/items?itemName=philsinatra.nested-comments
This can with one keypress (un)comment a block of code and do a substitution of <!-- inner-comment --> to <!~~ inner-comment ~~> (just like guido's answer suggests), making commenting and uncommenting blocks just as easy as it is in other languages.
It also works for css /* comments */
There are probably similar extensions for other editors.
This works for me:
<!--[if False]>
Lots of html including <!-- comments -->
<![endif]-->
Related
Noob question but I want to be able to quickly comment HTML code using keyboard shortcuts in VS code. Problem is I get this:-
<!-- <div class="whatever">
<h1>Hellow World!</h1>
<p>this is code I wrote in HTML</p>
</div> -->
instead of this:-
<!-- <div class="whatever"> -->
<!-- <h1>Hellow World!</h1> -->
<!-- <p>this is code I wrote in HTML</p> -->
<!-- </div> -->
Anyone know a good extension for this in VS Code? Thanks
Julien
See this extension written by me, Toggle Line Comments, that will do what you want.
-- or older answer --
Select through your text - i.e., from some part of the first line to some part of the last line you want separately commented. I.e., highlight your block of html to comment.
Shift-Alt-I will put a cursor at the end of each line.
Ctrl-/ will comment each line separately.
This only seems necessary for html, not js or scss for example.
I suppose if you wanted to reduce keystrokes you could make a macro for steps 2 and 3 combined.
I've been working with the design UI of our website and looking for some templates available in the web.
Then I encountered with this syntax <!----> and I'm not familiar with it.
Can you please tell me what is it and what is it used for?
thank you.
As the other posts have mentioned the <!----> code in HTML is used for adding comments - a note left in the code by a developer with some info for other developers, or to remember something themselves. This code is viewable in the source but not displayed when viewing the HTML in the browser. Ex:
<!-- We need to update this each year -->
<div>© 2009 - 2016</div>
will produce:
© 2009 - 2016
In most cases the comment can be removed with no side-effect on the code. It's simply a note for developers.
Other Uses
Commenting Out Code
In addition to comments you'll sometimes see HTML code wrapped by <!---->. Ex:
<!-- Add this later
<img src="article.jpg" alt="Article">
-->
The above code will remove the entire image tag from the browser view. This is useful if you want to temporarily remove some HTML from a page, for testing/debugging or for later use. You'll sometimes see entire HTML sections commented out.
Conditional Code
Another common use of comments is to add conditional code used by specific browsers. The following snippet of code would only be read by Internet Explorer 8, and would apply a black background color to the body.
<!--[if IE 8]>
<style>
body {
background-color: black;
}
</style>
<![endif]-->
Website Builders
Some website builders generate their own code comments for internal use. For example, if you use Squarespace the generated code will contain comments like:
<!-- This is Squarespace. --><!-- www -->
These snippets, in some cases, are used by the generators themselves as a marker for inserting other code.
Build Scripts
There's a small chance the comment tag is being used as part of a build script, and in this case removing it would cause issues. Here's an example:
<!-- build:css -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->
The above code, used with a build system like Gulp and a Gulp plugin like HTML Replace will replace the content between the <!-- build:css--> and <!-- endbuild --> tags with new code. Removing either one of those comment tags will cause errors.
html comment tag
White space is not permitted between the markup declaration open delimiter(""). A common error is to include a string of hyphens ("---") within a comment. Authors should avoid putting two or more adjacent hyphens inside comments.
Reference : https://www.w3.org/TR/html4/intro/sgmltut.html
in that page goto 3.2.4 Comments title
this is an html comment tag.See this link below to know more
http://www.w3schools.com/tags/tag_comment.asp
This allows you commenting your html
<!--- my comment -->
(with --> to close it that's right)
Is there a plugin to help with HTML commenting a block of code that may already contain other comments?
<div class="wrapper">
<div class="container"></div>
<!-- /.container -->
</div>
<!-- /.wrapper -->
BBEdit has a built in feature where if you select all of this code and apply a block comment, it will change the existing comments temporarily so that the main block comment can be applied. The output in the editor would look like:
<!--
<div class="wrapper">
<div class="container"></div>
<!~~ /.container ~~>
</div>
<!~~ /.wrapper ~~>
-->
Uncommenting the block would set the ~ characters back to dashes - so the individual comments would still be in place.
I am not looking for this specific functionality, but something that allows for block commenting content that already contains HTML comments without having to manually remove/edit the existing comments.
I could not find a plugin that does this, so I wrote one.
Installation instructions are available at https://github.com/philsinatra/HTMLNestedComments
I want to know if it's possible to put comments in jade at the end of an html tag, in the output file.
example:
<div class="header">
....
</div> <!-- ./this comment -->
Probably not a good idea.
But if you really want it, just add a comment after the div.
It won't be on the same line as the </div>.
It sends more html down the pipe, so I wouldn't recommend it for production use.
.header
hello
//./header
If you use a //- comment, it will not make it into the browser's view source. Useful for private comments.
Often while coding view templates in html, my habit of adding some helpful comments causes lots of time-consuming effort while testing.
Consider this code...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
Now, if I have to hide out some portion of the view template, in case of php I would just select the desired code and put single-line comments (using a shortcut key most of the times).
However, in html code, where only the block comments work, I end-up removing all the closing comment tags (-->) till the position I want the commenting to occur - something like this...
<!-- Here starts the sidebar
<div id="sidebar">
....
</div>
<!-- Here starts the main contents pane
<div id="main-contents">
...
</div>
<!-- Here starts the footer
<div id="footer">
...
</div>-->
Then when I'm done testing I have to go through the agony of putting back those closing tags.
Is there a better and time saving way of block commenting in HTML?
Yes, to comment structural metadata out,
Using <script>/* ... */</script> in .html
Comment out large sections of HTML (Comment Out Block)
my personal way in a .html file is opening: <script>/* and close it with */</script>
<script>/* hiding code go here */</script>
Is a workaround to the problem since is not HTML.
Considering your code in .html...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<script>/*
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
*/</script>
And in a case is HTML inside PHP file using comment tag <?/* or <?php /* and close it with */?> . Remember that the file must be .php extension and don't work in .html.
<?/* hiding code go here */?>
Considering your code in .php...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<?/*
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
*/?>
Is worth nothing that is not HTML but a common developer practice is to comment out parts of metadata so that it will not be rendered and/or executed in the browser. In HTML, commenting out multiple lines can be time-consuming. It is useful to exclude pieces of template structural metadata containing comments, CSS or code and systematically commenting out to find the source of an error.
It is considered a bad practice to comment blocks out and it is recommended to use a version control system.
The attribute "type" is required in HTML4 and optional in HTML5.
Depends on the extension. If it's .html, you can use <? to start and ?> to end a comment. That's really the only alternative that I can think of. http://jsfiddle.net/SuEAW/
you can try to replace --> with a different string say, #END# and do search and replace with your editor when you wish to return the closing tags.
I find this to be the bane of XML style document commenting too. There are XML editors like eclipse that can perform block commenting. Basically automatically add extra per line and remove them. May be they made it purposefully hard to comment that style of document it was supposed to be self explanatory with the tags after all.
Put a space between the "-->" of your header comments. e.g. "- ->"
My view templates are generally .php files. This is what I would be using for now.
<?php // Some comment here ?>
The solution is quite similar to what #Robert suggested, works for me. Is not very clean I guess.
Eclipse Juno has a good way for it. You just do the cmd+/
The following works well in a .php file.
<php? /*your block you want commented out*/ ?>
No. Unless you find a tool that does what you described for you.
Depending on your editor, this should be a fairly easy macro to write.
Go to beginning of line or highlighted area
Insert <!--
Go to end of line or highlighted area
Insert -->
Another macro to reverse these steps, and you are done.
Edit: this simplistic approach does not handle nested comment tags, but should make the commenting/uncommenting easier in the general case.
/* (opener)
*/ (closer)
for example,
<html>
/*<p>Commented P Tag </p>*/
<html>