Skip to main content

HTML Basics: Learn Essential Concepts of HTML

HTML Documents​

  • An HTML document is a text file that contains HTML code, which is used to create web pages.

  • HTML documents are structured using HTML tags, which define the structure and content of the web page.

  • The basic structure of an HTML document includes the <!DOCTYPE html> declaration, the <html> element, and the <head> and <body> sections.

  • The <!DOCTYPE html> declaration specifies the version of HTML being used and helps web browsers render the page correctly.

  • The <html> element is the root element of an HTML document, and contains all the other elements that define the structure and content of the page.

  • The <head> section contains metadata about the page, such as the page title, links to CSS stylesheets, and other information that is not displayed on the page itself.

  • The <body> section contains the visible content of the page, such as text, images, and other elements that are displayed on the page.

  • HTML documents can include a variety of elements, such as headings, paragraphs, links, images, forms, and more, which are used to create the content of the web page.

  • HTML documents can also include CSS stylesheets and JavaScript code, which are used to control the appearance and behavior of the page.

As an example:

Editor

Loading...

The <!DOCTYPE> Declaration​

  • The <!DOCTYPE> declaration is an instruction to the web browser about what version of HTML the web page is written in.
  • The <!DOCTYPE> declaration must be the first line of code in an HTML document and is not an HTML tag.
  • Different versions of HTML have different rules and standards for how web pages should be structured and formatted.
  • The basic syntax for the <!DOCTYPE> declaration is <!DOCTYPE html>, which declares the page to be written in HTML5.

HTML Headings​

Headings are marked up using the <h1> through <h6> elements, with <h1> being the most important and <h6> being the least important.

As an example:

Editor

Loading...

HTML Paragraphs​

HTML paragraphs are a way to organize text on a web page. A paragraph in HTML is defined using the <p> tag, which stands for "paragraph". To create a paragraph, simply enclose the text you want to display in a <p> opening and closing tag.

As an example:

Editor

Loading...

HTML links, also known as hyperlinks, are a way to connect web pages and allow users to navigate between them by clicking on a text or image. Links are created using the <a> tag, which stands for "anchor".

As an example:

Editor

Loading...

In this example:

  • The HTML code <a href="https://skillupwards.com">This is a link</a> creates a hyperlink in a web page.
  • The href attribute specifies the URL (Uniform Resource Locator) of the page or resource that the link points to. In this case, the link points to the website https://skillupwards.com.
  • The text between the opening and closing a tags, in this case "This is a link", is the clickable part of the hyperlink that appears on the web page.
  • When a user clicks on this link, their web browser will navigate to the URL specified in the href attribute.

HTML Images​

HTML images are a way to add pictures and graphics to web pages. Images are inserted into HTML using the <img> tag, which is a self-closing tag.

Editor

Loading...

In this example:

  • The src attribute specifies the URL or file path of the image file.
  • The alt attribute provides a text description of the image, which is displayed if the image cannot be loaded or if the user is using a screen reader.
  • width and height attributes specify the size of the image in pixels.
  • title attribute adds a tooltip text that appears when you hover over the image.
  • style attribute allows you to add inline CSS styles to the image, such as borders, margins, and padding.