Beginning HTML & CSS 2

Notes from “Pages Web avec HTML5 et feuilles de style CSS 3 : S’initier


A basic webpage

A basic webpage consists of a couple of different groupings of tags such as,

  • <html></html>
  • <head></head>
  • <body></body>

These tags lay out the basic webpage. You will notice there is a starting tag and an ending tag which is defined by the use of a / in frount of the tag name inside the braces. Eg; </tag_name>.

<html>
	<head>
		<meta charset="utf-8">
		<title>HTML & CSS</title>
		<link rel="stylesheet" href="assets/css/reset.css">
		<link rel="stylesheet" href="assets/css/style.css">
	</head>
	<body>
		<h1>HTML & CSS</h1>
		<p>This is a basic webpage.</p>
	</body>
</html>

If you look at the basic HTML page above though you will also notice that the tags are nested. The header (<head> </head>) tags are inside the HTML page(<html></html>) tags and so are the body tags. This is because the header and body are within the HTML page. If you want to put something in the header such as a title you just enclose the title (<title></title>) tags within the header tags as above.

Different tags

There are many different tags that can be used in an HTML page. Two of them are,

TagUse
<div></div>A division used for formatting purposes. For instance there might be a div that encapsulates a part of the document such as the footer and applies CSS specifically to there. Div is a block level element and will start on a new line.
<span></span>Also used for formatting purposes but where a division might be used to encapsulate a footer, a span could be used on a line in a paragraph. Span is an inline element and will not start a new line.
<p></p>The tags that go around a paragraph. <p> tags are part of a group known as semantic tags, in this case because <p> stands for paragraph. In contrast a <div> tag can surround anything.

Both div and span will usually be seen with a reference to a class or ID for formatting purposes. This might look like,

<div class="blocktype1"><p>This is the <span id="special_links">footer</span></p></div>

The important thing to remember is that ID is unique. Each page can only have one ID and each page can have only one element with that ID. A class is not unique.

It is a good idea to be careful when choosing the names of classes and ID’s. Calling a class blue_block might work but what if you change the colour to black?

There are many different tags that can be used in HTML. A list of them can be found here. Note that HTML5 does not support all the tags as some have been depreciated.

Comments

There are two types of comments used in HTML and CSS. Comments are pieces of explanatory text which don’t get read when displaying the page often with things like /*this is the CSS for navigation*/ in them.

FormatDescription
<!– comment –>HTML comment
/* comment */CSS comment

Comments are very useful, not just to the person writing the page but to the people who come after and have to try and figure out what the previous people have done.

Titles

There are a series of special block level tags for titles in HTML. They should be used in order as search engines can read them to try and decipher the content of the page. For instance the title of this page is an H1 and the subheadings such as the one at the beginning of this paragraph are H2. If I was to add a new subheading to this one I would use an H3. This adds structure to a document.

This is an H2 title

This is an H3 title

This is an H4 title

The are also <h5> and <h6>. Each title should be used only where semantically correct and not as a shortcut to format text.

Bold text

There are two ways of bolding text in HTML. The first is with the use of <b></b> tags around it and the second with the use of <strong></strong> tags around the text. The difference between them is semantic. Bold tags merely bold the word whereas strong tags are usually presented as bold by a browser but actually mean this word is more important. Both are in-line methods.

Italic text

As with bold text there are two methods that are presented by a browser as italic text. The first is the use of the <i></i> tags to enclose a words and the second the use of <em></em> tags. Like bold, although these tags are both presented the same there is a difference in their meanings. <i></i> will tell the browser to output italicised text but <em></em> will also say to emphasise the text.

Page Structure

For a long time pages were structured only with the use of <div> blocks declaring which parts were which but with HTML5 certain blocks have been formalised to give a page a more semantic meaning. These new elements are,

TagUse
<header></header>Defines the header
<nav></nav>Defines the navigation links
<main></main>Specifies the main content of a document
<article></article>Defines and article
<section></section>Defines a section in a document
<aside></aside>Defines an aside
<footer></footer>Defines the footer

Each can be used to further specify the content of a document to make it more readable to both search engines and humans. If we take the simple code for a web page a simple document might now be.

<html>
	<head>
		<meta charset="utf-8">
		<title>HTML & CSS</title>
		<link rel="stylesheet" href="assets/css/reset.css">
		<link rel="stylesheet" href="assets/css/style.css">
	</head>
	<body>
		<header>
		<h1>Page Header</h1>
		</header>
		  <main>
		         <section>
				<article>
					<h2>HTML & CSS</h2>
					<p>This is a basic article.</p>
				</article>
				<article>
					<h2>Second article</h2>
					<p>This is also basic article.</p>
				</article>
			</section>
			<aside>
			<p>Aside to be filled later</p>
			</aside>
		</main>
	</body>
</html>

Header should not be confused with the head tag. They are two different things.

Leave a comment