HTML Basics

I. Basic HTML Document Structure

An HTML page must have .html extension, such as about.html.

It’s a good idea to call a homepage index.html because when we navigate a website, it will look in a root directory for an index.html file to serve in the browser.

  • The <!DOCTYPE html> tells the browser that this is an HTML5 document
  • The <html> is the root of our document and contains our code.
  • The <head> contains essential information about the web page, such as the <title> element.
  • The <title> is not visible on the page but appears in a browser’s tab, and the search result
  • The <body> contains the content that will be visible to visitors
  • General HTML elements consist of a start tag, an end tag, and the content in between.
<!DOCTYPE html>
    <title>Page Title</title>

II. Headings

HTML includes six levels of headings, which are ranked according to importance.

HTML headings are defined with the <h1> to <h6> tags.

<h1>This is the largest headline</h1>
<h2>This is also a large headline</h2>
<h3>This is a slightly smaller headline</h3>
<h4>This is an even smaller headline</h4>
<h5>This is the second-smallest headline</h5>
<h6>This is the smallest headline</h6>

III. Paragraph

1. <p> tag

To create a paragraph, we use the <p> tag with its opening and closing tags.

<p>This is a paragraph.</p>

2. Text formatting

We can use a list of elements to display particular types of text.

<p><strong> bold text </strong></p>
<p><em> emphasized text </em></p>
<p><small> small text </small></p>
<p><i> italic text </i></p>
<p><sub> subscripted text </sub></p>
<p><sup> superscripted text </sup></p>
<p><ins> inserted text </ins></p>
<p><del> deleted text </del></p>

3. <span> tag

<span> separates small pieces of content on the same line as other content.

Adding CSS or JavaScript into a part of the text can sometimes be useful.

<p>Hello, <span>world</span></p>

4. <br> tag

We can use the <br /> tag to add a line break without starting a new paragraph.

The <br /> tag has no closing tag because it has no content inside it.

  This is <br />
  a line break

5. Horizontal Lines

To create a horizontal line, we use the <hr /> tag.

You can add links to text or images with the <a> tag.

We use the href attribute (hyperlink reference) to define the link’s destination address:

<a href="#">Read here</a>

The target Attribute

By default, a link is opened in the current tab. To change this, we can use the target attribute target="_blank" to open the document in a new window or tab.

<a href="url" target="_blank">link text</a>

V. Lists

The list item element create list items inside:

  • Ordered lists
  • Unordered lists

1. HTML Ordered Lists

An ordered list starts with the tag, and each list item is defined by the tag.

Here is an example of an ordered list:

  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>

2. HTML Unordered List

An unordered list starts with the tag.

  <li>One Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>

VI. Div

Div is a container that divides the page into sections.

Div has no visual effect on the webpage but will be useful in CSS.

  <p>Hello World!</p>

VII. Images

HTML < img /> tag is used to insert an image to a web page. It is a self-closing tag.

Image syntax

<img src="image.jpg" alt="cat image" />
  • src: image location
  • alt: alternate text for the image. The alt attribute can describe the image to screen readers and search engine bots.

1. src

We can point to external images by including the entire URL of the image, or we can point to images within our site by listing the file name.

<img src="image.jpg" /> <img src="" />

2. Image Resizing

We can use the width and height attributes to define the image size.

The value can be specified in pixels or as a percentage:

<img src="cat.jpg" height="150px" width="150px" alt="cat image" />

3. Image Border

By default, an image has no borders. We can use the border attribute within the image tag to create a border around the image.

<img src="cat.jpg" height="150px" width="150px" border="1px" alt="cat image" />

You can use the <a> tag to add links to an image.

<a href="#Images">
  <img src="img/cat.jpg" alt="Cat" width="300" />

VIII. Blockquote tag

<blockquote> tag quotes some reference from another source or website. In the browser, it will indent the text to the right.

We can add the attribute cite to show where we receive this information on this quote from.

By default, browsers apply a margin to the blockquote element. For example, Chrome applies a 40px left and right margin and a 10px top and bottom margin.

<blockquote cite="">
  The best way to get started is to quit talking and begin doing

IX. Videos

HTML also supports displaying videos.

You can add a video source using the src attribute.

<video src="myVideo.mp4"></video>

To show the built-in controls, you can add the controls attribute:

<video src="myVideo.mp4" controls></video>

By default, a video file does not play automatically. You can add the autoplay attribute to play the video automatically. In the example below, the video autoplays only if muted.

<video src="myVideo.mp4" controls autoplay muted></video>

If you set the loop attribute, your video restarts at 0:00. Otherwise, the video stops at the end of the file:

<video src="myVideo.mp4" controls autoplay loop></video>

You can also set a poster image:

<video src="myVideo.mp4" poster="picture.png"></video>

For width and height attributes, you set the space so your video does not change the layout when it’s finally loaded. It is in pixels.

<video src="myVideo.mp4" width="320" height="240" controls>
  Video not supported

Note: The text “Video not supported” will only be displayed if the browser is unable to load the video.

X. HTML attributes

Attributes provide additional information about an element or a tag while modifying them.

<p text-align="center">This text is aligned to center</p>

XI. Comment

The browser does not display comments, but they help document the HTML and add descriptions, reminders, and other notes.

Comments are written in HTML using the following syntax:

<!-- Your comment goes here -->

XII. Coding tips

  • Whitespace between HTML elements makes code easier to read.
  • Indentation also makes code easier to read and shows parent-child relationships.

XIII. File naming and organization

  • Keep file names short and descriptive (about.html, contact.html).
  • Don’t use space. Use underscore or hyphens instead.
  • Use lower case when naming your HTML file (about-me.html).
  • The home page must be index.html.
  • index.html must be in the root folder, not a subfolder.
  • Images should be placed in a subfolder for better organizing.