Is it a good practice to include DIV container elements in SSI files or should I only put the tags within the DIV container in it. For example in the code below I have a footer which appears under all pages. Should I put only the <p> and <a> elements in the SSI file or <div> elements as well?
<div id="footer">
<div class="container">
<div class="wrapper">
<div id="footer_content">
<p>Copyright 2010 New Life e. V.<br />
Contact |
Find Us |
Impressum</p>
</div>
</div>
</div>
</div>
It will be better to put the whole footer DIV in the include file. Otherwise pages that don't need a footer will also have to carry the unnecessary outer DIVs.
Related
After reading What are the implications of using custom tags in HTML? I have decided to not use custom tags the way I was planning to use them so that I follow standards, and bots may read my code properly. Although, I wanted to know if rather than using custom tags for divs, if incasing these divs within custom tags would still cause any negative effect to my source.
I wouldn't be using: <SomeDiv> rather than <div class="SomeDiv">
Something more along the lines of:
<header>
<nav>
<div class="navWrap">
<div class="navGutz">
NAVBAR
</div>
</div>
</nav>
<logo>
<div class="logo">
LOGO
</div>
</logo>
</header>
<content>
<left>
<div class="myContent">
<topContent>
Main content and more divs
</topContent>
</div>
</left>
<right>
<div class="sidebar">
<news>
News
</news>
</div>
</right>
</content>
<footer>
<div class="social">
Social Links
</div>
<div class="copyright">
Copyright
</div>
</footer>
I ask because rather than using comments to label sections, I wanted to use tags. That way if for any reason I wanted to add style to the section in a whole, I would be able. Visually looking at it it seems a little redundant, but there would be more to it rather than what is just in the example.
So to restate the question, would incasing my content (that is up to standards) with custom tags cause any sort of negative effects against my site? Whether it be indexing, crawling, score, etc.
You should check this article on DEV. The article is about Custom HTML tags, Web Components, the Custom Elements spec and the few js libs.
I am editing a site to be 3 columns.
Here is example page, currently 2 columns:
https://courses.guitar-dreams.com/lessons/an-introduction-to-triads-and-their-inversions/
So what we have is a header, sidebar, content area, and footer. Seems pretty straightforward. But as I look at the HTML, the structure is so odd. Here is how this page is arranged:
<body>
<div class="learndash-wrapper">
<div class="ld-focus">
<!-- notice how it is starting out with sidebar even though we have 2 headers on top of each other... -->
<div class="ld-focus-sidebar">
<div class="ld-focus-sidebar-wrapper">
<div class="ld-course-navigation">
Here is sidebar navigation content
</div> <!--/.ld-course-navigation-->
</div> <!--/.ld-focus-sidebar-wrapper-->
</div> <!--/.ld-focus-sidebar-->
<!-- ok now the main content -->
<div class="ld-focus-main">
<!-- oh but wait, let's add header first! And namely the 2nd header! -->
<div class="ld-focus-header">
Here is the 2nd header
</div> <!--/.ld-focus-header-->
<!-- ok now that we added 2nd header, let's add main content! -->
<div class="ld-focus-content">
here is main content
</div> <!--/.ld-focus-content-->
</div> <!--/.ld-focus-main-->
</div> <!--/.ld-focus-->
<!--/.ld-learndash-wrapper-->
<!-- Oh wait, now that we are at end, let's add that first header now! -->
<div id="wpadminbar" class="">
The topmost header
</div>
</body>
You see what I mean? I am not a web design expert, but I tend to believe that layout of pages generally should follow similar principles to the document publishing world. That is, if your page starts with header, probably good idea for that to be the first design element that you add, and not the last, and moreover, that the design element, if possible, should be placed in the design environment in a way that has physical correspondence to the rendered document.
I am trying to add a right sidebar to make it a 3 column layout. I tried adding a wrapper div to <div class="ld-focus-main"> with display: flex and followed some of the approaches here:
http://geniuscarrier.com/2-columns-layout-with-flexbox/
<div class="ld-focus-main">
<div class="ld-focus-header">
</div> <!--/.ld-focus-header-->
<div class="mywrapper">
<div class="ld-focus-content">
here is main content
</div> <!--/.ld-focus-content-->
<div class="mysidebar">My sidebar</div>
</div>
</div> <!--/.ld-focus-main-->
Here I used (as inline styles)
.mywrapper {
display: flex;
align-items: center;
}
.ld-focus-content {
flex-grow:1
}
I didn't use properties on the right sidebar since in the example in the link above it suggested that if all is well with wrapper and left then right part will follow suit.
But above doesn't produce desired result. At bottom of page linked above you see my added divs and "My Sidebar". I think part of the problem is that the theme template uses such bizarre placement of divs and properties such that when I try to add that right column the underlying structure is not making it work as expected. Sort of like 2nd, 3rd order effects... as well as a Jenga game within a Jenga game.
I was thinking about just redoing the entire template, but at this point I would prefer to just add a sticky right sidebar without a ton of rework. That said, to me it seems the proper way to do such a layout, syntactically would be
<div class="mainwrapper">
<div class = "firstheader"></div>
<div class = "secondheader"></div>
<div class = "outercontentwrapper"></div>
<div class = "leftnavigation"></div>
<div class = "contentwrapper">
<div class = "maincontent"></div>
<div class = "rightsidebar"></div>
</div>
</div>
<div class = "footer"></div>
</div>
Just not sure all the specific properties such that the page would behave as is now, plus add a right sidebar.
So with all that, how would you go about adding that right column?
Thanks!
Brian
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.
With HTML5, there were many additional elements added for structuring documents like blog posts or long texts. But what I have problems coming up with is a semantic way of structuring UI components.
On a typical webapp, you have many different components such as modals, button elements, interacitve forms, containers, and so on. Often, I see those things being constructed using div and span only or by misusing header, footerand nav elements and I get the feeling I missed something out.
Is it really semantic to create all structural, not content-related elements using the div element only? Will there be a more diverse element choice in the future?
EDIT: Here's a short example of what I mean:
<div class="modal foo">
<div class="inner wrapper">
<div class="upper bar">
<div class="inner">
<div class="window-name">
<span class="upper heading">
<h1>Foo</h1>
</span>
<span class="lower heading">
<h3>Extra Baz</h3>
</span>
</div>
<div class="buttons">
<div class="button close"><span class="icon"><i>×<i></span></div>
<div class="button maximize"><span class="icon"><i class="fa fa-maximize"><i></span></div>
</div>
</div>
</div>
<div class="content well">
<!--
Whatever happens inside the modal window named foo.
Pretty sure it needs many divs as well, though.
-->
</div>
<div class="lower bar">
<div class="buttons">
<div class="button help"><span class="icon"><i>?<i></span></div>
</div>
<span class="info">
<p>Enter your barbaz.</p>
</span>
</div>
</div>
</div>
The last W3C working draft for HTML 5.1 was released two days ago, on April, 13, and it is "semantic-centered": see
http://www.w3.org/TR/html51/Overview.html
It is an interesting reading, while waiting to have all those fancy things implemented by the most common browsers.
Is it really semantic to create all structural, not content-related elements using the div element only?
Not in my opinion. Even without to cite "the media is the message", everything has something to do with the content, even "open" and "close" buttons allowing users to see the content.
Will there be a more diverse element choice in the future?
Of course! And with a lot of proprietary prefixes, as usual, just to keep our life busier.
Ignoring div and span elements (which are meaningless, except for the case of specifying some meaningful attributes), your snippet consists of this:
<h1>Foo</h1>
<h3>Extra Baz</h3>
<i>×</i>
<i></i>
<!-- content -->
<i>?</i>
<p>Enter your barbaz.</p>
This is what your content looks like from the semantic perspective. Not very clear what gets represented here.
Using a heading element for a subtitle (h3 in your case) is not appropriate. (Or, if it’s not a subheading but really a new/own section, don’t skip a heading level; but I’m assuming the former.) Use one heading element, and use p for the subheading, and group them in header.
Using i elements for adding icons via CSS is not appropriate. Either use CSS only (with the help of existing elements), or, if you have to add an empty element, use span.
Using span/div elements for buttons is not appropriate. Use button instead.
As you are already using a heading element, it’s recommended to explicitly specify a sectioning content element. Depending on the context of this content, it may be article or aside (or nav if it’s for navigation), but in all other cases section.
Following this, you’d get:
<section>
<header>
<h1>Foo</h1>
<p>Extra Baz</p>
</header>
<button>Close</button>
<button>Maximize</button>
<!-- content -->
<button>Help</button>
<p>Enter your barbaz.</p>
</section>
Now you may add header/footer elements for those parts that are not part of this section’s (not this document’s, it’s only about this section!) main content.
You may, for example, enclose the maximize/close buttons in a header (however, opinions if this would be appropriate differ).
HTML 5.1 will probably have a menu element and a dialog element, which might be useful in this case.
I know there is a lot of threads on this, but none of those threads actually helped me.
I have a Typo3 based e-shop. I have footer which i want to be as wide, as my browser window. On my main page, there is no problem. But when I click on "Show all products", the list of products will appear but my footer is only 988px wide. In my index.html template file I have separated div for footer (it is not in any other div or block):
FOOTER
<div id="footer">
<div class="main-width">
<div class="footer-menu" id="footerMenu">
Home |
New Products
|
Specials
|
Products All
|
Reviews
|
Contact Us
|
FAQ
</div>
<div class="copyright">
Copyright © 2013
</div>
</div>
</div>
When I load my page in OPERA and click (in opera) on "Inspect element" It seems like my footer (on all products page) is in some kind of div (contentWrapper):
<body id="indexBody">
- <div class="main-width">
+ <div id="header">
<div class="banners"/>
+ <div class="crsl">
- <div id="contentWrapper">
+ <div id="sidebar">
+ <div id="content_container">
+ <div id="footer">
</div>
</div>
</body>
</html>
The + and - shows which divs are collapsed and which are not. Hope Its clear. :)
On my main page, when I click inspect element, my footer isnt inside of that "contentWrapper" div. Where could be problem? Please Help
Never trust those element inspectors since they always display an interpreted source code in a fancy collapsible tree view. Have a look at the plain source code and count the div tags. I bet the second template misses a closing one ;-)