Introduction to HTML

HTML (Hypertext Markup Language) is the language used to create web documents. It defines the syntax and placement of special instructions (tags) that aren’t displayed but tell the browser how to display the document’s contents. It is also used to create links to other documents, either locally or over a network such as the Internet.

The HTML standard and all other Web-related standards are developed under the authority of the World Wide Web Consortium (W3C).

Basic Structure of HTML

Basic Structure of HTML

The <!DOCTYPE html> the declaration defines that this document as an HTML5 document
The <html> element is the root element of an HTML page.
The <head> the element contains meta-information about the HTML page.
The <title> the element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab).
The <body> the element defines the document’s body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> the element defines a large heading.
The <p> the element defines a paragraph.

The HTML file is always saved in .html format.

HTML Element

An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Here you write the content.</tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

HTML Tags

Every HTML tag is made up of a tag name, sometimes followed by an optional list of attributes, all of which appear between angle brackets < >. Nothing within the brackets will be displayed in the browser. The tag name is generally an abbreviation of the tag’s function (this makes them fairly simple to learn). Attributes are properties that extend or refine the tag’s function.

The name and attributes within a tag are not case-sensitive. <BODY BGCOLOR=white> will work the same as <body bgcolor=white>. However, values for particular attributes may be case sensitive, particularly URLs and filenames.

There are two types of tags:

1. Containers

Most HTML tags are containers, meaning they have a beginning (also called “opener” or “start”) tag and an end tag. The text enclosed within the tags will follow the tag’s instructions, as in the following example:

The weather is <I>gorgeous</I> today. Result: The weather is gorgeous today.

An end tag contains the same name as the start tag, but it is preceded by a slash (/). You can think of it as an “off” switch for the tag. End tags never contain attributes. For some tags, the end tag is optional and the browser determines when the tag ends by context. This practice is most common with the <p> (paragraph) tag.

2. Standalone tags

A few tags do not have end tags because they are used to place standalone elements on the page. The image tag (<img>) is such a tag and it simply plops a graphic into the flow of the page. Other standalone tags include the line break (<br>), horizontal rule (<hr>), and tags that provide information about a document and don’t affect its displayed content, such as the <meta> and base> tags.

HTML Attributes

Attributes are added within a tag to extend or modify the tag’s actions. You can add multiple attributes within a single tag. Tag attributes, if any, belong after the tag name, each separated by one or more spaces. Their order of appearance is not important.

All HTML elements can have attributes.
The href attribute of <a> specifies the URL of the page the link goes to.
The src attribute of <img> specifies the path to the image to be displayed.
The width and height attributes of <img> provide size information for images.
The alt attribute of <img> provides an alternate text for an image.
The style the attribute is used to add styles to an element, such as color, font, size, and more.
The lang attribute of the <html> tag declares the language of the Web page.
The title an attribute defines some extra information about an element.

The following are examples of tags that contain attributes:

If you liked our content Introduction to HTML, then you may also like Client-Server Architecture

Introduction to HTML || HTML/CSS || BCIS Notes