Learn the HTML Basics for this section. HTML, or Hypertext Markup Language, is a markup language used to create web pages and other documents that can be displayed on the World Wide Web. An HTML document is a text file that contains HTML tags, which are used to define the structure, content, and appearance of the document.
Learn the HTML Basics in 5 Minutes
The basic structure of an HTML document includes a set of HTML tags, which are enclosed in angle brackets. The most common tags used in HTML documents include:
- <html>: This tag is used to start and end the HTML document, and it usually contains two other tags: <head> and <body>.
- <head>: This tag is used to define the head section of the HTML document, which typically includes the title of the document, any scripts or stylesheets used, and other metadata.
- <body>: This tag is used to define the body section of the HTML document, which contains the actual content of the document, such as text, images, and other media.
Other common HTML tags include:
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: These tags are used to define headings of different sizes and importance.
- <p>: This tag defines a paragraph of text.
- <a>: This tag defines a hyperlink, allowing users to click on a link to navigate to another web page or location.
- <img>: This tag defines an image that can be displayed on the web page.
HTML documents can also include other types of tags and attributes, which can be used to define the appearance and behavior of the document. Overall, HTML is a powerful tool for creating dynamic and interactive web pages that can be accessed and viewed by users worldwide.
<!DOCTYPE> Declaration
The <!DOCTYPE> declaration is an HTML tag that tells web browsers and other software how to interpret the following code. It is usually the first tag in an HTML document, followed by the <html> tag.
The purpose of the <!DOCTYPE> declaration ensures that web browsers and other software correctly interpret the HTML code in the document. It specifies which version of HTML or XHTML is being used, as well as the document type definition (DTD) that defines the structure and syntax of the document.
For example, the <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
<!DOCTYPE html> tells the web browser that the document is written in HTML5 and should be interpreted according to the rules specified in the HTML5 specification.
In contrast, the <!DOCTYPE> declaration for XHTML 1.0 is:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
This tells the web browser that the document is written in XHTML 1.0 and should be interpreted according to the rules specified in the XHTML 1.0 strict DTD.
In general, it is essential to include a <!DOCTYPE> declaration at the beginning of an HTML document to ensure that web browsers and other software correctly interpret it. This helps avoid compatibility issues and provides the document is displayed as intended.
HTML Headings
HTML headings are used to define the hierarchy and structure of the content on a web page. Headings are defined using the <h1> through <h6> tags, with <h1> being the most important and <h6> being the least important.
The <h1> tag is typically used for the main title of the web page, while the <h2> through <h6> tags are used for subheadings and other sections of the content. It is vital to use headings appropriately to ensure the content is well-organized and easy to navigate.
Here is an example of how headings can be used in an HTML document:
In this example, the <h1> tag is used for the main title of the web page, while <h2> tags are used for the sections, and <h3> tags are used for the subsections. The content of each section is then placed between the opening and closing tags of the appropriate heading.
Using headings in this way can make it easier for users to navigate the web page’s content and help search engines understand the structure and hierarchy of the content.
HTML Paragraphs
In HTML, paragraphs are defined using the <p> tag. The <p> tag is a block-level element that describes a block of text or content that is separate from other content on the page.
Here’s an example of how to use the <p> tag to define a paragraph:
This example contains two paragraphs, each defined using a <p> tag. The content of each section is placed between the opening and closing <p> tags.
Using the <p> tag appropriately is essential to ensure that the content is well-organized and easy to read. Each paragraph should contain a single topic or idea, and the content should be logically organized within each section.
Other HTML tags can be used within paragraphs to format the content or add additional elements, such as links or images. For example, the <a> tag can create links within the section, while the <img> tag can add pictures.
HTML Links
HTML links are used to create clickable links allowing users to navigate between web pages or sections within the same page. Links are made using the <a> tag “anchor.”
Here’s an example of how to use the <a> tag to create a link:
In this example, the <a> tag creates a link to Google‘s homepage. The link text “here” is displayed on the web page, and when a user clicks on the link, they will be taken to the Google homepage.
The href attribute of the <a> tag is used to specify the URL. The link should point to This can be either an absolute URL (e.g., https://speakitfree.com) or a relative URL (e.g., /about.html), depending on the location of the web page and the target page.
Links can also be styled using CSS to change the appearance of the link text, such as the color, underline, or hover effects. Additionally, links can create clickable buttons or images by wrapping the button or image in a <a> tag and specifying the URL in the href attribute.
HTML Images
In HTML, images are added to a web page using the <img> tag. The <img> tag is a self-closing tag, meaning it doesn’t require a closing tag.
Here’s an example of how to use the <img> tag to add an image to a web page:
In this example, the <img> tag adds an image to the web page. The src attribute specifies the URL of the image file, and the alt attribute describes the image for visually impaired users or disabled images in their web browsers.
It is essential to provide a descriptive alt attribute for each image to ensure the content is accessible to all users.
Images can be styled using CSS to change the image’s size, position, and other properties. Additionally, images can be linked to other pages or resources by wrapping the <img> tag in a <a> tag and specifying the URL in the href attribute.
How to View HTML Source
Have you ever seen a Web page and wondered, “Hey! How did they do that?”
To view the HTML source code of a web page, you can use the “View Page Source” or “View Source” option in your web browser. The exact method for accessing this option may vary depending on your browser, but here are some general steps you can follow:
- Open the web page you want to view the source code for in your web browser.
- Right-click anywhere on the page (or on a specific element you want to view the source for).
- Select “View Page Source” or “View Source” from the context menu. This will open the HTML source code in a new window or tab.
- Alternatively, you can view the source code using the keyboard shortcut Ctrl + U (Windows) or Command + U (Mac).
Once you have the HTML source code open, you can view and analyze the code to better understand how the web page is structured and how it works. You can also use this information to make changes or modify the code if necessary.
