An Introduction to HTML

1. Introduction

HTML stands for Hypertext Markup Language.
It is the main language used to build the structure of websites and applications.
The latest version is HTML5.
Is written using tags defined by the following brackets < >
The following tags are always used and form the fundamental structure of your page:

```
<!DOCTYPE html>
```
Tells the browser what to expect, although browsers will render your code correctly without it you should always include it to pass validation.
```
<html lang="en"> </html>
```
Opening and closing tags. All of our HTML code is contained inside of these. We are also using an attribute to define the language used as English.
```
<head> </head>
```
Will always be our next set of tags, inside of here we set various meta data.
```
<title> </title>
```
Found inside the head, we enter any text we want to display in the browsers tab name.
```
<meta charset="utf-8">
```
Found inside the head, we tell the browser what type of character encoding is used with the 'charset' attribute.
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
Found inside the head, this line is Required. if we want to make our website responsive to different sized devices.
```
<body> </body>
```
Inside of these tags is where we build the content displayed in the browser.
```

```
Bonus: If we want to comment our code we use this (notice how it's different to a JavaScript comment).

Code Combined:

				<!DOCTYPE html>
				<html lang="en">
					<head>
						<title>My First Website</title>
						<meta charset="utf-8">
						<meta name="viewport" content="width=device-width, initial-scale=1">
					</head>
					<body>
						<!-- This is a comment -->
					</body>
				</html>

2. Headings and Paragraphs

Headings range from h1 to h6, consider them similar to heading styles in Word. You're unlikely to ever use all of them, which is why I have only listed 3 of them below.
```
<h1> </h1>
```
Primary heading - Each page should only ever use one of these.
```
<h2> </h2>
```
Secondary headings.
```
<h3> </h3>
```
Tertiary headings.
```
<p> </p>
```
We define each paragraph using these tags.

3. Images

```
<img>
```
The image tag.
```
<img src="FileLocation/FileName">
```
To display an image we need to add the 'src' attribute which points to the images location. Required.
```
<img src="FileLocation/FileName" alt="ImageDescription" >
```
We must add the 'alt' attribute with a description of the image. This is used by screen readers to describe an image to the visually impaired. It is also Required. to pass validation. Required.

4. Containers

There are a number of tags which we use to structure sections of our code into blocks. Ultimately it makes such little difference it doesn't really matter but that's not the point.
```
<div> </div>
```
The standard tag used to group our code, these are recommended for when you are grouping something purely to style it.
```
<section> </section>
```
Introduced in HTML5, these should be used to group our websites structure into general sections.
```
<article> </article>
```
Introduced in HTML5, these should be used for more specific groupings within sections.

5. Lists

```
<ul> </ul>
```
Unordered list - A typical bullet pointed list.
```
<ol> </ol>
```
Order list - These are numbered.
```
<li> </li>
```
List item tags go inside our ul and li tags.

6. Links

```
<a> </a>
```
If we want to add a link to another page we use this tag.
```
<a href="fileLocation/FileName"> </a>
```
The 'href' attribute points to the files location. Required.
```
<a href="fileLocation/FileName" target="_blank"> </a>
```
By adding the 'target' attribute with the '_blank' value the link will open the page in a new tab instead of the current tab. Optional

7. Building our first webpage

This code uses everything which has been covered in the previous sections to build a simple webpage.

To see what the code outputs click this link, or build the website yourself!

				<!DOCTYPE html>
				<html lang="en">
					<head>
						<title>My First Website</title>
						<meta charset="utf-8">
						<meta name="viewport" content="width=device-width, initial-scale=1">
					</head>
					<body>
						<!-- This is a comment -->

						<h1>HTML Demo</h1>
						<section>
							<h2>Section Heading</h2>
							<p>This section contains two articles</p>
							<article>
								<h3>Article Heading</h3>
								<p>Paragraph... Maecenas nec velit eu mi sodales euismod. Sed aliquet in lectus sodales faucibus. Nullam orci orci, congue vel tempor eu, posuere nec sapien. Mauris eleifend dolor vel pretium commodo. Morbi ullamcorper a eros ut egestas. Quisque aliquet quis sapien vulputate elementum. In efficitur turpis ipsum, at varius nisl euismod sed.</p>
							</article>

							<article>
								<h3>Article Heading</h3>
								<p>Paragraph... Pellentesque quis justo ac mauris rutrum blandit. Ut risus lectus, placerat eget nulla ac, placerat semper leo. Curabitur tempor dui in nunc volutpat sollicitudin. Vestibulum vel erat euismod tellus rutrum dapibus nec vel metus.
							</article>
						</section>

						<section>
							<h2>Fruit & Veg</h2>
							<article>
								<h3>Fruit</h3>
								<ul>
									<li>Apple</li>
									<li>Orange</li>
									<li>Pear</li>
								</ul>
							</article>

							<article>
								<h3>Veg</h3>
								<ol>
									<li>Potato</li>
									<li>Carrot</li>
									<li>Peas</li>
								</ol>
							</article>
						</section>

						<p><a href="http:daniel-ellis.co.uk" target="_blank">Click this link to view my website</a></p>
						<img src="cat.jpg" alt="A cute ginger cat laid on its back in a basket">
					</body>
				</html>

Learning

An Introduction to HTML

1. Introduction

Code Combined:

2. Headings and Paragraphs

3. Images

4. Containers

5. Lists

6. Links

7. Building our first webpage

← Back to Home

Next Lesson: Extended HTML →