Beginners Guide To HTML Part 1: The basic structure of a website
Hyper Text Markup Language (HTML): is a computer language used to write code that translates into a website.
I empathize with anyone who thinks that ‘building a website’ sounds like a daunting task. When I first started the sight of (what seemed to be) endless code made my stomach turn, but having taught myself how to write basic code I can assure you it is a lot easier than it looks!
Here is a quick introduction of the basic structure of HTML document.
A HTML document is split into four main sections:
- A line describing the HTML file: explaining what type of HTML is being used to write the document
- HTML Elements: Defined pieces of content throughout HTML e.g. A Title element is wrapped around Titles in the HTML; The Paragraph element is wrapped around generic paragraphs in the HTML.
- A header section that includes key information about the document
- A body section that contains the actual content of the document e.g. text, pictures, and layout of the website.
Here’s an example of all the HTML sections of this webpage.
1. HTML Version Information
So when first open a HTML document you need to write the HTML version information that will tell the browser what type of HTML the site uses.
This is known as a Document Type Declaration (DTD). HTML4 offers three types of DTD that each support different elements:
HTML 4.01 Strict DTD use elements that have not been depreciated i.e. elements that have not been outdated and are still used by the most recent HTML update
Begin this type of HTML file with the DTD:
HTML 4.01 Transitional DTD use elements from the Strict DTD as well as elements that have been depreciated i.e. elements that have been outdated and are no longer used by the most recent HTML update and therefore sometimes do not appear on a browser
Begin this type of HTML file with the DTD:
HTML 4.01 Frameset DTD use all the elements from the transitional DTD as well as frames.
- FYI: Frames allow developers to present more than one HTML document on the same page.
- Note: Frames are not supported in HTML5
Begin this type of HTML file with the DTD:
The more recent HTML5 only offers one DTD that looks like this:
2. The ‘HTML’ Element/
You then have to wrap your document with a ‘HTML’ element after the DTD:
Note: to open an Element you use <> e.g. <’element goes here’> add your content, then to close the element use </> : </’element goes here’>
3. The ‘Head’ Section
The head element contains key information about the document such as the document title, meta descriptions etc. The Head section is opened with <head> and closed with </head>. You can then add information about the Webpage including:
The Document title: wrapped in the <title> </title> Every HTML document must include a Title
Meta Data: This is background information about the document such as a description, the author, etc. that will not be seen on the webpage.
Identify the type of meta using:
then identify the information of that meta with:
This example might clarify what I mean:
Note: Here is a list of all the HTML tags that are available.
So far document should look something like this:
This information in the Head Section will then be used as the default information for website when people find your site on search engines, or share it via social media etc.
4. The Body Section
After the Head section you can add the body of the document which is where you will add the content of the webpage that will be seen in a browser.
Open the body section with:
“The content of the document…”
Then close the body section again with:
Be sure to read my next blog, where I will show you, how to add content to your webpage.
All together the basic structure of a HTML document should look like this:
Reference:
Huynh, D. F., Karger, D. R., & Miller, R. C. (2007, May). Exhibit: lightweight structured data publishing. In Proceedings of the 16th international conference on World Wide Web (pp. 737-746). ACM.
W3.org,. ‘The Global Structure Of An HTML Document’. N.p., 2015. Web. 02 May 2015.