Introduction
HTML, or HyperText Markup Language, is the standard markup language for creating web pages. It tells your web browser how to structure and format the content on the web page.
In this blog, we will go over the basic syntax and structure of HTML, as well as some common elements that you can use to build your web pages. By the end of this blog, you will have a good understanding of how to create a basic HTML page and you will be ready to start building your web pages from scratch.
Getting Started
Before we dive into the details of HTML, let's go over a few things that you will need to start writing HTML.
First, you will need a text editor. A text editor is a program that allows you to create and edit plain text files. There are many text editors available, both free and paid. Some popular text editors for writing HTML include Notepad++, Visual Studio Code, Sublime Text, and Atom.
And, you will need a web browser. A web browser is a software program that allows you to access and view web pages on the internet. Some popular web browsers include Google Chrome, Mozilla Firefox, and Safari.
The Basic Structure of an HTML Page
An HTML page consists of a series of elements, which are represented by tags. A tag is a keyword surrounded by angle brackets, and it is used to mark the start and end of an element.
For example, the <p> tag is used to mark the start of a paragraph element, and the </p> tag is used to mark the end of the paragraph element.
The basic structure of an HTML page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Let's go over each of these elements in more detail.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tells the web browser which version of HTML the page is written in. In the example above, we are using HTML5, which is the latest version of HTML.
The <html> Element
The <html> element is the root element of an HTML page. It contains all the other elements on the page.
The <head> Element
The <head> element is a container for metadata (data about the HTML page). It typically contains information such as the title of the page, the character set being used, and any CSS or JavaScript files that the page uses.
The <title> Element
The <title> element specifies the title of the page, which is displayed in the browser's title bar or tab.
The <body> Element
The <body> element contains the content of the HTML page. This is where you will put the majority of your content, such as headings, paragraphs, images, and links.
Basic HTML Elements
Now that you have a basic understanding of the structure of an HTML page, let's go over some common HTML elements that you can use to build your web pages.
Headings
Headings are used to organising and structuring your content. There are six levels of headings, ranging from <h1> (the largest and most important) to <h6> (the smallest and least important).
Here is an example of how to use headings:
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
Paragraphs
Paragraphs are used to contain blocks of text. To create a paragraph, use the <p> tag.
Here is an example of how to use paragraphs:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Links
Links, or hyperlinks, are used to connect web pages to each other. To create a link, use the <a> tag. The href attribute specifies the link's destination.
Here is an example of how to create a link:
<a href="https://www.example.com">Visit our website</a>
Images
Images are used to add visual content to your web pages. To add an image, use the <img> tag. The src attribute specifies the location of the image file.
Here is an example of how to add an image:
<img src="image.jpg" alt="A description of the image">
The alt attribute is used to provide a description of the image. This is important for accessibility, as screen readers will read out the description to users who are visually impaired.
Lists
Lists are used to organize content into a specific order. There are two types of lists: ordered lists and unordered lists.
An ordered list is created using the <ol> tag and each list item is marked using the <li> tag. An unordered list is created using the <ul> tag and each list item is also marked using the <li> tag.
Here is an example of how to create an ordered list:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
And here is an example of how to create an unordered list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Tables
Tables are used to present data in a grid format. To create a table, use the <table> tag. Table rows are marked using the <tr> tag and table cells are marked using the <td> tag. Table headers are marked using the <th> tag.
Here is an example of how to create a basic table:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
Forms
Forms are used to gather input from users. To create a form, use the <form> tag. Form elements, such as text inputs, checkboxes, and buttons, are marked using various tags, such as <input>, <select>, and <button>.
Here is an example of how to create a basic form:
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="Submit">
</form>
Divisions
Divisions, or <div> elements are used to divide the content of a page into logical sections. They are often used to group elements together and apply styles to them.
Here is an example of how to use divisions:
<div>
<p>This content is contained within a division.</p>
</div>
Advanced HTML Techniques
Now that you have a basic understanding of HTML elements, let's go over some advanced techniques that you can use to enhance your web pages.
Semantic Elements
Semantic elements are HTML elements that have a specific meaning and purpose. They help to provide context and structure to your content.
Some examples of semantic elements include:
<header>: used to contain the header content of a page or section<footer>: used to contain the footer content of a page or section<article>: used to contain a self-contained piece of content, such as a blog post<section>: used to contain a group of related content<aside>: used to contain content that is related to the main content, but not essential to understanding it
Using semantic elements can make your HTML more readable and easier to understand, as well as improve accessibility for users.
HTML5 Structural Elements
HTML5 introduced several new structural elements that can be used to define the structure of a page. These elements include:
<main>: used to contain the main content of a page<nav>: used to contain navigation links<figure>: used to contain self-contained content, such as an image or a code snippet, along with a caption<figcaption>: used to contain the caption for a<figure>element
Using these structural elements can help to improve the organization and semantics of your HTML code.
HTML5 Form Elements
HTML5 also introduced several new form elements that can be used to create more advanced and user-friendly forms. These elements include:
<datalist>: used to create a list of options for an<input>element<output>: used to display the result of a calculation or form submission<progress>: used to display the progress of a task<meter>: used to display a measurement within a known range
Using these form elements can help to improve the functionality and usability of your forms.
Responsive Design
Responsive design is the practice of designing web pages that can adapt to different screen sizes and devices. This is important because more and more users are accessing the internet using mobile devices, such as smartphones and tablets.
To create a responsive design, you can use media queries and flexible layout techniques. Media queries allow you to apply different styles based on the width of the viewport (the visible area of the web page). Flexible layout techniques allow you to create layouts that can adjust to the size of the viewport.
Here is an example of how to use a media query to apply different styles based on the viewport width:
@media (max-width: 600px) {
/* styles for screens less than 600px wide */
}
@media (min-width: 601px) and (max-width: 900px) {
/* styles for screens between 601px and 900px wide */
}
@media (min-width: 901px) {
/* styles for screens wider than 901px */
}
CSS
CSS, or Cascading Style Sheets, is a stylesheet language that is used to control the look and formatting of a web page. It is often used in conjunction with HTML to add styles to the content of a page.
CSS consists of rules that are applied to the elements on a web page. Each rule consists of a selector, which specifies the elements that the rule applies to, and a declaration, which consists of one or more properties and their values.
Here is an example of a CSS rule:
p {
color: red;
font-size: 16px;
}
This rule applies to all <p> elements on the page, and it sets the color of the text to red and the font size to 16 pixels.
CSS has many different properties that you can use to control the appearance of your web pages. Some common properties include:
color: sets the color of the textfont-size: sets the size of the fontfont-family: sets the font familybackground-color: sets the background color of an elementwidth: sets the width of an elementheight: sets the height of an elementmargin: sets the margin around an elementpadding: sets the padding within an element
You can apply CSS to your HTML pages in three ways:
- Inline style: you can apply styles directly to an HTML element using the
styleattribute. This method is not recommended, as it mixes the content and presentation of the page.
<p style="color: red; font-size: 16px;">This is a paragraph.</p>
- Internal style sheet: you can add a style sheet to the head of your HTML page using the
<style>element. This method is okay for small projects, but it can become unwieldy for larger projects.
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
External style sheet: you can create a separate CSS file and link to it from your HTML page using the
<link>element.This method is the recommended way to apply styles to your web pages, as it separates the content and presentation of the page and makes it easier to maintain.
<head>
<link rel="stylesheet" href="style.css">
</head>
Conclusion
HTML is the foundation of the web, and it is an essential skill for anyone who wants to create websites or web applications. In this guide, we covered the basic structure and elements of HTML, as well as some advanced techniques such as semantic elements, responsive design, and CSS.
To continue learning HTML, you can explore the documentation on the W3C website, try some online tutorials or exercises, or build your own web pages using the skills you have learned.