HTML
5 minute read
Hyper Text Markup Language
HTML is a markup langauge composed of tags, content, and elements that you can use to enclose code to make it behave in a particular way. For example text as a header or a paragraph, a link to a website, or to bold or italicize text.
This example uses the paragraph tag to enclose a line of text.
Tag Tag
_|_ _|_
<p>This is some text</p>
|_______________|
Content
|_______________________|
Element
Attributes
Attributes contain extra information about the element that you don’t want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value. The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things
<p class="Editor note">This is some text</p>
|_________________|
Attribute
Nesting elements
You can nest elements within elements to add more flavour to the website. So for example, you could use the bold element to highlight a single word within a paragraph string as per the example below.
Tag Tag Tag Tag
_|_ _|_ _|_ _|_
<p>This is <strong>some</strong> text.</p>
|______| |____| |____|
Content Content Content
|_________||___________________||________|
Element 1 Element 2 Element 1
Void elements
Not all elements need an opening and closing tag, this is mostly the case for elements are are not wrapped. For example an image source element does not wrap text so there is no closing tag for the opening <img> tag.
<img src="images/myimage.png" alt="My image" />
Image element
The image element can be used to display images on the web page. In it’s most basic form, as per below, it is comprised of two sections. First, the src= define the location of the image itself. This can be in the same folder structure of the website or pull from a URL. The second part is alt= which is used to desribe the image itself if for whatever reason the image does not load.
<img src="images/myimage.png" alt="Image of me" />
Structure of an HTML file
This section sets out the basic structure of a basic HTML file.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>My test page</title>
</head>
<body>
<img src="images/myimage.png" alt="Image of me" />
</body>
</html>
<!DOCTYPE html> defines the type of document. This is required.
<html></html> is the HTML element. It is required. The opening tag is at the very start of the HTML code and closing tag is at the very end. All else is within this element. This element also defines the lang attribute which defines the language for the file, typically this is “en-US” for english.
<head></head> is the HEAD element. Everything within this element is part of the HTML page but not as content. Instead t is data like keywords, a page description for search engine results, CSS to stle the website, or character sets.
<meta charset="utf-8" /> is the CHARACTER SET element. This codifies how the text of the HTML is encoded. It is standard to encde HTML files as UTF-8.
<meta name="viewport" content="width=device-width"> is the VIEWPORT element. This is used to ensure that browsers ona mobile device are rendered according to the size of the screen and that the browser does not shrink the website instead.
<title></title> is the TITLE element. By the name, this sets the title of the web page. As this is in the HEAD element this title appears on the browser tab and not in the web page content itself. This value is used as the text for bookmarks.
<body></body> is the BODY element. This is the opposite of the HEAD element in that everything within this element is displayed as content on the web page.
File & folder structure
A website should be constructed with an organized file and folder structure. Even though this site will be quite basic, when dealing with more complex websites this will ensure data is not compromised and that the website will remain stable.
root
| index.html
|
|___|images
| | image1.png
| | image2.png
|
|___|styles
| | style.css
|
|___|scripts
| | script.js
index.html is normally in the root and holds the homepage data which is in effect the first page people get to when they load your website.
images folder use this folder to store image files that are referenced within your website.
styles folder this folder will hold your CSS code which is used to style your website, such as text font and background color.
scripts folder if your website has script code, such as java scrpt, then store these scripts in the scripts folder.
Using files and folders in code
The following is an example of some HTML that references an image file. Note the <img src= value is the path to the image relative to the index.html file.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Testing 123</title>
</head>
<body>
<img src="images/myimage.png" alt="My image" />
</body>
</html>
To reference images in the same folder as the invoking HTML file use
<img src="myimage.jpg">To reference images in a subdirectory to the invoking HTML file use
<img src="/images/myimage.jpg"To reference images in a folder above the invoking HTML file use
<img src="../folder/myimage.jpg"
Marking up text
You can use different element types to format and strucutre the content of the web page.
Heading
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
Paragrpah
<p>This is a single paragraph</p>
Lists
There are two list type; unordered and orderd. Unordered lists uses a bullet point where an ordered list uses numbers.
<p>This is an unordered list</p>
<ul>
<li>Somehow</li>
<li>Something</li>
<li>Somewhere</li>
</ul>
<p>This is an ordered list</p>
<ol>
<li>Somehow</li>
<li>Something</li>
<li>Somewhere</li>
</ol>
References
What structure should your website have?