Hello, future coder! Let's start our Front-End Engineering exploration journey. Believe me - it will be a lot of fun!
Today, we'll dive into HTML, the blueprint of every webpage. HTML is like a layout plan for a house, defining the structure of a web page — from the headings at the top down to the text within the paragraphs.
Imagine an architect labeling his blueprints to specify the architectural style used. Similarly, HTML starts with <!DOCTYPE html> to indicate we're using HTML5 — simple, straightforward, with no need for uppercase characters or quotations.
With this line, we tell web browsers to expect a modern HTML structure.
Tags are the central units of HTML. They designate different types of content, such as paragraphs, headings, and links. A tag usually comprises an opening and closing tag, with content placed in between. For instance, consider a paragraph tag:
Here, <p> and </p> represent the opening and closing tags, respectively, while the text in the middle is the content. Note that the opening and closing tags are represented with angle brackets <>, and the closing tag has an extra forward slash / in front of the tag name.
Just as a house needs a foundation, walls, and a roof, an HTML page requires proper structure. Each tag plays a unique role:
<!DOCTYPE html>: Specifies HTML version.<html>: The root of an HTML document.<head>: Contains essential metadata.<body>: Houses visible content.<title>: Displays the page's title on the browser tab.
Together, they form the skeleton of an HTML page:
Even though it's blank, our blueprint now constitutes a valid HTML structure!
Now, let's examine each of these simple tags:
<html>: Wraps all webpage content within it.<head>: Acts much like an attic, storing useful information for the browser but not visible to users.<body>: The living room of our webpage house, where all the dynamic action happens. It contains visible webpage content, such as text and images.<title>: Functions as the nameplate or the address of our house, displayed in the browser tab.
Keep in mind, all these tags (except <!DOCTYPE html>) require a pairing opening and closing tag!
Let's convert our blueprint into a tangible structure. Here, we'll build a basic webpage that could resemble a one-page story or a simple blog post:
What we've done here is add a heading to our webpage using the <h1> tag and follow it up with a paragraph <p> to welcome visitors and brief them about the webpage's purpose. The <h1> tag is used for main headings, while <p> is used for paragraphs.
Comments serve as note holders within your HTML document. They prove useful in reminding yourself or explaining to others how a certain part of the code functions. Comments begin with <!-- and end with -->.
Although they are not displayed in the browser, comments can be viewed in the page source code and can be invaluable in understanding the purpose of different parts of your code.
Great work! We've examined HTML's role, the DOCTYPE, the structure of HTML tags, the layout of a basic HTML document, and how to comment on your code. Up next, practice exercises will help solidify these concepts. So, stay enthusiastic for our next HTML adventure!
