HTML Syntax
First of all, we should learn the syntax of HTML before understanding what to put within an HTML file. As mentioned before, syntax is just like the grammar of a language. In a language, we have verbs, noun, etc, to identify the nature of a word, and we have conjunctions or phrases to connect the words to complete the contextual meaning of a sentence.
In HTML or other programming langauges, the syntax is much more simpler and explicit. Since computer is not human, it cannot understand some ambiguous or implicit meanings. Therefore, there are many keywords, or specially arranged symbols, for the computer to process with.
Hyper Text Markup Language (HTML) is defined by W3C. W3C defines what kinds of elements are available in HTML, how they behave and when developers should use.
Before we start, let's put the following code into your "index.html":
HTML Elements and Tag Names
How should we interpret this code? HTML actually consists of elements, and each element is set up using
angled brackets. A pair of brackets labels a tag.
Some elements are self-enclosed, where there is no content within it; and others are enclosed with content, using
a start and end paired-tags. We would define the type of element within the tag using a tag name.
For example, meta is the tag name of the element in Line 4.
Paired tags are used in those elements which can contain contents. The start and end tag should have the same tag name
to refer the position of enclosed content, but the end tag should have a reversed slash symbol before the tag name. eg. <style></style>
In Example 1, <title> is a paired-tag element with content "My webpage".
Non-paired / Single tag are those elements that need one tag only with the backslash just before the close angled bracket of the tag. eg. <img />
In Example 1, <meta> is a single-tag element.
Attributes
Most elements can have attributes to define some specific properties on that particuplar element. Just like we buy a table in a furniture store, a table would have it's properties like width, height or country of origin; while a laptop sold in an appliance store would have resolution, wifi compatibility or touch compatibility labelled. Similarly, each type of elements have their specific attributes, and what types of attributes are allowed are defined by W3C.
Attributes can be set up within the first angled brackets of the element. Most of the attributes would have a value,
but some W3C defined attributes don't require a value which will be discussed later.
In Example 1, <meta charset="utf-8" />
specifies a meta element with attribute charset of value utf-8.
We can have customized attributes where we can assign some non-defined attributes with their according values onto that element, and these attributes are known as data attributes. The attribute name must be prefixed with "data-", so data-taste="bad" would specify a customized data attribute taste with value bad.
To sum up, we can write an element like this:
Single-tag elements:
<tagName attribute="value" />
Paired-tag elements:
<tagName attribute="value">Content</tagName>
HTML Hierarchy
An HTML document must include one <html> element. It should include 2 elements: <head> and <body>.
<head>:
head includes some header information, which defines some background information of a webpage.
The information would be useful for the browser or search engine to understand the webpage.
Stylesheets would also be included here for the visual properties of all the core elements in the <body>.
This would be covered later in this chapter.
<body>:
body includes the core content and structure of the webpage. All of the displayed information would go here.
Scripts would also be included here for interactions like actions of clicking a button. This will be discussed in later chapters.
In Example 1 Line 1, <!DOCTYPE html> this special element is always here in the .html document of every modern webpages. This is just like a notation to specify the document is in line with the latest HTML5 standard (HTML standards have been evolved for years).
Since HTML elements are structured in a hierarchy, we often refer this as a DOM (Document Object Model) Tree.
Elements can have content where it may include textual content or another element.
When Element A is included in Element B, we can say Element A is a child element of Element B, and inversely,
Element B is a parent element of Element A.
We'll cover the hiararchy concept in more technical terms in later chapters.
Intro to <head>
The following will introduce some useful elements that can be put into the <head> element of a webpage.
<title>
Title element contains the title name of your webpage. In Example 1
<title>My Webpage</title>,
the content is "My Webpage". This title will be displayed on the browser tab, or being displayed as the title of search results in search engines.
The title should be concise and expressive, so it should be short and distinctive, and
avoid including symbols like ~, *, %, etc.
<meta>
Meta elements are more complicated and can be used in a variety of scenarios. You may go to MDN for details. Here I'll introduce 3 common meta tags that we may always use:
-
<meta charset="utf-8" />
This specifies the character set of the HTML document. We usually specify for "utf-8", so we could safely include characters other than English or numbers, like Emoji characters or East-Asian characters. -
<meta name="keywords" content="Web Developers, HTML, CSS, JavaScript" />
This would allow search engines like Bing or Google to reach and search on your webpage using the listed keywords in the content attributes. The list of values should be comma seperated. -
<meta name="description" content="Go through 15 chapters in learning latest web development, gaining basic skills in HTML, CSS and JavaScript." />
This is also used by search engines for listing your webpage on the search results with the description retrieved from what you have stated in the content attribute. This can let search engine users understand what your website is about.
Different social media and search engine may need to extract webpages in different ways. You may need to prepare well so that your webpage can be refered from other websites in the desired way, like having a correctly-sized thumbnail. For example, Facebook Open Graph Markup defines some meta tags that you may need to follow if you want Facebook to find your website well and display a decent image when it is being shared.
<link>
Link elements are used to connect the webpage with external resources (outside files), except scripts. Let's take a look on 2 common link elements that we may always use:
-
<link rel="icon" href="/favicon.png" type="image/png" />
When "icon" is specified in the rel value, this represents locating the image file for the webpage icon. The webpage icon is the icon which will be displayed on the broswer tab.
The location can be specified in the href attribute. You should write down the URI of your image file. This example is a root path starting with "/", which is the location in the starting folder. -
<link rel="stylesheet" href="/stylesheet.css" type="text/css" />
When "style" is specified in the rel value, this represents putting the CSS stylesheet file URI in the href attribute. As mentioned in Chapter 1, CSS file would also be a plain text file, but it's used to specify the visual design of a webpage.