Understanding Hyper Text Markup Language (HTML) syntax and how it is used to structure a webpage is important in learning web development as HTML is the backbone of webpages.
In this article, we would study HTML syntax and structure to make you understand how HTML tags and elements are used to structure web pages and content.
The Meaning of HTML Syntax
HTML syntax refers to the order or arrangement in which HTML elements are written to create organized documents. It is important to know that HTML syntax includes how the HTML elements are spelt. In this article, we would be using HTML5 syntax.
HTML5 is the latest version of HTML and is usually specified at the beginning of the document using the declaration <!DOCTYPE HTML>. Before we get started on examples, note that HTML is a markup language, not a programming language as it isn’t used for logical operations. It is just used for structuring the content of webpages on the internet.
If the proper syntax of writing HTML is not followed, the web page will not display the way it was intended as the HTML elements would not perform proper functions. HTML documents are made up of HTML elements that are specified to define content in web pages.
HTML elements make up any HTML document and as such are very crucial in understanding basic HTML syntax and structure. To understand this better, we would explore some examples below.
HTML SYNTAX EXAMPLES
HTML structure uses HTML syntax in order to display content on a webpage. Below is an example of the HTML syntax to follow in order to display a heading, a paragraph, a hyperlink and an image in a web page.
<!doctype html>
<html>
<head>
<title> My First Webpage </title>
</head>
<body>
<h1> My First Webpage </h1>
<p> My name is Nonso and I just created my first web page </p>
<a href=”https://google.com”> Example </a>
<img src=”https://image.com”>
</body>
</html>
This is the basic structure of HTML documents.
BASIC HTML STRUCTURE
HTML Elements are specified with opening and closing HTML tags and content in between them. HTML tags are enclosed in angle brackets (< >) with the closing tag specified by a slash before the tag name.
A typical HTML element is expressed as:
<tagname> This is the content of the HTML element. </tagname>
Where <tagname> is the opening HTML tag
</tagname> is the closing HTML tag
And the text in between the opening and closing tags is the content of the HTML element.
As noticed in the example above, most HTML elements consist of opening and closing HTML tags. HTML syntax requires that the closing HTML tag must be present to display the content correctly.
However, note that some HTML elements do not require closing tags, they are called empty or self-closing tags. Some examples of empty tags are the <img>, <input>, <br> and <meta> tags. They can also be written as <img/>, <input/>, <br/> and <meta/> to explicitly show it has no end tag.
The Basic HTML structure consists of the doctype declaration <!DOCTYPE>, <html>, <head>, <title> and <body> element. We will discuss the basic HTML elements showing the basic structure of HTML documents.
DOCTYPE Declaration and HTML Element
As mentioned earlier and shown in the example above, the HTML document starts with the doctype declaration followed by the opening html tag (<html>), followed by the HTML elements that make up the page and ended with the closing html tag (</html>).
We can also say that all the HTML elements are nested in the <html> element. There can only be one <html> element in the HTML document.
Nesting
Nesting is the act of using other HTML elements as the content inside a parent element or simply put, nesting is placing one or more HTML elements inside another HTML element. You must be careful while nesting elements, the nested element’s closing tag must be written before the parent element’s closing tag.
Considering the structure example below:
<head>
<title> My First Webpage
</head>
</title>
The structure example above contains incorrect syntax as the closing tag of the <title> element should be written before the closing tag of the <head> element. Using the proper syntax for writing HTML we should have the following.
<head>
<title> My First Webpage
</title>
</head>
HTML documents are made up of two section elements: the head and the body elements denoted by:
<head></head> and <body></body>
Head Element
The <head> element consists of metadata, which refers to the data about the HTML document that is used by the computer to log information about the data or add other functionalities to the HTML document.
A few HTML elements that are nested here include the <title>, <script>, <meta> and <link> elements. There can be only one <head> element in the HTML document.
Title Element
The <title> element is used to log the title of the document so it can be easily indexed for referencing by search engines. This is called Search Engine Optimization or SEO. The title of the HTML document is displayed at the top of the web browser in the title bar. Note that the HTML document can have only one <title> element.
Body Element
The <body> element consists of the HTML elements that make up the webpage. Everything that we see on any web page is HTML elements nested in the <body> element such as headings, paragraphs, hyperlinks, lists, images, etc. Note that there can only be one <body> element in the HTML document.
Heading Elements
The heading elements are used to add headings in the HTML document. There are six levels of heading elements that range from <h1> (the largest when displayed) to <h6> (the smallest when displayed in the web browser). However, note that there can only be one <h1> tag in the document as it is usually used to denote the main heading of the whole webpage.
Paragraph Element
The <p> element is used to add paragraphs to an HTML document. There can be an unlimited number of <p> elements in the document.
Anchor Element
The <a> element is used with the href attribute to add an anchor text that would lead to any other webpage or URL address when clicked. This is known as a hyperlink and content within the <a> element should always specify the link destination.
Image Element
The <img> element as explained earlier is a self-closing tag and as such does not require a closing tag like this </img>. However, to display a picture, we must specify the src (source) attribute. The value in the src attribute is the URL address of the image to be displayed.
HTML STRUCTURE ELEMENTS
HTML structure elements are specific HTML elements that are used to structure HTML documents better. The <body> element is an HTML structure element containing all the webpage content. There are some structure elements created with the advent of HTML5 that specify the position of the HTML elements nested in them.
Main Element
As webpages can contain a lot of repeated HTML code, the <main> element as the name implies is used as a container for the main content of a webpage. The elements nested in the <main> element are the major content of the HTML document.
Article and Section Elements
The <article> element is used to specify independent or stand-alone content while the <section> element is used to define a section on the HTML document for easier navigation through a webpage. For example, <section> element can be used to organize chapters on a webpage and <article> element can be used to specify blog or forum posts on a webpage.
Header and Footer Elements
The <header> element is used to denote content that will be placed at the top or beginning of the webpage or the HTML element it is nested in. Alternately, the <footer> element is used to specify content that will be placed at the bottom of the webpage or the HTML element it is nested in.
Nav Element
The <nav> element is primarily used to navigate between different parts of the webpage. It creates a nav bar at the side of the page for easy navigation. Note that there can be multiple <nav> elements on a web page.
Aside Element
The <aside> element is used to specify part of the HTML document not directly related to the parent element. This element can stand as a sidebar or call out depending on the way of use or context.
HTML STRUCTURE TAGS
HTML structure tags refer to the HTML tags of HTML elements that denote the basic structure of the HTML document.
Several HTML structure tags have been used throughout this article such as the <head>, <body>, <main>, <header>, <footer>, etc. Note that the basic HTML structure tags are the <html>, <head>, <title> and <body> tags.
KEY POINTS
- HTML syntax refers to the order or arrangement in which HTML elements are written to create organized documents.
- The <nav> element is used to navigate between different parts of the webpage.
- HTML5 is the latest version of HTML and is specified at the beginning of the document using the declaration <!DOCTYPE HTML>
- The <head> element consists of metadata, which refers to the data about the HTML document that is used by the computer.
FAQ
- What are the structures of HTML?
Answer: Structure in HTML is used to specify the content of webpages on the internet using several HTML structure elements.
- What are the basic HTML structure tags?
Answer: There are several basic HTML structure tags but the most important are the <html>, <head>, <title> and <body> tags.
- What is HTML5 syntax?
Answer: HTML5 syntax is the syntax of the latest version of HTML. The version of HTML is always declared at the top of the HTML document.
- What is the main syntax of HTML?
Answer: HTML documents are made up of several HTML elements. The main HTML syntax starts with the document type declaration written as <!DOCTYPE HTML> followed by the <html> element then the <head> having the <title> element nested inside and <body> elements.
QUIZ
- HTML syntax is the order in which HTML elements are written.
True or false
Answer: True
- A typical HTML document starts with_____.
- html element
- head element
- document declaration
- title element
Answer: C
- The content of the <head> element is shown .
- In the title bar of the web browser
- At the top of the webpage
- Nowhere on the web browser display
- At the bottom of the webpage
Answer: C
English