About HTML
Hypertext Markup Language (HTML) is the standard markup language used to create web pages.
It defines the content of the webpage using a series of elements, which are marked by a start and end
tag with content inside.
These elements tell the browser how to render the content.
An example element has this format:
<elementname>Content goes here</elementname>
HTML Syntax and Structure
The basic structure of a HTML page is shown below. It is common practice to indent each child element in the head and body sections to make the document more readable when developing.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Example</title>
5 </head>
6 <body>
7 <!--Content-->
8 <h1>Hello</h1>
9 <p>This is some sample html</p>
10 <a href="index.html">This is a link</a>
11 </body>
12 </html>
With reference to the example above,
- Line 1 identifies a HTML5 document
- The <html> </html> tags on line 2 and 11 marks the content of the page
- The head section marked by <head> </head> at line 3 to 5 holds the title of the webpage, along with any other metadata the page needs such as scripts, linked resources, and styles.
- The body section marked by <body> </body> at line 6 to 11 holds the content to be shown on the page. It uses various tags to correctly render content such as text, images, and videos.
- Comments in HTML are marked using <!-- -->. Anything inside the comment tags will not be rendered in the webpage.
To organise my HTML document, I also used other tags such as div to divide up the content in the body to make it easier to understand and style with CSS later. There are many different tags that can be used in a HTML file. Some of the commonly used ones are listed below.
Head| title | Represents the document's name. Is shown as the name of the tab in a browser |
| link | Links resources from other files. Used to link CSS files to HTML |
| script | Used to embed JavaScript into HTML documents |
| meta | Used to represent various other types of metadata that can't be defined with other tags |
Body
| h1 | Marks text as a heading. Displays text in a large, bold font. Has variants such as h2, h3, etc |
| p | Marks text as a paragraph. Displays text in normal font |
| img | Used to embed images into a web page |
| table | Used to show information in a table, requires other tags such as <tr> and <td> to display the content correctly |
| ul | Used to show an unordered list of items, uses <li> to mark individual list items |
| nav | Used to mark a section for navigation to other pages |
| div | Has no specific meaning, used to group elements that have some similarities |