What is the use of this syntax: <!---->? - html

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)

Related

Can jekyll support parallax effect?

I created a blank jekyll blog and I included parallax.js with CDNlink and the link is :
(script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js">)
but when I ran it in localhost the moving effect that I have imported doesn't work. In my rails app that I created it works perfect there.Also if I deploy it on GITHUB pages will the parallax work there?What should I do to fix that issue?
I upload in github pages https://lazospap.github.io/LazPap/. There are a lot to be fixed but for now i can't see the images.
YES, parallax effect can work on Github pages.
You probably just made some coding errors/mistakes.
Rules to follow
1. Nothing can be placed after </body></html>
The first mistake I see is that nothing can be placed after </body></html>. Your layout file contains this:
</body>
</html>
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
It should be:
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
</body></html>
2. Open and close the body only once
You embed the content in your layout. Your layout has a body open and a body close tag... however, your content also has a body open and a body close tag. Therefore you open and close the body of your HTML file twice. Remove it in your content file and your are set. Find <body id="page-top"> and </body> in this file and this file and remove them.
3. Use layouts for (complex) HTML and JS
The code < 150 on line 184 gets wrongfully escaped. This is probably due to the fact that you are writing complex HTML and JS in a markdown file. You could prevent this by combining the HTML from 'index.md' and 'default.html' in a file 'home.html' in your layout directory. Your index.md file should then reference 'home' as layout instead of 'default'. Here is the error:
SyntaxError: missing ) after conditionLazPap:184:34
4. Call functions only after they are declared
I know it gets kind of hard to grasp when you use 'defer', but the rule of thumb is to call a function only after you have declared it. Parallax is a function that gets declared in line 71 of default.html:
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
But you call the function inside the content part of that same file on line 38. That does not work, and if it does it is solely due to the 'defer' statement.
5. Use a baseurl
When you host on Github Pages you need a basurl. The reference to your images is /images/HTML_5.png. Because you host on Github pages your baseurl should be /LazPap so your url becomes /LazPap/images/HTML_5.png. More reading about baseurl...
A simpler solution...
You started out with a copy of this code: https://blackrockdigital.github.io/startbootstrap-creative/. The easiest way to achieve a parallax-like effect would be to add JUST ONE CSS rule to the original code:
header.masthead {background-attachment: fixed;}
Although it is the solution I would use, it is probably not what you want, as you specifically mentioned parallax and a javascript solution.

Is there a way to specify where XMLHttpRequest content is added?

I've been using W3Schools' Javascript library to handle HTML includes onto other HTML pages. Everything has been going good, except I'm running into some formatting issues. When the include processes, it puts the HTML into the body tag when I'd prefer it into a different tag. I don't want my body tag formatting to impact the HTML content that's imported. I'm open to any solutions, but I'd prefer something that allows me to specify a specific tag in the HTML document to be imported into.
I've tried putting the Javascript call into the head or outside of the body tag but haven't had any luck.
Here's the code used by W3Schools: https://www.w3schools.com/howto/howto_html_include.asp
<script src="https://www.w3schools.com/lib/w3.js"></script>
<!-- import header -->
<div w3-include-HTML="./includes/header.html"></div>
<!-- import navigation bar -->
<div w3-include-HTML="./includes/navbar.html"></div>
<!-- Script to Handle W3Schools HTML Includes -->
<script>
w3.includeHTML();
</script>
Thanks for the help! I'm hoping there's a good way to do this, otherwise I guess I can format my text outside of the body tag... That's far from ideal though.
Did you try to replace <script> w3.includeHTML(); </script> by <script>includeHTML(); </script> ?

Commenting out Content - HTML and PHP

