Introduction to HTML
HTML is a mark-up language with ‘tags’ or 'elements' identifying parts of the document to behave in a certain way, for example, to act as a link or to make the text bold. Tags generally consist of an opening and closing pair. They are written in lower case using angled brackets ie <html>.
Our first HTML tag (or element) will open and close the entire document.
Inside of the <html> element go all the other HTML elements required to create our page. A HTML document consists of a <head> and <body>. The <head> is the brains of the web page and where information about the web page is stored. The<body> is where the visual content of the page is placed, so where all your text and fabulous images will be found. So unless otherwise stated, the bulk of HTML elements are placed inside the <body> tag.
HTML has a strict hierarchy that dictates which tags can be placed inside of which in a parent/child relationship. As such the <html> element is the parent of all the other elements in HTML.
Tip: It may help you to indent tags as in the above example. White spacing is ignored by the web browser so feel free to use as much as you like to make your documents more readable. If you are using Visual Studio Code an extension such as Prettier will help with this.
Attributes
Each HTML element has a list of prescribed attributes that can be set. These are placed inside the opening angle brackets. The vast majority of attributes consists of a property and value and are placed in quotes.
The <html> tag has a lang attribute that we can assign a value of en to indicate the document is written in English.
Page Title
To add a page title – that is seen at the top of the browser window we use the <title> tag and this is a child of the <head> tag so is used as follows:
It is important that you add the title because:
- Users can read it.
- It will appear in a browser's tab.
- It is the default name used when users bookmark your page.
- It will help the user identify the page when using the Back button.
- It is one of the many things referenced by search engines to find your page.
You may consider using a naming convention that will give your users a sense of where they are within your site by using a separating character such as the ‘pipe’ ie Sheffield Winter Gardens | News | New Stall to Open.
Parent/Child Relationships and Well Formed HTML
The <head> and <title> are a good example of a parent and child relationship, in that the <title> is always placed inside of the <head>. Ensuring that your HTML elements are correctly nested is an important part of writing what is known as 'well formed HTML'.
!Doctype
At the very top of the HTML we should also add a doctype declaration of <!DOCTYPE html> (yes that is an explanation mark). Not a HTML as such this code is still important as it prevents the browser falling into 'quirks mode' to support really old browsers.
Meta Tags
Meta data is information that describes information. In HTML<meta> tags are used to set various pieces of information that will be useful to the browser when rendering the HTML page.
The <meta> tags uses the name attribute to indicate what information is been set. Here are three useful <meta> tags to use:
Viewport (<meta name="viewport">)
Controls the layout of the webpage on different devices, especially useful when designing for mobile devices. We will discuss this in the section on 'mobile first' design.
This tag ensures that your webpage scales appropriately on mobile devices by setting the width to the device's screen width and establishing the initial zoom level.
Charset (<meta charset="UTF-8">)
Defines the character encoding for the document.
Using UTF-8 as the character encoding ensures that your webpage can display a wide range of characters, including special symbols and non-Latin characters, without issues.
Description (<meta name="description">)
Provides a brief description of the webpage’s content, which is often used in search engine results.
This meta tag helps improve SEO (Search Engine Optimization) by giving search engines a summary of the page. It’s important for attracting users when they see your page in search results.
Create a Boilerplate HTML File
A full appreciation of all the above is unnecessary to get started. It is recommended, however, that you base your HTML files around this structure. You may therefore want to save a template file with this code in, that you can use as the basis of all your other HTML documents.
Tip: In many code editors, such as Visual Studio Code, there is support for EMMET. With this you can just type ! hit tab and a basic HTML page is created for you.