1 – HTML – Basic setup and structure

HTML markup

Writing HTML markup requires an understanding of how to define an HTML element using tags and attributes as well as the concept of nesting.

HTML Tags

Tags are used to define the start and end of an element.

Open and closed < > angle brackets are used to enclose the tag name.

<tagname>

Optionally, attributes can be placed after the tag name. More than one attribute may be added by placing a space between each attribute.

<tagname attribute="value" attribute="value">

This tag is known as an opening tag. At the end of an element is placed a closing tag which adds / before the closing tag name.

<tagname>content</tagname>

Examples of HTML elements:

<h1>This is a H1 headline</h1>
<p>This is a paragraph of text</p>

Void elements

A few HTML elements don’t require closing tags, these are called void elements and instead can be written only with the <tagname> or by using <tagname /> (space, forward slash after the tag name).

Examples of void elements:

<hr> or <hr /> this creates a horizontal rule.
<br> or <br /> this adds a single line break in a paragraph.

Nesting

Every HTML document contains nested elements.

Nesting places one HTML element inside another. The outer element will always have an influence on the inner element and therefore it’s important to understand this concept when writing HTML.

For example, if we have three HTML boxes nested inside each other and we change the color of the outer box to red, it will change the color of the two inner boxes also to red. If we then change the most inner box to blue, only this box will change color leaving the two outer boxes red.

It is important to make sure each element is nested correctly and to remember to close tags in the reverse order of opening them.

Setting up an HTML document

HTML 5 (Hypertext Markup Language) requires the following code as a basic foundation to which all other elements are added.

<!DOCTYPE html>
<html>
<head>
<!– This is the head area –>
</head>
<body>
<!– This is body area –>
</body>
</html>

Document Type (DOCTYPE)

<!DOCTYPE html>

<!DOCTYPE html> tells the web browser to render the file as an HTML 5 document and should be placed at the begining of the document.

<!DOCTYPE html> defines the type of HTML language being used – HTML5 standards mode. HTML code prior to Oct 2014, uses different declarations.

HTML

<html>

</html>

The <html> tag defines where the HTML code is placed in the document. The HTML is placed between the opening <html> and closing </html> tags.

Head

<head>

<!-- The head includes the title, links, scripts and more -->

</head>

The <head> is a container for the information that is included in the HTML document such as title, scripts, meta information. The <head> container is always positioned at the top of the <body> container, just like the head of a person is always positioned on top of their body.

Body

<body>

 <p>This a paragraph of text</p>

</body>

The <body> is where all content is placed that is to be displayed in the web browser. The head is always attached below the body.

What’s in the <head>?

Next, let’s start looking at what type of information that can be placed inside the <head> of an HTML document.

<!DOCTYPE html>
<html>
<head>
<base href=”http://www.points-pixels.com”>
<meta charset=”utf-8″>
<title>This is the title of the page</title>
<link rel=”stylesheet” href=”styles.css”>
<script src=”script.js”></script>
</head>
<body>
<!– This were the content goes –>
</body>
</html>

Titles

<title>This is the title of the page</title>

The <title> tag defines the title of the HTML document in the web browser. It is also used as the title of the page in the search result (Google, etc) and is the title of any bookmarked page.

The <title>tag is required in all HTML files.

Style

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
p {color:gray;}
</style>
</head>
<body>
<h1> This headline will be red </h1>
<p> This text will be gray </p>
</html>
</body>

The <style> tag is used to identify styling information for the elements found in the <body>. The style elements are usually placed in an external style sheet CSS (Cascading Style Sheets) and linked to the HTML document using a <link> in the <head> tag.

Links

<link rel="stylesheet" type="text/css" href="styles.css">

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"

>

The <link> tag is used to link an external document or resource. The link tag is commonly used to link external style sheets and web fonts.

Scripts

<script src="script.js"></script>

<noscript>Your browser does not support JavaScript!</noscript>

The <script> tag is used define a client-side script (JavaScript). The script can be an external link (as shown) or included in between the script tags. <noscript> tag is used to define alternative content for users who have disabled scripts from running in their web browser.

Scripts can also be used in the <body> of a document.

Base

<!DOCTYPE html>
<head>

 <base href="http://www.points-pixels.com/images/">

</head>

<body>
<img src="image.jpg" alt="an image from the images folder">
</body>

The <base> tag defines the base URL/target in the HTML document for all relative URLs, such as which folder stores all the images.

Only one <base> element is allowed per document.

<head>

HTML5 does not require the <head> tag . In HTML 5, the information for the header can be placed directly after the <html> tag and before the <body> tag.

!DOCTYPE html
<html>
<title>This is the title of the page</title>

<body>

</body>
</html>

Saving HTML files

HTML files can be saved with the .html or .htm file extensions.

index.html is the most common name for the landing page (homepage) as most servers will look for the default file called index.html or index.htm first. Servers can be configured to use different default names if needed.

Next step
HTML – 2 – Text Elements