I have my habits with LaTeX, then in HTML I don’t know which element can replace the LaTeX’s \subparagraph{} command. <br /> isn’t a good idea because it is the equivalent of the blank line in LaTeX. I can create a special class “subparagraph” but before I want to know if HTML didn’t have a similar element.
The \subparagrahp{} LaTeX’s command is something between the paragraph and the HTML’s <br /> element. Overapi didn’t tell me more :/
Someone have any idea please?
You could use a div element as the paragraph subsitute and p elements as subparagraphs, with additional class for styling, this could represent your LaTeX document structure.
\paragraph{Introfoo}
Introduction lorem lorem
\subparagraph*{}
Foobar lorem impsum ugh
\subparagraph*{}
Foobar lorem impsum ugh
would translate to:
The h3 tag is just a suggestion, the level depends on your other structure around this.
<div class="paragraph">
<h3 class="paragraph">Introfoo</h3>
<p class="paragraph">
Introduction lorem lorem
</p>
<p class="subparagraph">
Foobar lorem impsum ugh 1
</p>
<p class="subparagraph">
Foobar lorem impsum ugh 2
</p>
</div>
LaTeX' \paragraph is a heading element, the next-to-smallest one, so I'd map it to <h5>, leaving <h6> for subparagraphs, and use CSS to give them display:inline-block (run-in headers) and appropriate other styling as desired. This will leavel h1-h4 for title-and-or-chapter, section, subsection, subsubsection.
Related
I was wondering if anyone could suggest a shorthand for html coding specifically in naming classes and ids or just designating html elements. Currently with regular html i am forced to write:
<div class='class1'> <div id='id1'> </div> </div>
It seems kind of heavyhanded to me having to write div class='' or div id='' , each time. I keep writing the same type of thing over and over again. I know its normal but it doesnt seem optimal at all. Is there another way this can be written either in standard html, html5 or using a other markup language or preprocessor that still maintains the <> symbols but replaces div class= or div id = with something allittle less verbose? but equally expressive? Thank you.
You could try an HTML pre-processor such as HAML (http://www.haml.info).
With HAML, your code would go from this:
<div class='class1'> <div id='id1'> </div> </div>
to this:
.class1
#id1
And something a little more complicated like this:
<html>
<body>
<h1 class="heading title">Heading</h1>
<p class="paragraph description">Lorem ipsum dolor sit amet...</p>
</body>
</html>
could be written in HAML like this:
%html
%body
%h1.heading.title Heading
%p.paragraph.description Lorem ipsum dolor sit amet...
I'd recommend you to take a look at pug https://pugjs.org/api/getting-started.html
Suppose there is a main heading and it has several sub headings which can be categorized by giving them separate headings but instead they are visually communicated differently than giving them separate headings.
i.e:
In such a case how should we use heading tags?
What I believe should be the right thing to do (but not sure) is to add separate section element for both categories.
like this:
Any suggestions?
Note that the section element is a sectioning content element. This means it creates an entry in the document outline. If you want to use h1-h6 according to the corresponding rank in the outline, your h2 headings should become h3 headings.
Also note that it’s recommended to explicitly use sectioning content elements where appropriate (e.g., at least wherever you use heading elements), so you might want to use section for "What we do" etc., too.
So the outline-relevant structure could look like this:
<body>
<h1>Xyz Company</h1>
<section>
<h2>About us</h2>
<section>
<h3>What we do</h3>
</section>
<section>
<h3>Where we are?</h3>
</section>
<section>
<h3>Where we do?</h3>
</section>
</section>
<section>
<h2>Attributes</h2>
<section>
<h3>Respect</h3>
</section>
<section>
<h3>Responsibility</h3>
</section>
<section>
<h3>Growth</h3>
</section>
</section>
</body>
Each sectioning content element (and each sectioning root element, i.e., body in this case) has its own heading, and there is no heading without explicit section.
Even if you don’t want to provide "About us" and "Attributes" headings, you can still keep the two section elements. Not ideal, but better than not having these, because they make the intended document outline clear. (A compromise could be to visually hide these two headings with CSS.)
From a pure technical SEO standpoint, it would be better if both sections had their own heading, and the contents of those sections had their subheadings, so you would be looking for something like this:
<main>
<h1>Your Company Name</h1>
<section>
<header>
<h2>About Us</h2>
<h3>What we do</h3>
<h3>Where we are</h3>
<h3>Where we do</h3>
</header>
<section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
</section>
<section>
<header>
<h2>About Us</h2>
<h3>What we do</h3>
<h3>Where we are</h3>
<h3>Where we do</h3>
</header>
<section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet Dolor...</section>
</section>
</main>
Usually what I like to do is look at the page without any CSS/JavaScript and see how it looks. If you have the same flow, and things appear like they should by default, you are on the right track.
Search engines are smart enough to understand what you mean, even if you use div for everything, but having it semantically correct may increase their likeness towards your clean and organized code.
Adding sections for both could be helpful, but what is much more helpful is that this page talks about a specific topic, other than multiple. So I would recommend that instead, you make one page for each About Us and Attributes. If it seems overkill, you can go with just one page; That would be correct, but not optimal in search engines eyes -- They really like that you have one page for each topic and that they-re unique within the domain.
The simple_format helper in Rails will take text input and convert newline characters to p or br tags which is the exact opposite of what I'm trying to accomplish.
How would i go about taking a snippet of HTML that looks like:
<p>Lorem</p>
<p>Ipsum.
<br />
Lorem ipsum.
<br />
Lorem ipsum.
</p>
<p>
Lorem ipsum.
</p>
And convert it to something that looks like:
Lorem\n\nIpsum.\nLorem ipsum.\nLorem ipsum.\n\nLorem ipsum.
new_html = html
.gsub("\n", '') # remove existing new lines
.gsub('</p>', "</p>\n") # add a new line per para tag
.gsub('<br />', "<br />\n") # add a new line per break tag
ActionController::Base.helpers
.strip_tags(new_html) # remove all html tags
Complementing previous answer you might want to add .gsub('<br/>', "<br/>\n") in case break tags are this way and .gsub('<div/>', "<div/>\n"). Just make sure you are replacing all tags that must break the text.
I am trying to style how the articles are laid out in a Category Blog and have got stuck on styling the actual content of the article.
My code for the first article on the Category Blog is as such:
<div class="items-leading">
<div class="leading-0">
<h2>
News Post 1
</h2>
<dl class="article-info">
<dt class="article-info-term">Details</dt>
<dd class="published">2nd Mar 2013</dd>
</dl>
Lorem ipsum dolor sit amet etc...
<div class="item-separator"></div>
</div>
I am trying to style the lorem ipsum example text by wrapping it in some kind of tags, either div or paragraph I don't mind, so I can give its wrapping container a div and font styling etc.
Here is a link to the site where its currently on:
http://test.studevent.co.uk/news
Any help is greatly appreciated.
You want to change default template for article item in blog?
/components/com_content/views/category/tmpl/blog_item.php - it is default template. copy it in your template (/templates/{your_template_name}/html/com_content/category/blog_item.php).
After, in your copy on line 137 you can find <?php echo $this->item->introtext; ?> - it is your text 'Lorem ipsum ...'
To do this, the file you need to edit is found here:
YOURSITEROOT/layouts/joomla/content/blog_style_default_item_title.php
In order to edit file, create a new folder (within your template) and move the file here, so it would be:
YOURSITEROOT/templates/YOURTEMPLATE/html/layouts/joomla/content/blog_style_default_item_title.php
I would like my tinymce editor to allow all the html elements, include some nested kind.
I read the documents at tinymce: http://www.tinymce.com/wiki.php/Configuration:valid_elements
And also confirmed by this post on Stackoverflow: TinyMce Allow all Html tag
I use valid_elements :"*[*]", in my tinymce options:
$('.page-tinymce-editor').tinymce({
theme: 'advanced',
theme_advanced_buttons1: "fontsizeselect,bold,italic,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink,code,image,uploadimage,uploadattachment",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
width : "660px",
height: "1200",
body_id :"article",
valid_elements :"*[*]",
skin: "wp_theme",
relative_urls: false,
content_css: "http://" + location.host + "/assets/screen.css",
plugins: 'uploadimage,uploadattachment'
})
But there's a nest condition in my html is still remove by tinymce. I have a piece of html like the following:
<span class="text">
<p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</span>
which becomes this :
<p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
Tinymce removes the span outside the p tag. Other span tag are all fine. I studied the tinymce over and over, but didn't come out any idea to fix this.
Is there way to fix it?
Thanks a lot
You will need to adjust the valid_children setting! I guess p-tags are not defined/allowed al child noddes of spans by default.
I think this could not be done on tinymce side. Here is the post talking about it at Tinymce forum: http://www.tinymce.com/forum/viewtopic.php?pid=98807#p98807
Try something like extended_valid_elements : '+span[p]', in addition to the valid_children setting discussed above. And make sure to clear your cache entirely to make sure its not serving your old config file.
This should allow p to be a child of span
More information on that topic:
Alan Storm on Magento TinyMCE
Pixafy - Overcoming Magento's TinyMCE
I know this is an old topic but it still ranks high in the search results so hopefully it will help someone.