I am new to HTML. In my HTML code I have different sections. In my projects section I have 3 child sections but somehow my resume section header which is underneath my projects section and a separate section display as part of the projects section.
link to my repository: https://jobarkhuizen.github.io/FreeCodeCampPersonalPage/
I run my code through W3C validator and included the source, outline and clean up html in the run. Validator run return no error and the outline shows that Projects and Resume sections are both children of the Body tag and Columns Tribute page, Landing page and Technical page are children of Projects section
<section id="projects">
<h2><a id="portfolio">Projects</a></h2>
<section id="col1"><h3 style="text-align: center;">Tribute Page</h3>
<a href="https://jobarkhuizen.github.io/FCC_Tribute_Page/" target="_blank">
<img class="project-tile" src="tributepage.jpg" alt="Tribute Page Picture"></a>
<p>The following guidelines was provided for the tribute page. It should have a div element with a corresponding id="img-div". Within the img-div element, there should be an img element with a
corresponding id="image". Within the img-div element, there should be an element with a corresponding id="img-caption" that contains textual
content describing the image shown in img-div. There should be an element with a corresponding id="tribute-info", which contains textual content
describing the subject of the tribute page. Ther should be an a element with a corresponding id="tribute-link", which links to an outside site
that contains additional information about the subject of the tribute page, this link must open in a new tab. The img element should responsively
resize, relative to the width of its parent element, without exceeding its original size and should be centered within its parent element.
</p>
</section>
<section id="col2"><h3 style="text-align: center;">Landing Page</h3>
<a href="https://jobarkhuizen.github.io/LandingPage/" target="_blank">
<img class="project-tile" src="Landingp.jpg" alt="Landing Page Picture"></a>
<p>The following guidelines was provided for the product landing page. The page should have a header element with a corresponding id="header".
An image within the header element with a corresponding id="header-img".
Within the #header element a nav element with a corresponding id="nav-bar".
At least three clickable elements inside the nav element, each with the class nav-link.
When you click the nav-link button in the nav element, it goes to the corresponding section of the landing page.
Embed a watch-able video with id="video".
A form element with a corresponding id="form". Within the form, there is an input field with id="email" where you can enter an email address.
The #email input field should have placeholder text to let the user know what the field is for and uses HTML5 validation to confirm text is correct.
Within the form, there is a submit input with a corresponding id="submit".</p>
</section>
<section id="col3"><h3 style="text-align: center;">Technical Page</h3>
<a href="https://jobarkhuizen.github.io/FCC-Technical-Page/" target="_blank">
<img class="project-tile" src="technicalp.jpg" alt="Technical Page Picture"></a>
<p>The following guidelines was provided for the technical page. Should have a main element with a corresponding id="main-doc", which contains the page's main content.
Within the #main-doc element, you should have several section elements, each with a class of main-section.
The first element within each .main-section should be a header element which contains text that describes the topic of that section.
Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it.
Any spaces should be replaced with underscores (id="Javascript_and_Java").
The .main-section elements should contain at least 10 p elements in total.
The .main-section elements should contain at least 5 code elements in total.
The .main-section elements should contain at least 5 li items in total. A nav element with a corresponding id="navbar".</p>
</section>
</section>
<section>
<h2><a id="resume">Resume</a></h2>
<p>Studying Responsive Web Design through FreeCodeCamp. My next project is studying and completing JavaScript and SQL.</p>
<p>I have done automated testing on Winrunner and QTP and managed projects through TestDirector.</p>
<p>Did testing in both waterfall and agile development environments. </p>
<p>This portfolio page is for Freecodecamp certification. I have loaded a personal portfolio page on my Github account which I will update as soon as possible.</p>
</section>
The headings should have a brown background only and be center aligned, but my whole Projects section has a brown background and the Resume heading is on the right side of the page within the projects section
When you use css float property as left, then the content flows to the right of that element. This is unlike the normal flow of block elements which is vertically stacking one below another.
There are many ways to get around this, one way suggested in the spec is to use clear as both:
both: Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that
resulted from elements earlier in the source document.
So make your resume section as
<section class="resume">
</section>
and add its css as:
.resume {
clear: both;
}
For the complete story refer Visual Formatting Model
Also, note that CSS has introduced a number of new features that we dont have to use floats for a column layout. We have grid and flex layouts for the same.
Please use the below code
CSS
<pre>
<style>
.clear{clear:both;}
</style>
<section id="projects">
...
</section>
<div class="clear"></div>
</pre>
Related
I have a homepage with slider after the header. Below the slider are other content sections.
I am not sure how to structure my document. Where should I place my h1 and can I have multiple h1 tags?
Is it good practice to use h1 tags for banner captions or banner titles?
The problem is that some designs make it hard to document the structure properly.
<body>
<div class="slider-wrapper">
<div class="slide">
//some text - image in background
</div>
<div class="slide">
//some text - image in background
</div>
<div class="slide">
//some text - image in background
</div>
</div>
<div class="client-wrapper">
<h2>Our Clients</h2>
<div>
Client Logos
</div>
</div>
....
</body>
It is generally possible to have many h1 tag, but structurically it may be better if you have only one h1. You can modify your headers h1's font-size with CSS if you have it inside something, like header tag. Like that:
HTML:
<header>
<h1>My awesome page!</h1>
</header>
<h1>Thing I want to talk about today</h1>
CSS:
header h1 {
font-size: 1.5em;
}
There is no requirement that you only have 1 h1 tag (see the example in the WHATWG doc here), but many designers reserve h1 to the title of the page, useing lower-level headers sub-headings. I would recommend only putting one on the page.
h2,h3,etc. will, by default, be smaller than h1. While you could use multiple h1 tags with class attributes to target CSS to the different headers, I would highly discourage this, use h2,h3,etc instead.
I'm not clear on what exactly you mean by "banner headers/captions" in this context.
Where should I place my <h1>?
The <h1> element is generally used to mark up the primary heading of the document, so... the <h1> element will conventionally appear somewhere near the top of the visually-displayed document.
In the source mark-up, you can technically place the <h1> anywhere, since position: fixed or position: absolute in your CSS will be sufficient to display the element somewhere near the top of the visual document.
Normally however <h1> appears in the source mark-up quite soon after the <body> begins.
Can I have multiple h1 tags.
Something of a hornet's nest. Yes you can, but...
It's probably inadvisable.
The best single article which looks how document structure and headings were intended to work in HTML5 and how everything actually works in practice is:
The HTML5 Document Outline is a dangerous fiction by Steve Faulkner
Is it good practice to use h1 tags for banner captions or banner
titles?
It's good to use h-something elements for all sorts of headings and heading-like elements throughout your document.
Bear in mind though that some elements have their own native caption elements.
<figure> uses <figcaption>
<table> uses <caption>
Are either of these valid to make a container with a hover effect become a link? I have six of these on my homepage, addition to a few text links a the top of the page?
I thought wrapping the whole div would work, then thought maybe I just wrap the hover state. Neither worked.
<a href="/organdonor.html">
<img src="/images/console/organdonor.jpg" />
<div class="mask">
<h2>Organdonor.gov</h2>
<p>GOVERNMENT</p>
</div>
</a>
</div>
<a href="/coach.html">
<div id="console_coach" class="view">
<img src="/images/console/coach.jpg" />
<div class="mask">
<h2>Coach</h2>
<p>FASHION</p>
</div>
</div>
</a>
These are both valid according to HTML5. However, please do notice older versions of HTML did not consider non-inline elements as valid child elements of an anchor tag.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:
https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element
A while back if I built an html 4 page I would use div, span h1,h2,h3, strong, p and then style my css accordingly.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 why are these tags here?
Now I want to use HTML 5 and I am very confused because after doing some research I see that there is allot of conflicting information.
So to start with these tags below and lets say my design is very image heavy
<section><nav><article><aside><header><footer><main>
in the old days I would write my html like this below
<div> <!-- large background image design -->
<div><!-- large background title left --><h1>hello world</h1> <!-- large background image --><div>
<div><!-- large background title right --><div>
<img src="" alt="" />
<h3>image description</h3><div><!--little image--></div>
</div>
Is it correct to write the code like this now ( swapping out the outer div for a section )
<section> <!-- large background image design -->
<header>
<div><!-- large background title left --><h1>hello world</h1> <!-- large background image --><div>
<div><!-- large background title right --><div>
</header>
<img src="" alt="" />
<footer>image description<footer><div><!--little image--></footer>
</section>
How do you know what tags should be used?
Does it matter if I only use divs as before?
Do the new tags really add any value?
Are you able to point me in the direction of easy to understand examples and explantations?
Why should I use these new tags do they really add any value?
List item
I see amazon.com is still HTML 4
w3schools who claim to be html5 don't have any <footer> or <nav> or <section> tags -> they have divs?
OR: Am I reading to much into this and just do what I think is correct and use the html5 elements that are available for what I am building? and validate it against the http://validator.w3.org/ The HTML5 part even though it says experimental
Thanks for the advice
Many of the new tags are to provide semantic and structural meaning to your document, even if you're not using them directly for styling. This improves machine-readability of your document. Semantic markup allows software to more effectively identify and classify portions of your document.
For example, you can use a list <ul><li>...</li></ul> or a bunch of DIVs to accomplish the same task, but a list has semantic meaning - a grouping of items, whereas a bunch of DIVs do not.
There's noting wrong with wrapping your menu in <nav>, even if it's all DIVs or UL/LI inside. NAV just identifies that section of the page as a navigation element, the same with HEADER, FOOTER etc. In fact, many of these tags come from a typographical background - the terms used in describing elements of pages in magazines and newspapers.
1.How do you know what tags should be used?
identify the header of your page or the header of a section and use - header tag
which part represents the footer of your page or the footer of a section ? - use footer tag to mark it up
instead of using <div id="main">, you can now use <main> tag to mark up main content
identify less relevant content from the relevant content, and figuratively speaking place it aside by using aside element
and so forth
4.Are you able to point me in the direction of easy to understand examples and explantations?
watch HTML5 free video demonstrations on w3-video.com
According to HTML5Doctor.com and other HTML5 introductory sites, the header element should contain a h1-h6 tag plus other navigational or introductory content. However, the traditional 'header' on most websites consists of just a logo and some navigational elements.
A lot of major sites including Facebook and Twitter use a h1 tag for their logo, which seems illogical to me, since the logo is not the most important or most informative element on the page.
A h1 tag appears in the content section of 95% of websites, not the header section. So why are we instructed to include a h tag in the header? If we must, why don't Facebook and Twitter use a h6 tag instead?
You should take a look at the outline algorithm for HTML5.
You probably want your site title/logo to be a h1.
Imagine a small webpage, consisting of a page header (logo, site name, …), a site navigation and a blog entry (main content of this page):
<body>
<!-- not using sectioning elements, for the sake of the example -->
<header>ACME Inc.</header>
<div class="navigation">
<ul>…</ul>
</div>
<div class="content">
<h1>Lorem Ipsum</h1>
<p>…</p>
</div>
</body>
Here the only heading is the h1 inside the div. Semantically this would mean, that all content of this page is in the scope of this heading. See the outline of this page:
Lorem Ipsum
But this would not be true (in the semantic way): hierarchically, the page header "ACME Inc." is not "part" of the blog entry. Same goes for the navigation; it's a site navigation, not navigation for "Lorem Ipsum".
So the site header and the site navigation need a heading. Let's try to give them a h1, too:
<body>
<!-- not using sectioning elements, for the sake of the example -->
<header>
<h1>ACME Inc.</h1>
</header>
<div class="navigation">
<h1>Site navigation</h1>
<ul>…</ul>
</div>
<div class="content">
<h1>Lorem Ipsum</h1>
<p>…</p>
</div>
</body>
Way better! The page outline now looks like:
ACME Inc.
Site navigation
Lorem Ipsum
But it's still not perfect: they are all on the same level, but "ACME Inc." is what makes all the webpages to form a website, it's the whole point why there are webpages at all. The navigation and the blog entry are parts of "ACME Inc.", which represents the company and the website itself.
So we should go and change the navigation and blog entry headings from h1 to h2:
<body>
<!-- not using sectioning elements, for the sake of the example -->
<header>
<h1>ACME Inc.</h1>
</header>
<div class="navigation">
<h2>Site navigation</h2>
<ul>…</ul>
</div>
<div class="content">
<h2>Lorem Ipsum</h2
<p>…</p>
</div>
</body>
Now we have this outline:
ACME Inc.
Site navigation
Lorem Ipsum
And this is exactly what the content of the example webpage means.
(By the way, this would work in HTML 4.01, too.)
As explained in the link, HTML5 gives us sectioning elements, which play an important role for the outline (instead of div, which doesn't influence the outline) We should use them:
<body>
<header>
<h1>ACME Inc.</h1>
</header>
<nav>
<h2>Site navigation</h2>
<ul>…</ul>
</nav>
<article>
<h2>Lorem Ipsum</h2
<p>…</p>
</article>
</body>
The outline stays the same. We could even change the h2 (inside of the nav and the article) back to h1, the outline would stay the same, too.
If you don't want an "explicit" heading for the navigation, you are free to remove it: the outline stays the same (now with an implicit/"unnamed" heading for the nav). Each section has a heading, whether you add it or not.
You could even change the h1 inside the header to h6 and it wouldn't change the outline. You can think of this heading as the "heading of the body".
Additional notes
The header element is not needed in these examples. I only added it because you mentioned it in your question.
If you want to use a logo instead of a textual name ("ACME Inc."), you should still use a h1 and add the img as a child. The value of the alt attribute should give the name then.
The top level heading doesn't have to be "the most important or most informative element on the page". This is not what headings are used for. They give the structure/outline and "label" their scoped content. In this example, you could assume that the article (with its heading inside) is the most important content.
If you use the sectioning elements everytime whend needed, you don't need h2…h6 anymore (but you are free to use them, for clarity or backwards compatibility).
You can play around and test some markup constructs with the HTML Outliner: http://gsnedders.html5.org/outliner/ (it had some unfixed bugs) the HTML5 Outliner.
Don't get confused by "should" contain and "must" contain. You aren't required to have anything inside the header you don't want but the 'semantic' purpose of the header is that is where you should look for and place such things, at the head of a document. Just as you would look for the title or introduction or table of contents at the top of a printed page.
This is a flexible but important concept for SEO and basic HTML programming. While there is some room for wiggling through this standard, it will not make or break your site.
For example, you mention Facebook has the logo instead of an H1 in their header. This is half true as they have their header within a pair of h1 tags, making it function essentially the same as any other H1 text might:
<h1><i class="fb_logo img sp_-NykExE5Q03 sx_a7f409"><u>Facebook logo</u></i></h1>
Again, not exactly ideal, but they are Facebook and can do what they want. You on the other hand might want to be more mindful of these best practices when building out a site.
Please take a look at this example -
I know I'm using the footer/nav correctly but the <side> and <section> is kinda confusing.
The <figure> will be just one huge logo. Beside that will be the main content. Would <aside> be proper use? Its not side content like a sidebar so thats why i'm asking.
Also the <section> would be columns for the content, would that be right?
HTML first of all gives meaning to content. The <aside> element is for "sort of but not really related content." You shouldn't put your main content in it. A <div> or <article> element should do fine. Position it on the side using CSS.
<aside> - content that is considered separate from the main content of the page
You could put the main content inside an <article> element.
<figure> - for diagrams, illustrations, photos, and code examples
Since a logo is not a stand-alone unit, I wouldn't use the FIGURE element. Consider just setting that image as a page background or something - it's just one image, so there is no need for much markup here.
<article> - could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content
Source: http://html5doctor.com/the-article-element/