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 <div>
Related
I wrote some custom HTML code in my Wikidot article - instead of the "original" Wikidot syntax, I have to use <a href="/page"> for links.
The content of my custom HTML block is like this:
<section class="intro">
<div class="container">
<h1>Headline-line text</h1>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>Time value </time> Text. Link here.
</div>
</li>
</ul>
</section>
The problem is that it loads the entire content of the HTML into that carefully selected small portion of the original site.
I can only assume that it has something to do with <div>s, as I've already seen this issue on other sites. Hence my assumption is that there must be a general source of this issue, and this is why I'm asking.
What's the reason of this problem and how can I avoid it?
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>
So I have a sphinx-generated website. Parts of it are in raw html, parsed by sphinx + jinja.
Now I want to use links to certain parts of the toc-tree inside the raw html.
Is there a way to achieve this?
Currently I'm exiting the raw html and use rst.
This looks something like
.. raw:: html
<small class="float-right example-links">
:ref:`Examples<general_examples>`
.. raw:: html
</small>
Not is this ugly, it also messes up the generated html.
Is there a better way to do this?
Thanks :)
You can simply use a HTML link element, <a href="..."...</a> if you know how section ids are generated. The ids for items in the table of contents are simply lower-cased section titles with white space replaced by hyphens, -. So this reStructuredText
Title
=====
.. contents:: Table of Contents
Section 1
---------
Some filler text...
Section 2
---------
Some filler text...
results in the following HTML snippet (<head> etc. removed)
<body>
<div class="document" id="title">
<h1 class="title">Title</h1>
<div class="contents topic" id="table-of-contents">
<p class="topic-title first">Table of Contents</p>
<ul class="simple">
<li><a class="reference internal" href="#section-1" id="id1">Section 1</a></li>
<li><a class="reference internal" href="#section-2" id="id2">Section 2</a></li>
</ul>
</div>
<div class="section" id="section-1">
<h1><a class="toc-backref" href="#id1">Section 1</a></h1>
<p>Some filler text...</p>
</div>
<div class="section" id="section-2">
<h1><a class="toc-backref" href="#id2">Section 2</a></h1>
<p>Some filler text...</p>
</div>
</div>
</body>
Therefore, in order to link to a table of contents item you can use the following reStructuredText
.. raw:: html
<small class="...">Section 1</small>
If you want to link to the section itself then replace the href value with #id1 or the relevant section's id.
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.
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.