HTML Basics

I. Basic HTML Document Structure

An HTML page must have .html extension. For example: about.html

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

The <!DOCTYPE html> tells the browser that this is an HTML5 document
The <html> acts as 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 in the page, but appears in a browser’s tab and in search result
The <body> contains the content that will be visible to visitors
General HTML elements consist of: start tag and an end tag, and with the content in between.

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    Content
  </body>
</html>

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 <p> tag with its opening and closing tags.

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

2. Text formating

To display special types of text, we can use a list of elements.

<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 that are on the same line as other content.

It’s useful to add CSS or JavaScript into a part of text.

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

4. `<br>` tag

We can use <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.

<p>
  This is <br />
  a line break
</p>

5. Horizontal Lines

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

IV. Links

You can add links to text or images with <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, link is opened in the current tab. To change this, we can use 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:

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

2. HTML Unordered List

An unordered list starts with the tag.

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

VI. Divs

Div is a container that divides the page into sections.

Div does not have any visual effect in the webpage but will be useful in CSS.

<div>
  <h1>Hello</h1>
  <p>Hello World!</p>
</div>

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 is used to describe the image to screen readers.

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 file name.

<img src="image.jpg" /> <img src="https://website.com/image.jpg" />

2. Image Resizing

To define the image size, we can use the width and height attributes.

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" />

4. Adding links to image

To add links to an image, you can use <a> tag.

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

VIII. Blockquote tag

<blockquote> tag is used to quote some reference from another source or website. In the brwoser, it will indent the text to the right.

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

<blockquote cite="https://www.quote.com">
  The best way to get started is to quit talking and begin doing
</blockquote>

IX. Videos

HTML also supports displaying videos.

src : video source
controls attribute includes basic video controls: pause, play and skip

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

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 also 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 subfolder fot better organization