Search the Community

Hello, I appreciate nice html5 layout examples, e.g. https://www.w3schools.com/html/html_layout.asp (source code with new html tags like header, section, nav and others: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float ), but in many examples in css section are still old div tags with classes like .header and so on, e.g. here: https://www.w3schools.com/css/css_website_layout.asp or here https://www.w3schools.com/howto/howto_css_style_header.asp . I think this could be change to newer html5 code, for example this code with divs: https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_grid to code in attachment, which is easier (I hope :-) css-layout.html

Hey there, I am having a bit of an argument with myself on how best to organize a general page, in this specific instance for a blog. Reading online you get many different perspectives on how to organize the page, however generally you get something like this: <header> <nav> </nav> </header> <main> <article> <h2>Heading</h2> <p>Date: YY/MM/DD</p> <p>Author: Name</p> <p>Article Content</p> </article> </main> <aside> </aside> <footer> </footer> The article block would typically repeat for how many number of articles are on the page. Looking further online, reading the spec and understanding a big more how article, sections, and the like work I have come across other layouts like such: <header> <nav> </nav> </header> <main> <section> <article> <header> <h2>Heading</h2> <p>Date: YY/MM/DD</p> <p>Author: Name</p> </header> <p>Article Content</p> <footer> <p>Copyright Info</p> </footer> </article> </section> </main> <aside> </aside> <footer> </footer> This can even get further complicated with the introduction of comments, article navigation, etc. I am curious to hear from you all what is your preferred way to handle this sort of organization? Cant wait to hear back! Thanks!

Hello, I’m restructuring the html code of my site to have the best semantic markup as possible but I struggle with the <article> and <section> tags. I know there are lots of documentations on the internet on how to use these tags. I’ve read many of them but the more I read about <article> and <section>, the more I get confused on how to use them properly, mainly because I’ve seen a lot of contradictory examples from a site to another. I understand that a <section> is used to regroup elements sharing information on a similar thematic whereas an <article> refers to an independent content that is reusable outside the document. It sounds simple in theory but in practice, it's very tricky, at least for me. I’ve made different templates of my "about" page which is he most complex page I have (in regard to semantic), and I would appreciate if you could tell me which of the following images is the most semantically correct or if you have other suggestions I could take into consideration. Beside the <section>/<article> thing, I also question myself on the need of using a single <section> in the <main> container… Do I need to regroup all my "about" elements inside a <section> tag if there is no other <section> in the document? Fig. a Fig. b and 4b -> just like 3b with the blue containers being different <section> instead of being different <article>. 4b is how my page is currently structured. Any help would be appreciated. Thanks!

Whats The Difference Between Home And Introduction Sections? Should I skip home section? Is home section important?

How is the section tag defined in HTML? What can be done with it? How is it used? How is it formatted? Can it be used much as sections are used in a word processor?

The <code> has gone wierd on me , so I'll just reply to this Post.

I'm adopting HTML5 and decided trying to apply it in one of my existing sites would be a good way to learn how it behaves. I am attaching a file that behaves in a way that I am trying to understand. I have excised all irrelevant code. It is an interactive site written in php. As you will see if you open the page in a browser, the HTML5 section element seems to reduce the size of my text as opposed to div. I have played with this for several hours trying unsuccessfully to figure out what's going on. Can anyone offer a reason or even a hypothesis? Incidentally, if you exchange main and section, all three lines are reduced so it is definitely the section element. test.php

Although Name tag works, the validator chokes on it and I tried the suggested Section tag but it has too much baggage and ruins the image of my web page. Is there a replacement for Name? I have my glossary hyperlinked with `<a href="#Electronics"> Electronics </a>` and `<a name="Electronics"></a>` as the landing mark. It works perfectly because I can send the reader to the center of a paragraph when I need to. Apparently it is now obsolete. I finally found the method to use the Section tag. I still use the same `href` but have Section instead of Name. I tried `<section id="Electronics"/> but that did not validate. I tried `<section id="Electronics"></section> but the validator claims I need a header. I tried `<section id="Electronics"> </section> with a space and then with a period. Nope again. I then used `<section id="Electronics"><h6>.<h6></section>` and the validator accepted it. However but now my paragraph is all messed up. Not only is there a blank line in the middle of the paragraph but any css for font size is not the same after the Section tag. Is there any CSS to defeat all defaults of the Section tag?I tried `section { display: inline;}` in my Style section but that did not work either. After all this exploration, maybe ther is a better way. I have 148 of these entries to fix. This whole problem revolves around my need to send the reader to a location within a paragraph: mot to the beginning of one and not to the end of one and to do it without messing up the style of my web page. Thoughts appreciated......

I am building a web page that's part of a contacts system. The page enables the user to search for a contact and after finding a contact they can view and edit that contacts details in the web page. The page consists of a number of tables that I want to control using HTML 5 and CSS 3. In full screen mode (e.g. on a desktop machine) there are up to 4 tables across the page. I need the page to convert to a single, narrow column of tables when the screen width gets narrower (e.g. when on a mobile phone). I've attached 2 screen shots. The first shows the page in full screen mode: The other shows how I want the page to convert when it goes into narrow mode: Please let me know what I can do to get the page working in that way. I've already played around with this problem in different ways. Initially I tried using lists, but found that I couldn't combine tables with lists, because they don't seem to display correctly in that set up. I've also tried using <section>, <article> and <aside> but found it difficult to control the widths of things (tables) when using these. Also, it seems difficult to use these components when I have 3 or 4 tables spread across the page and I want/need to convert those into a single column of tables with only one table per row in that column. It currently seems to me as though HTML 5 and CSS 3 just aren't set up to deal with this kind of scenario. I hope someone out there can prove me wrong and point me in the right direction, so that I can resolve this problem. Thanks in advance for your time.

Dear all, I have just started using HTML5. I tried coding <article> <a id="top"></a> etc </article> to set an anchor point so that I could jump to the top of the current page. This appeared to work when using Firefox but not when using IE9 I then tried <article><section> <a id="top"></a> etc </section> </article> This appeared to work with both Firefox and IE9. Is this just a quirk of IE or must anchors always be in a section element? Does anyone know of a central source where I can find other HTML5 aspects that only work with certain browsers Thanks for any advice you can give me. Ian

While i was browsing in the forum i saw at the top of the section a pinned topic 'Tutorial ...' and i thought of this 'Tutorials Section' . I'm not quite sure whether there's already a section like this in the forum (if yes sorry for posting this topic), or if there are many topics-tutorials like this, but i think a section like this might be helpful.What i have in mind is some tutorials that cover the basics, the fundamentals or the general guide in some projects, for example making a login-register system with php & mysql, or maybe a custom cms, or perhaps a shopping cart / e-shop, maybe a blog, or a guestbook, or newsletter, or a rating system etc etc.Again what i'm telling is to give the general idea and the basics of how to create a project and then its up to the developer what or if he/she needs to add some more functionality.