INTRODUCTION
The first step to learning how to build a website is gaining an understanding of HTML (HyperText Markup Language). HTML provides structure to a website. Markup can be thought of as the bones that compose the skeletal system. A user never actually sees the markup. Markup communicates with the web browser engine, and the browser converts the markup into content. Developers use tags to customize websites. Developers can Understanding the markup for HTML Boilerplate is a key first step in understanding web development.
TAGS
The markup found in an HTML page is contained within tags. The various tags in an HTML document inform the browser how to render the markup. For example, content found in between <p></p> tags would be rendered as paragraphs. Content found between <h1></h1> tags would be rendered as headings. Without any content, <p></p> and <h1></h1> would only be referred to as tags. When tags contain content, they are referred to as html elements.
CLASSES AND IDS
HTML tags can be given unique identifiers so developers can more easily manipulate the tags if needed. For example, this paragraph tag is given the class of red: <p class=”red”></p>. This heading tag is given the id of blue: <h1 id=”blue”></h1>. A developer can manipulate these specific tags by selecting “red” or “blue” when working with CSS and JavaScript. Classes are used in a way such that multiple tags can be assigned the same class. This is done so they can all be customized in the same way. IDs, on the other had, are usually reserved for one tag. This is done when a single HTML element is required to be styled differently.
BOILERPLATE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
</body>
</html> The boilerplate is an outline that provides developers with a starting point. While all web developers proceed from a standard template, customization of the template is what gives a website definition.
!DOCTYPE
The first line of the boilerplate communicates to the browser the version of HTML being rendered.
<!DOCTYPE html>Doctype is a required first line. It ensures that web browsers use the proper rendering mode allowing necessary components of HTML to be rendered correctly.
<html></html>
The <html> element is considered the root element. All other elements are contained within the root. Elements can be nested within another. In the example below, the head and body element are nested within the html element.
<html>
<head>
</head>
<body>
</body>
</html> The concept of nesting is what defines the parent-child relationship in HTML. In this case, the HTML element is the parent. The body and head elements are children of the html element. Understanding this relationship and terminology is necessary when advancing further towards the mastery of web development.
<head></head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
The head element contains information or metadata that is not displayed to the user.
Metadata is — in its very simplest definition — data that describes data. For example, an HTML document is data, but HTML can also contain metadata in its
MDN<head>element that describes the document — for example who wrote it, and its summary.
<meta charset="UTF-8">The UTF-8 (Unicode Transformation 8) declaration communicates with the browser how to encode characters. Characters such as numbers and letters each have a unique code which is then translated to binary, a language computers understand. through the declaration of UTF-8, browsers are able to render many languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The viewport declaration communicates window sizing with the browser. Width communicates to the browser how to display the website. Setting width to ‘device-width’ informs the website to render the default window size of the device being used. The initial scale tells the browser which value to set the zoom on loading the website.
<link rel="stylesheet" href="style.css">The head section is where the CSS style document is linked with the html. The head is also where other types of files can be linked such as frameworks and fonts.
<body></body>
<body>
<div>
<h1>Hello World</h1>
<p>Put your words here</p>
<img src="picture.jpeg" alt="picture">
<a href="site.com">Site</a>
</div>
</body>The body houses all of the content the user interacts with. Various html tags communicate to the browser how the website should be rendered. JavaScript files are also linked after all of the main content at the end of the body. This is done so the browser can render all the visual aspects of the website first. To avoid any delays in loading the page, a link to the JavaScript document is placed at the end of the body to be loaded last.
CONCLUSION
HTML is the foundation of a website. The boilerplate is an HTML starting point for web developers. The developer fills in the blanks and in doing so provides the structure of a website. An HTML document is broken down into sections that each serve a purpose. The head stores information that tells the browser how to do certain things such as how to encode characters. The body houses the markup that the website renders into content for the user. This is just the starting point and there are many more aspects towards mastery of web development. Two excellent resources to learn the details of HTML and all other aspects of web development are MDN Web Docs and W3Schools.