All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an “information” to the browser about what document type to expect.
In HTML 5, the declaration is simple:
<!DOCTYPE html>Make a new text file and save it as index.html, add the code as we go along in this page. The filename index.html is used to represent the home page of a site for most webservers by default.
The <html> tag represents the root of an HTML document.
The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).
Note: You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
<!DOCTYPE html>
<html lang="en">
</html>The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta information.
The following elements can go inside the <head> element:
- <title> (required in every HTML document)
- <style>
- <link>
- <meta>
- <script>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
</html>The <link> tag defines the relationship between the current document and an external resource.
The <link> tag is most often used to link to external style sheets.
The <link> element is an empty element, it contains attributes only.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
</head>
</html>Here we’ve used a link to add a stylesheet that will control how the page will look. We’ll cover this more in next week’s lessons on CSS. For now just create an empty text file and save it as style.css in the same folder as this index.html file.
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<meta charset="UTF-8">
<meta author="Your name here">
</head>
</html>The <script> tag is used to embed a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<script type="text/javascript" src="/script.js"></script>
<meta charset="UTF-8">
<meta author="Your name here">
</head>
</html>Create a new empty text file in the same folder and save it as script.js. We’ll cover this in the week on Javascript.
The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser’s title bar or in the page’s tab.
The <title> tag is required in HTML documents!
The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.
The <title> element:
- defines a title in the browser toolbar
- provides a title for the page when it is added to favourites
- displays a title for the page in search-engine results
Note: You can NOT have more than one <title> element in an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<script type="text/javascript" src="/script.js"></script>
<meta charset="UTF-8">
<meta author="Your name here">
<title>My first webpage</title>
</head>
</html>The <body> tag defines the document’s body.
The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Note: There can only be one <body> element in an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<script type="text/javascript" src="/script.js"></script>
<meta charset="UTF-8">
<meta author="Your name here">
<title>My first webpage</title>
</head>
<body>
This is my first web page!
</body>
</html>
