Front-End Tutorials: HTML basics
These Front-End Tutorials articles will be used as my personal learning notes but at the same time as a way to distribute information to everyone interested in learning Front-End Engineering.
This blog post will cover just the basic information to get us started on HTML structure and anatomy.
HTML Anatomy
HTML stands for HyperText Markup Language and it’s what defines the structure and presentation of a webpage.
HTML Element
HTML is composed of elements that define the content of a webpage. Each element is a unit of content formed by HTML tags. The opening and closing tags tell the browser where an HTML element starts and ends. These tags surround the content that can be text or other elements.
- opening tag —
<p> - content —
This is a paragraph. - closing tag —
</p>
HTML Body
One of the important HTML elements is the body element. The unique feature of this element is that just the information inside of it may be seen on the screen. Many different types of elements and content can then be added to the body element to be presented on the screen.
<body>
<p>This paragraph will be presented on the screen! Happy days!</p>
</body>HTML Structure
HTML documents are arranged according to a hierarchical tree of relationships. As we’ve seen on the previous HTML code, the <p> element is considered a child of the <body> element since it is nested inside of the parent element (<body>).
For readability purposes, child elements are written with 2 spaces of indentation compared with its parent.
Headings
HTML headings are comparable to headings in other media. For instance, huge headlines are frequently employed in newspapers to grab readers’ attention. Headings can also be used to define content, such as the title of a movie or a tutorial.
<h1>— used as main headings. All the others are subheadings.<h2><h3><h4><h5><h6>
<body>
<h1>Tigers</h1>
<h2>About Tigers</h2>
<h3>Species</h3>
<h3>Features</h3>
<h2>Habitat</h2>
<h3>Countries with Large Tiger Populations</h3>
<h3>Countries with Small Tiger Populations</h3>
<h2>Media</h2>
</body>The div element
The div elements don’t have a visual representation but they are used to group elements or apply custom styles to all the elements inside.
<body>
<h1>Tigers</h1>
<div>
<h2>About Tigers</h2>
<h3>Species</h3>
<h3>Features</h3>
</div>
<div>
<h2>Habitat</h2>
<h3>Countries with Large Tiger Populations</h3>
<h3>Countries with Small Tiger Populations</h3>
</div>
<div>
<h2>Media</h2>
</div>
</body>Elements Attributes
Attributes are added to the opening tag of an element that is used to provide information or change the element’s style. The attributes are key/value pairs with name and values of the attribute.
The id attribute is commonly used to identify content on a webpage and it’s an attribute of the <div> element.
<body>
<h1>Tigers</h1>
<div id="introduction">
<h2>About Tigers</h2>
<h3>Species</h3>
<h3>Features</h3>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Tiger Populations</h3>
<h3>Countries with Small Tiger Populations</h3>
</div>
<div id="media">
<h2>Media</h2>
</div>
</body>Text elements
The elements used to display text in HTML documents are paragraphs (<p>), used to contain blocks of plain text, and spans (<span>) used to separate short pieces of text on the same line.
<body>
<h1>Tigers</h1>
<div id="introduction">
<h2>About Tigers</h2>
<p>The tiger <span>(Panthera tigris)</span> is the largest living cat species and a member of the genus Panthera.</p>
<h3>Species</h3>
<h3>Features</h3>
<p>The tiger has a muscular body with strong forelimbs, a large head and a tail that is about half the length of its body.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Tiger Populations</h3>
<h3>Countries with Small Tiger Populations</h3>
</div>
<div id="media">
<h2>Media</h2>
</div>
</body>Style Elements
Browsers can apply basic text styling using specific HTML elements:
<em>— is used to emphasis to render it as Italic.<strong>— also used to emphasis to render it as Bold.
Line Breaks
For the browser to render line breaks we need to provide the <br> element that will force a new line in the middle of text blocks.
Unordered Lists
Is the HTML way to tell the browser to create a list of items that has no particular order. These items will be rendered by the browser with a bullet point. The <ul> element should not contain text unless inside its child <li> elements. The <li> element is used to describe the list items.
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Peach</li>
</ul>Will appear like this:
- Apple
- Orange
- Peach
Ordered Lists
Similar to unordered lists with the exception that the items on this list will be numbered and so it’s commonly used for steps, rankings, etc. We still use the <li> element but now inside the parent <ol> element.
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>Will appear like this:
- First step
- Second step
- Third step
Image Element
The <img> element allows the HTML document to force the browser to render an image. This is a self-closing element which means that only requires one tag which ends in a forward slash /.
The image element has the src attribute that is required and used by the browser to know the location of the image file and this location must follow the Uniform Resource Locator (URL) syntax. This means that the image can be located in a remote web server or stored locally.
<img src="image-location.jpg" />
<img src="https://example.com/image-location.jpg" />The alt attribute, which is not required but is strongly advised to use, is also available for the image element. The alt attribute is used to provide a meaningful explanation of the image that has a few purposes:
- if the image fails to load, it can show a text description on a mouse hover;
- used for visually impaired users with the aid of a screen reading software;
- to help on SEO classification.
<img src="image-location.jpg" alt="a meningful description of the image" />Video element
Unlike the image element, the video tag requires an opening and closing tag but, similarly to the image element it also requires the src attribute.
Again, the src attribute will indicate a remote or local location of the video and should be described using the URL syntax.
There are other useful attributes to the video tag such as width and height to set how the video is displayed by the browser and also a controls attribute that requests the browser to present basic video controls.
Between the opening and closing tags, we must provide a text description that will appear if the video fails to load for any reason.
<video src="video-location.mp4" width="320" height="240" controls>
Video not supported
</video>More details about HTML syntax can be found here.
