Introduction to HTML

¿Qué es HTML?

HTML (HyperText Markup Language) is a type of language that indicates browsers how to structure websites.Tags convert content into hyperlinks to connect to other pages, add font styles (italic letters, boldletters) etc.

For example, if you would like to keep the following text to stand alone, you need to specify this is a paragraph by enclosing it in an element tag (<p>).

My cat is very grumpy

HTML

</p> My dog is very grumpy </p>

Note: HTML tags are not case-sensitive. This means it can be written either in capital letters orlowercase. For example, the <tittle> tag can be written as <title>, <TITLE>, <Title>,<TiTlE> and will work the same

Basic Structure of an HTML element

Creating my first HTML element.

Let’s write the previous text between the <em> element to italicize the text inside the opening and closing tag

Example:

HTML

</em> My dog is very grumpy </em>

Output

My cat is very grumpy

Note: for this exercise you can simply write the HTML text in your computer's notepad and then save it as .htm or html and then open it on your preferred browser.

HTML Structure

HTML

<!DOCTYPE html>

<head>

<title> this is Victor's site </title>

</head>

<body>

<p> Welcome to my site </p>

</body>

</html>

The <!DOCTYPE html> declaration specifies that the document is an HTML5 document. It must only appear once and the beginning of the HTML document.
The <html> element is known as the root element of an HTML page and encloses all the content within an HTML document.
The <head> element contains meta information (keywords, page description that will display in search results, CCS, character encoding, author's name, etc) about the HTML page.
The <title> element specifies the title page (which is shown in the browser's title bar, in the page's tab, and the description of the page when it is bookmarked).
The <body> element establishes the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, videos, lists, audio tracks, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph

Basic HTML Tags

An HTML element commonly has a start tag or opening tag and an end tag or closing tag:

<opening tag> content </closing tag>

Example of some basic HTML elements:

https://onecompiler.com/html/436zedvrv

Empty or void elements do not need a closing tag, and do not have content, they are only allowed to have attributes, see examples below.

Nesting Elements

Elements can be placed inside other elements. This called “nested elements”.

For example, if you want to express that your dog is very grumpy, you need to enclose the word “very” in a <strong> element.

HTML

<p>My cat is <strong> very </strong> grumpy.</p>

Output

My dog is very grumpy.

Output

Void or empty elements

These elements don't have content and don't require a closing tag. Added to that, they are usedto insert/ embed something into the document.

For example, the tag <img> is used to embed an image in an HTML page.

HTML

Note: in HTML is not required to add “/” at the end of the tag of a void or empty elements, forexample: <img src="images/catsanddogs.jpg" alt="cat" /> However the syntax is valid aswell and might be useful if you want your HTML to be XML valid.

HTML Attributes

HTML Attributes are special words used inside opening tags to control the elements’behavior.HTML attributes are a modifier of an HTML element type.

For example, the attribute class is a used to specify one or more class names for an elementand identify the element with style information.

An attribute must have:

● A blank space between the opening tag and the attribute name. (For elements with more than one attribute, they must also be separated by a non-breaking space.

● The attribute name must be followed by an equal character (=).

● An Attribute value must be surrounded by double quotes.

Understanding Attributes

src attribute: it specifies the location of a digital source, which is typically a URL or a file path.

e.g, <img src="images/catsanddogs.jpg"/>

alt attribute: it specifies the alternate text description of a picture.

e.g, <img src="images/catsanddogs.jpg" alt="cats ad dogs playing"/>

width attribute: specifies the width of the element using pixels as measurement unit.

e.g, <img src="images/catsanddogs.jpg" alt="cats ad dogs playing" width="100"/>

height attribute: specifies the height of the element using pixels as measurement unit.

e.g, <img src="images/catsanddogs.jpg" alt="cats ad dogs playing" width="100" height="200"/>

href attribute: specifies the URL redirects to.

e.g, <a href="www.wix.com">Visit Wix </a>

style attribute: it's used to add style to an element (i.e. color, font size, etc.).

e.g, <p style="color:red">This is a red paragraph</p>

lang attribute: it's used to specify the language of the website being built. Their main purpose is to assist browsers and search engines. it should always be included in the <html> tag.

e.g, <!DOCTYPE>

<body>

....

</body>

</html>

title attribute: provides extra information about an element when it's hovered over.

e.g, <p title="this is an important paragraph">This is a red paragraph</p>

Boolean Attributes

A boolean attribute in HTML is an attribute that represents true or false values. If an HTML tag contains a boolean attribute - no matter the value of that attribute - the attribute is set to true on that element. If an HTML tag does not contain the attribute, the attribute is set to false.

For example, the attribute disabled can be added to input elements to disable input elements, so the user is unable to make inputs. Disabled elements are grayed out.

HTML

Output

Note:

It’s also valid to write it like this:<input type=”text” disabled />

HTML

Output

Using single quotes and double quotes

It´s possible to use either single quotes (' ') or double quotes (" ") and both work fine. Just please make sure you do not mix quotation characters. (i.e. " ' or " ').

HTML

It's also possible to use single quotes within a text if you are alredy using double quotes to enclose the attributes value or viceversa, see example below.

HTML

Just make sure you are not using the same type of quotation marks at the same time. If you want to use double quotes to enclose a specific word and use double quotes to enclose the entire attribute value you need to use " to enclose the words you want to have sorrounded by double quotes, see examle below.

HTML

Headings and Paragraphs

HTML headings serve as titles or subtitles intended for display on a webpage. They are designated using the

to tags, where <h1> represents the most significant heading and <h6> indicates the least important one, which creates at hierarchical structure.

Search engines rely on headings to organize and index the structure and content of your web pages. You should consider using <h1> for primary headings, followed by <h2> for subheadings, and for less significant headings, and so forth.

Every HTML heading comes with a default size. Nevertheless, you can define the size of any heading by using the style attribute along with the CSS font-size property.

HTML

<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

Output

The HTML tag is used to define a paragraph. Each paragraph begins on a new line, and browsers automatically insert some white space (margin) both before and after it.

HTML

<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

Output

You can't guarantee how HTML will appear. Different screen sizes, whether large or small, and resized windows will yield varying results. Additionally, adding extra spaces or lines in your HTML code won't affect the display. The browser will automatically eliminate any unnecessary spaces and lines when rendering the page.

HTML

<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>

Output

Horizontal Rules in HTML

The tag creates a thematic break in an HTML document, typically shown as a horizontal line. It is utilized to divide content or indicate a shift within the page.

HTML

<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</html>

Output

How to keep spaces and line breaks?

Lets supposed you want to add a poem to your site, and you need to keep spaces and line breaks. If you only add the text as paragraph, HTML will automatically delete those spaces and line breaks. See example below.

HTML

<!DOCTYPE html>
<html>
<body>
<p>The <p> tag does not preserve both spaces and line breaks:</p>

<p>
And the Raven, never flitting, still is sitting, still is sitting

On the pallid bust of Pallas just above my chamber door;

And his eyes have all the seeming of a demon's that is dreaming,

And the lamplight o'er him streaming

throws his shadow on the floor; And my soul from out that shadow that lies floating on the

floor;

Shall be lifted–nevermore!
</p>
</body>
</html>

Output

There are two ways of keeping line breaks on texts.

Adding a <br> element at the end of each line.

HTML

<!DOCTYPE html>
<html>
<body>
<p>The <p> tag does not preserve both spaces and line breaks:</p>

<p>
And the Raven, never flitting, still is sitting, still is sitting<br>

On the pallid bust of Pallas just above my chamber door;<br>

And his eyes have all the seeming of a demon's that is dreaming,<br>

And the lamplight o'er him streaming<br>

throws his shadow on the floor; And my soul from out that shadow<br> that lies floating on the

floor;<br>

Shall be lifted–nevermore!

</p>

</body>

</html>

Output

Using the <pre> element.

Note: the text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

HTML

<!DOCTYPE html>
<html>
<body>
<p>The <pre> tag does preserve both spaces and line breaks:</p>

<pre>

And the Raven, never flitting, still is sitting, still is sitting
On the pallid bust of Pallas just above my chamber door;
And his eyes have all the seeming of a demon's that is dreaming,
And the lamplight o'er him streaming throws his shadow on the
floor;
And my soul from out that shadow that lies floating on the floor
Shall be lifted–nevermore!

</pre>

</body>

</html>

Output