[HTML5] Lesson 1: Hello World!
Introduction
What is HTML? HTML is also known as a Hyper Text Markup Language. HTML describes the structure of web pages using markup. The markup language is a system for annotating a document in a way that is syntactically distiguishable from the text. HTML elements are the building blocks of HTML pages. These elements are represented by tags which label pieces of content such as “heading”, “paragraph”, “table”, and so on. The tags or categories are classified by putting <> around the element type.
- <!DOCTYPE html> declaration defines this document to be HTML5
- <html> element is the root element of an HTML page
- <head> element contains meta information about the document
- <title> element specifies a title for the document
- <body> element contains the visible page content
- <h1> element defines a large heading
- <p> element defines a paragraph
HTML Tags
HTML tags are elements names surrounded by angle brackets:
<tagname>content goes here…</tagname>
HTML tags normally come in pairs like <p></p>. The first tag in a pair is the start tag and the second tag is the end tag. The end tag is written like the start tag, but with a forward slash inserted before the tag name.
HTML Page Structure
Below is the basic structure of a HTML page structure:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>Basics
All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>.
Headings
HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading and gets less important until the lesst important heading, <h6>.
-
This is heading 1
-
This is heading 2
-
This is heading 3
-
This is heading 4
-
This is heading 5
-
This is heading 6
Paragraphs, Links, and Images
Just like heading tags, paragraphs, links, and images also have their own corresponding tags.
HTML paragraphs are defined with a <p></p> tag. The paragraph tag will automatically indent the content once the tag is closed.
<p>This is a paragraph</p>
HTML links are defined with the <a></a> tag however, more information is needed to completely label the HTML element. The link’s destination is specified in the href attribute. Attributes are used to provide additional information about HTML elements.
<a href=”http://www.google.com”>This sends to the Google homepage</a>
The link destination is in between the “” of the href.
HTML images are defined with the <img> tag and the corresponding attributes are source file (src), alternative text (alt), width, and height.
<img src=”filename.jpg” alt=”displayname” width=”104” height=”142”>
The source file destination is in the src attribute and is the “pathway” to get to the desired image. The alternative text (alt) displays the text when the image is unable to be loaded on the website. The size attribute (width and height) will determine the dimensions of the image on the website.
Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in between. The HTML element is everything from the start tag to the end tag.
<tagname>Content goes here…<tagname>
We’ve learned the heading, <h1>, and paragraph, <p>, tag. When writing an essay, a line break, or in this case empty element, is written with a <br> tag.
HTML5 doesn’t require empty elements to be closed, but if you want a stricter validation, or you need to make your document readable by XML parsers, you should close all HTML elements.
HTML5 standard doesn’t require lowercase tags, but stricter document types like XHTML require lowercase.
