Auto indent code in an HTML file (generator/tool) - html

I was wondering if there is a tool or generator that could auto indent my code after production from:
<div>
<div>
<p>
</p>
</div>
</div>
to:
<div>
<div>
<p>
</p>
</div>
</div>
Does something like this exist?

Try js-beautify.
It's a JavaScript beautifier but works for HTML too.

You can try Pretty Diff, which can also handle JSLT type tags.

Related

How to access an element inside a div in jQuery?

here's my html code :
<section>
<div class="article">
<p>
things aren't thing anymore they basically copy of originally thing created bu someone no one know as now we can calll them copy's
</p>
</div>
</section>
<br>
<section>
<div class="article">
<p>
things aren't thing anymore they basically copy of originally thing created bu someone no one know as now we can calll them copy's
</p>
</div>
</section>
<br>
<section>
<div class="article">
<p>
things aren't thing anymore they basically copy of originally thing created bu someone no one know as now we can calll them copy's
</p>
</div>
</section>
that my jquery code :
$(document).ready(function(){
$(".article").append('<span class="close" style="top:0px;background:#000;color:#fff;padding:10px;cursor:pointer;">X</span>');
$(".close").click(function(){
$(this).parents(".article > p").hide();
});
});
I want to hide <p> when the user click on span , how can i have access to <p> only by jquery instead of typing <span>X</span> 3 times in html ?
The issue here is you can't use parents() to look up to a parent and have that same selector look inside the parent
Some alternatives are use find() or siblings():
// go up to the parent then find the descendents inside that parent
$(this).parents(".article").find("p").hide();
// OR the span is a sibling of the `<p>` and can target them directly
$(this).siblings("p").hide()// or toggle() if want to show again on alternate clicks
Try using find().
parents() uses filter() under the hood to check whether the node matches the selector. Here the p node matches .article > p, but its not one of the parents of .close
$(document).ready(function() {
$(".article").append('<span class="close" style="top:0px;background:#000;color:#fff;padding:10px;cursor:pointer;">X</span>');
$(".close").click(function() {
$(this).parents(".article").find('p').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="article">
<p>
things aren't thing anymore they basically copy of originally thing created bu someone no one know as now we can calll them copy's
</p>
</div>
</section>
<br>
<section>
<div class="article">
<p>
things aren't thing anymore they basically copy of originally thing created bu someone no one know as now we can calll them copy's
</p>
</div>
</section>
<br>
<section>
<div class="article">
<p>
things aren't thing anymore they basically copy of originally thing created bu someone no one know as now we can calll them copy's
</p>
</div>
</section>

How to display HTML snippet on a HTML page?

I want my project to display <div> quoted on the website. I am using the <code> tag. However, it doesn't appear. This is the piece of code I am using:
<div class="section">
<h3>Additional Style</h3>
<h2>Box Model of <code><div></code>
<!--
I want this code to output the following: Box Model of <div>
However, it outputs: Box Model of
-->
</h2>
<ul>
<li>padding: 40px,</li>
</ul>
</div>
Thanks beforehand!
Use > and < instead of code.
Source: https://www.w3schools.com/html/html_entities.asp
use this <h2>Box Model of &ltdiv&gt

Match page source tags with regex

I am trying to catch a tag from a page source with regex.
After allot of trying i find it very hard to establish.
Here is an example of an HTML source:
<div class="searchBx">
<div>
<li>somthing</li>
</div>
</div>
<div>
<li>somthing2</li>
</div>
I am trying to catch only the (div class="searchBx") tag and the tags inside.
It is hard because it always catch the div tag after him.
The result should be:
<div class="searchBx">
<div>
<li>somthing</li>
</div>
</div>
Thanks ahead.
It is impossible for regex to match the div you speak of.
Since the div contains another div, by nature it will not be able to differentiate between the </div> tag within it, or the </div> tag that closes the div you wish to match.
<div class="searchBx">
<div>
<li>somthing</li>
</div> <!-- This -->
</div> <!-- and this are the same to regex -->
<div>
<li>somthing2</li>
</div>
Here's what happens: http://regexr.com/3d0jn
For what you need to do, you must use a DOM parser in whichever language you are using.
Plus it's incredibly poor practice using regex to parse HTML, but everyone does it anyway.

break between php return and html

I cannot understand why there is a break between "Hello 1" and "Logout". Can anybody see why?
<h4 class="hello">Hello, <em><?php echo $_SESSION['username'];?>!</em></h4>
Logout?
test
<div id="container">
<div class="topbar">
<p id="headline">Test</p>
<p id="headline_1">Page</p>
</div>
</div>
Headings, including h4 elements, are display: block by default so they generate line breaks before and after themselves.
You can alter that by:
Not using a heading element (the text doesn't look like it is a sub-sub-sub heading so this is probably the best approach).
Modifying the display
Floating elements
Using Flexbox
Using CSS grids
Reason is described by some people as above. One solution can be like this:
<div>
<span class="hello">
Hello, <em><?php echo $_SESSION['username'];?>!</em>
</span>
Logout?
</div>

html section or div?

My website has a profile page. I have something like:
<h1>Foo bar profile</h1>
<div>
<h2>Address</h2>
<p>Foo bar street, 55</p>
<p>Foo city</p>
</div>
<div>
<h2>Contact information</h2>
<p>foo#bar.com</p>
<p>55-5555-5555</p>
</div>
Should I use divs or sections to wrap this kind of content? With sections, should i change h2 to h1? I don't know what is right.
Thank you.
Why not make use of the <address> tag?
<h2>Contact information</h2>
<address>
foo#bar.com<br />
55-5555-5555
</address>
its just fine..
still if u want to learn html5 i will recommend
Tutorials:
http://slides.html5rocks.com/#slide1
(built using HTML5)
http://diveintohtml5.ep.io/
http://html5tutorial.net/
Demos: http://html5demos.com/
I wouldn't call that a <section> although that all might be contained in a <section class="contact">
I recommend the hCard microformat or the HTML5 vCard microdata definition derived from it. It's a set of well defined class names to use to define the pieces of your contact information.
You can use what tag types you want, set the appropriate classes, then style them with CSS - for example is "Address" is not really a 2nd level heading just style it to look like one (if that's the look you want) based on it being within a <div class="vcard">
You might start out like...
<section class="userprofile">
<div class="vcard">
<div class="adr">
... etc. ...
</div>
</div>
</section>
The HTML5 way uses itemprop instead of class - see http://www.html-5.com/microdata/rich-snippets/addresses/ for some more explanation and samples.