**Hello everyone! I'm learning HTML 5 and I have a simple question..
Should be subheadings be indented? Since h2 is subheading of h1, so, should I indent h2?
For example:
<h1>My blog</h1>
<h2>Photos</h2>
<h3>My cat</h3>
<h3>My dog</h3>
This is a personal preference, but no. They are not nested so shouldn't be indented.
No, only tag content should be indented, e.g.,
<h1>
My Blog
</h1>
Or:
<h1>
My Blog
<strong>Something else</strong>
</h1>
Indentation should show DOM structure.
This is, of course, opinion.
Ultimately up to you, as the browser doesn't care how you indent your code. However, typically only if tags are nested will they be indented. Example,
<h1>Hello World!</h1>
<h2>This is an example</h2>
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>Joe</td>
<td>A cool dude</td>
</tr>
<tr>
<td>Sally</td>
<td>A cool gal</td>
</tr>
</table>
Related
I have a 'dashboard' page that comes up after a user selects a project that they'd like to inspect the details on. Some of these details are displayed in a table format. Below is a portion of the Jinja2 template:
`
{% if release_container.nreleases > 0 %}
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Date Created</th>
<th scope="col">Status</th>
<th scope="col">Date Released</th>
</tr>
</thead>
<tbody>
{% for rh in release_container.release_history %}
<tr>
<td>{{rh.name}}</td>
<td>{{rh.creation_date}}</td>
<td>{{rh.status}}</td>
<td>{{rh.release_date}}</td>
</tr>
{% endfor %}
</tbody>
</table><!--ends table-->
{% endif %}
`
If I reload the page, or click on a link and then come back to the page, the same data will get appended. As an example, here's the HTML from a 'fresh' load, which is what I should look like after a reload as well:
`
<tbody>
<tr>
<td>v0.1</td>
<td>2022-11-10</td>
<td>False</td>
<td>2022-11-10</td>
</tr>
<tr>
<td>v0.2</td>
<td>2022-11-17</td>
<td>False</td>
<td>2022-11-17</td>
</tr>
</tbody>
`
But this is what it looks like when the page is reloaded:
`
<tbody>
<tr>
<td>v0.1</td>
<td>2022-11-10</td>
<td>False</td>
<td>2022-11-10</td>
</tr>
<tr>
<td>v0.2</td>
<td>2022-11-17</td>
<td>False</td>
<td>2022-11-17</td>
</tr>
<tr>
<td>v0.1</td>
<td>2022-11-10</td>
<td>False</td>
<td>2022-11-10</td>
</tr>
<tr>
<td>v0.2</td>
<td>2022-11-17</td>
<td>False</td>
<td>2022-11-17</td>
</tr>
</tbody>
`
What do I need to do in order to stop this from happening? I presume this is some kind of cache setting?
Thank you in advance for any assistance.
I've debugged the code by printing out the lengths of the various arrays to see if they change on reload, thinking that the data was being appended to the array, but the length remains '2', even though 4 different entries are rendered.
EDIT
A commenter asked to see the view code. At this point in time, it's a huge function that generates the containers that get passed to the template (which is just one template amongst half a dozen that gets passed), and I'll be refactoring that code shortly into more palatable bites, but hopefully the snippet below provides more context:
for release in releases:
rhistory_container = ProjectDashboardReleaseHistoryContainer()
rhistory_container.rid = release.id
rhistory_container.name = release.name
rhistory_container.creation_date = release.created
rhistory_container.status = release.is_active
release_container.release_history.append(rhistory_container)
"""
"""
return render_template('project_home.html',parent_container=parent_container,release_container=release_container,testing_container=testing_container,reqs_container=reqs_container,sw_container=sw_container,hw_container=hw_container)
There has been several versions of this question, but I've found a specific scenario I can't get my head around. I have this template on a parent element:
<tbody>
<tr is="tree-item" v-for="item in children" :item="item"></tr>
</tbody>
So far so good. The child element is:
<tr v-on:click="toggle" class="{{ classes }}">
<td class="name">
{{ item.tree_item_heading }}
</td>
</tr>
<tr v-show="isLoaded" is="tree-item" v-for="item in grandChildren" :item="item"></tr>
It's a recursive form line, so if the first tree-item has children, they will render as tree-item too. Although it shows up fine, it is rendered as a Fragment Instance, hence the v-show property gets ignored.
Any idea on how to solve this?
Cheers
You could try using multiple tbody tags for your parent loop:
<tbody v-for='item in children'>
<tr is="tree-item" :item="item"></tr>
<tr v-show="isLoaded" is="tree-item" v-for="gItem in item.children" :item="gItem"></tr>
</tbody>
There is PEP 8 for Python, but I haven't seen a preferred indentation guideline for django templates.
What I mean is, I normally indent blocks like this:
<span>outside</span>
{% if condition %}
<span>within condition</span>
{% endif %}
<span>outside</span>
While this looks good on the editor, but it will look crap on view source like this:
<span>outside</span>
<span>within condition</span>
<span>outside</span>
It would even look worse within the HTML indentation, see below:
<div>
<span>outside</span>
{% if condition %}
<span>within condition</span>
{% endif %}
</div>
will become:
<div>
<span>outside</span>
<span>within condition</span>
</div>
While I agree having better layout in editor is way way more important, but I also get paranoid about the generated messy HTML source code.
I am currently following my own convention in django template guideline for consistency matter. The rule is simple:
Django tag does NOT increase the indentation level
HTML tag does increase the indentation level
It does not matter how many nested Django Tag you have, you should still on the same level of indentation. I consider this as the trade off for putting logic in templates which should be minimized if possible to avoid confusion.
<html>
<body>
<ul>
{% if condition %}
{% for item in menu_item %}
<li>{{ item }}</li>
{% endfor %}
{% endif %}
</ul>
<main>
{% block content %}
<p>Hello World</p>
{% endblock content %}
</main>
</body>
</html>
Side note
I am using 2 spaces for HTML indentation, because HTML tends to have a very deep nested.
For Vim user, please note that the syntax is not html but htmldjango
Thus my ~/.vimrc looks something like:
autocmd Filetype htmldjango setlocal ts=2 sts=2 sw=2 expandtab
Depending your editor, there are ways to set a specific indent width for HTML files.
As for the Django tags, it is actually a good thing not to not add a indent level. See that example:
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
Would be rendered like so:
<ul>
<li>Bacon</li>
<li>Ninja</li>
<li>Tumbleweed</li>
</ul>
And we do not want the two levels of indent. Instead:
{% block content %}
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% endblock content %}
My apologies for reviving an old question, but I think the way Emacs' web-mode.el indents Django templates deserves a mention here:
{% block content %}
<div
id="1"
class="fancy"
>
{% if link %}
<a href="{{ link }}">
Click here
</a>
{% endif %}
</div>
{% endblock %}
As you can see, it indents both Django tags and HTML tags, as well as multiline HTML tags. It supports <style> and <script> tags too. In fact, I like this behavior so much that I created DjHTML, a standalone indenter and a pre-commit hook that uses the same indentation rules as web-mode.
I think this is more of a personal preference and what is easy to read and easy to understand in the future (my time limit is "after six months") would be a better alternative than some cookbook recipes. What I use is a two type approach, not just for Django templates but for any language that accepts free formatting of the code. As such I format not critical portions as just left justified block of lines which is an admittedly eyesore but I tend to just ignore them so I can focus on important parts which is extensively indented, preferably in general single action per line and indented at each semantic group change thus all parent/child grouping, nested elements etc. are visible with just one look only.
{% if error_message %}
<p>
<strong>{{error_message}}</strong>
</p>
{% else %}
<table border>
<tr>
<td>
{{degerlendirme.adi}}
</td>
</tr>
<tr>
<td>
<table border>
<tr>
<td>
Tip
</td>
<td>
{{ tip }}
</td>
</tr>
<tr>
<td>
Açıklama
</td>
<td>
{{ degerlendirme.aciklama }}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<form action="{% url 'perf:degerlendirme' degerlendirme.id %}" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="OK" />
</form>
</td>
</tr>
</table>
{% endif %}
I usually use Eclipse and there are several good HTML editing tools that you can install into that environment. I try to use them, but prefer to depend solely on indentation for ease of reading/coding/analysis cycle. That is mainly because I regularly need to use other editors, mostly vi. In this case if I rely mainly on Eclipse or whatever IDE I was using for understanding the code vi, nano or other text editors would make my life miserable.
As one of my professors said in a classroom, lots of years ago, spaces are free and tabs are even cheaper.
One last note; Once I needed to remove all white space from a Django template that was creating enormous nested tables in order to improve run time performance. Such might be needed for certain cases. In similar situations it is better to keep one working copy and generate runtime copy from that by a script or tool. I know that, there are some HTML de-clutter tools. In my case, tools I tried corrupted the template and I needed to perform that operation by hand.
I have a CSV document littered with thousands of instances of a table that I need to remove. I assume I can use REGEX, but I can't seem to find an expression to remove it. I attached a sample at the bottom.
I thought <table(.*)</table> would work, but that seems to ignore line breaks. Is there somebody who can help me remove these?
<table cellpadding=""5"" align=""center"" class=""shippingcost"" style=""width: 525px;"">
<tbody>
<tr>
<td colspan=""2"" style=""text-align: center;"">Shipping:
</td>
</tr>
<tr class=""shippingcostrow"">
<td>
<div align=""right"">Domestic
Canada
International
</td>
<td width=""400"">
<div align=""left"">Insured shipping is included to all U.S. destinations.
Canadian buyers pay $28 for EMS insured shipping.
All International Buyers pay $35 for EMS insured shipping.
</td>
</tr>
</tbody>
</table>
Got it. SublimeText has special tags for REGEX apparently.
(?s)<table(.*?)</table>
I'm a novice in XSL, so excuse me if my question is too easy.
Look at code
<table class="foot_table">
<tr>
<td>
<div id="open_all">
show all
</div>
</td>
<td>
<div id="producers_footer">
close
</div>
</td>
</tr>
</table>
So i have page showall.xsl. How can i connect xslt template with that page?
Because now my page (showall) is empty.
Can you show me some examples?
Not exactly sure, but I think you are looking for a XSLT processor. An XSLT processor takes the source code (html in your case) and executes the showall.xslt on it and produces a new output.
Some references:
http://www.xml.com/pub/a/2000/08/30/xsltandhtml/index.html
http://en.wikipedia.org/wiki/Category:XSLT_processors
You can download a free copy of Visual Studio Express 2012 and process the xslt and xml in there.