I am currently tweaking a BigCommerce theme for my employer. They have asked me to remove and change a few CSS / HTML elements to fit the style and functionality that they are after.
Rather than just DELETING the functionality within the theme, I was hoping to just comment it out in case it is needed later. But I am having an issue with the formatting.
The following is the code as displayed in the ProductDetails.html Panel file:
<div class="Content" id="prodAccordion">
%%Panel.ProductTabs%%
%%Panel.ProductDescription%%
%%Panel.ProductVideos%%
%%Panel.ProductWarranty%%
%%Panel.ProductOtherDetails%%
%%Panel.SimilarProductsByTag%%
%%Panel.ProductReviews%%
%%Panel.ProductByCategory%%
%%Panel.SimilarProductsByCustomerViews%%
</div>
I am trying to comment out the last 3 lines only.
However, when I do, the end of the comment ( --> ) shows up in the browser. I have closed the comments correctly but there must be some simple concept that I am missing. Hoping the good people at SO can help.
Below is the code as I have saved it and a screenshot of the display in my browser. The first screen shot is how it looks before I add any comments and the second is after I add them. You can clearly see the closing comment in the second image, can anyone tell me why??
Thanks in advance for any help.
<div class="Content" id="prodAccordion">
%%Panel.ProductTabs%%
%%Panel.ProductDescription%%
%%Panel.ProductVideos%%
%%Panel.ProductWarranty%%
%%Panel.ProductOtherDetails%%
%%Panel.SimilarProductsByTag%%
<!--%%Panel.ProductReviews%%-->
<!--%%Panel.ProductByCategory%%-->
<!--%%Panel.SimilarProductsByCustomerViews%%-->
</div>
Nicole, I've dealt with this and can definitely explain why it's happening and how to avoid it.
Why It's Happening
It's happening because this is how BigCommerce's server side PHP processor parses the code you're looking at. The code is basic HTML, while the %%Panel.something%% are simply ways for BigCommerce's processor to recognize as a command for BigCommerce.
Anytime the BC site sees %%Panel.Name%%, it knows that this is not HTML, but rather a place where BC server-side processor should insert the Panel file before serving this HTML to the user.
How to Avoid it and Comment-out Correctly
Simply, remove the % symbols and use regular commenting. This will work:
<!-- Panel.ProductReviews-->
So will this:
<!--%%Panel.ProductReviews-->
And this:
<!-- Panel.ProductReviews%%-->
Or even this:
<!-- %Panel.ProductReviews% -->
Mainly, you have to make sure that each side of a Panel.Name reference, doesn't have 2 % symbols on each side.
To Restore the Correctly Commented Out Code/Panel
Simply restore the 2 % symbols on each side like so (the spaces between - and % don't matter, you can have none or 10):
<!-- %%Panel.ProductReviews%% -->
Why You're Seeing --> On Live Site
As broached/explained in the comments of your question, you're seeing --> when commenting out a Panel like so <!--%%Panel.Name%%--> because by commenting out the Panel that way without removing at least one of the % symbols, you're still telling BigCommerce to load the Panel HTML file, but to place it within the
<!-- [HTML code from panel goes here] -->
The problem with that is simply that some of these Panel files contain comments themselves.
For example, let's say you comment out %%Panel.Header%% like so !<--%%Panel.Header%%-->. The Header.html Panel may be code like this:
<!-- this is the header code panel-->
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
By commenting out the code without removing the % symbols, BigCommerce will load this:
<!--
<!-- this is the header code panel-->
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
-->
when a user open a page that uses the Header.html panel, they will see this code as commented <!--<!-- this is the header code panel-->, because the browser will start the comment at the first <!-- and end the comment at the first appearance of -->.
In the browser, the user will see the uncommented remains:
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
-->
And hence you'll see some extra, probably broken HTML, plus the stray --> somewhere at the end of the improperly commented code.
Again, to avoid all this, just remove one of the % symbols, then use regular commenting to comment out a Panel file reference.
Let me know if this helps and if you have any other questions.

What is the usage of comment notations in style tag?

For example :
<style type="text/css">
<!--
#map{ width:500px;height:500px;float:left }
-->
</style>
What is the usage of <!-- --> ?
It stops Netscape 2 era browsers, which don't recognize the <style> element, from rendering the content as text (since they start to render the content, but it is a comment, so it isn't rendered).
This is described in the HTML specification.
Entirely worthless today, but people keep adding them without understanding them in a cargo cult mentality.
I only use that type of comment for mock up when I want to remember my reasoning behind a certain structure of elements or have something I want to remember to add later. I never use those comments in production webpages.

How to comment/uncomment in HTML code

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>