Return to Answer

replaced http://softwarerecs.stackexchange.com/ with https://softwarerecs.stackexchange.com/

Source Link

edited Apr 13, 2017 at 12:50

Community Bot

edited Apr 13, 2017 at 12:50

Community Bot

You are missing a DOCTYPE. As you seem to use HTML5, it should be:
```
 <!DOCTYPE html>
```

It comes before the opening html tag.

The title element is a required element. It belongs in the head:

 <head>
 <title>The title of the web page</title>
 </head>

It’s often a good idea to specify the character encoding. It should be the first element of head (I‘m assuming UTF-8):
```
 <head>
 <meta charset="utf-8" />
 <title>The title of the web page</title>
 </head>
```
Ideally you would not use the style attribute. So use
```
 <body>
```

instead of

 <body style="background-color: sandybrown">

and add to your CSS:

 body {background-color: sandybrown;}

Don’t use section just because you need an element for styling purposes. The section element is a sectioning content element, so it creates a new entry in the document outline.

If you need an element just for styling purposes (and not because it’s semantically warranted), use div.

So your header should probably look like this:

 <header id="mainHeader">
 <img id="pascalPicture" src="pascal-cropped.jpg" alt="Picture of Pascal">
 <div id="headerTextBox">
 <div id="headerText">
 This is a header!
 </div>
 </div>
 </header>

You should use headings (h1-h6). They (together with the sectioning content elements) create the document outline, i.e., a hierarchy of your page’s content, like a table of contents.

(Depending on your heading structure, the #mainBody should likely not be a section but a div.)

To check your outline, have a look at the question Tool that displays outline of HTML5 documents Tool that displays outline of HTML5 documents.

Instead of using id to get hooks for your CSS, you might want to consider to use class instead. It has the benefit that a class can be used on more than just one element per document. And it has lower specificity for CSS.

As a rule of thumb: A good reason for using id is if you want to create anchors which let users jump to the element with that ID.

You are missing a DOCTYPE. As you seem to use HTML5, it should be:
```
 <!DOCTYPE html>
```

It comes before the opening html tag.

The title element is a required element. It belongs in the head:

 <head>
 <title>The title of the web page</title>
 </head>

It’s often a good idea to specify the character encoding. It should be the first element of head (I‘m assuming UTF-8):
```
 <head>
 <meta charset="utf-8" />
 <title>The title of the web page</title>
 </head>
```
Ideally you would not use the style attribute. So use
```
 <body>
```

instead of

 <body style="background-color: sandybrown">

and add to your CSS:

 body {background-color: sandybrown;}

Don’t use section just because you need an element for styling purposes. The section element is a sectioning content element, so it creates a new entry in the document outline.

If you need an element just for styling purposes (and not because it’s semantically warranted), use div.

So your header should probably look like this:

 <header id="mainHeader">
 <img id="pascalPicture" src="pascal-cropped.jpg" alt="Picture of Pascal">
 <div id="headerTextBox">
 <div id="headerText">
 This is a header!
 </div>
 </div>
 </header>

You should use headings (h1-h6). They (together with the sectioning content elements) create the document outline, i.e., a hierarchy of your page’s content, like a table of contents.

(Depending on your heading structure, the #mainBody should likely not be a section but a div.)

To check your outline, have a look at the question Tool that displays outline of HTML5 documents.

Instead of using id to get hooks for your CSS, you might want to consider to use class instead. It has the benefit that a class can be used on more than just one element per document. And it has lower specificity for CSS.

As a rule of thumb: A good reason for using id is if you want to create anchors which let users jump to the element with that ID.

You are missing a DOCTYPE. As you seem to use HTML5, it should be:
```
 <!DOCTYPE html>
```

It comes before the opening html tag.

The title element is a required element. It belongs in the head:

 <head>
 <title>The title of the web page</title>
 </head>

It’s often a good idea to specify the character encoding. It should be the first element of head (I‘m assuming UTF-8):
```
 <head>
 <meta charset="utf-8" />
 <title>The title of the web page</title>
 </head>
```
Ideally you would not use the style attribute. So use
```
 <body>
```

instead of

 <body style="background-color: sandybrown">

and add to your CSS:

 body {background-color: sandybrown;}

Don’t use section just because you need an element for styling purposes. The section element is a sectioning content element, so it creates a new entry in the document outline.

If you need an element just for styling purposes (and not because it’s semantically warranted), use div.

So your header should probably look like this:

 <header id="mainHeader">
 <img id="pascalPicture" src="pascal-cropped.jpg" alt="Picture of Pascal">
 <div id="headerTextBox">
 <div id="headerText">
 This is a header!
 </div>
 </div>
 </header>

You should use headings (h1-h6). They (together with the sectioning content elements) create the document outline, i.e., a hierarchy of your page’s content, like a table of contents.

(Depending on your heading structure, the #mainBody should likely not be a section but a div.)

To check your outline, have a look at the question Tool that displays outline of HTML5 documents.

Instead of using id to get hooks for your CSS, you might want to consider to use class instead. It has the benefit that a class can be used on more than just one element per document. And it has lower specificity for CSS.

As a rule of thumb: A good reason for using id is if you want to create anchors which let users jump to the element with that ID.

Source Link

answered Nov 29, 2015 at 15:54

unor

answered Nov 29, 2015 at 15:54

unor

2.7k
15
24

You are missing a DOCTYPE. As you seem to use HTML5, it should be:
```
 <!DOCTYPE html>
```

It comes before the opening html tag.

The title element is a required element. It belongs in the head:

 <head>
 <title>The title of the web page</title>
 </head>

It’s often a good idea to specify the character encoding. It should be the first element of head (I‘m assuming UTF-8):
```
 <head>
 <meta charset="utf-8" />
 <title>The title of the web page</title>
 </head>
```
Ideally you would not use the style attribute. So use
```
 <body>
```

instead of

 <body style="background-color: sandybrown">

and add to your CSS:

 body {background-color: sandybrown;}

Don’t use section just because you need an element for styling purposes. The section element is a sectioning content element, so it creates a new entry in the document outline.

If you need an element just for styling purposes (and not because it’s semantically warranted), use div.

So your header should probably look like this:

 <header id="mainHeader">
 <img id="pascalPicture" src="pascal-cropped.jpg" alt="Picture of Pascal">
 <div id="headerTextBox">
 <div id="headerText">
 This is a header!
 </div>
 </div>
 </header>

You should use headings (h1-h6). They (together with the sectioning content elements) create the document outline, i.e., a hierarchy of your page’s content, like a table of contents.

(Depending on your heading structure, the #mainBody should likely not be a section but a div.)

To check your outline, have a look at the question Tool that displays outline of HTML5 documents.

Instead of using id to get hooks for your CSS, you might want to consider to use class instead. It has the benefit that a class can be used on more than just one element per document. And it has lower specificity for CSS.

As a rule of thumb: A good reason for using id is if you want to create anchors which let users jump to the element with that ID.

lang-css