Let’s Learn HTML
HTML; the skeleton of every web page you’ve looked at; refers to HyperText Markup Language and it’s the base of what we call frontend development. Today, we’ll learn together about elements, tags, attributes, values and content so we can use them while building our websites.
Definitions
To start with, HTML consists of elements and these elements can be placed on top of each other and/or inside each other. The elements themselves are created using tags that have attributes and these attributes have values. Some elements have content depending on the element type.
Elements
The most important element in HTML is the root element and it’s also known as html. Now we’re lost…but let’s wait so we can understand what’s going on. To write html, the file’s extension should be .html and the very first element after the document declaration <!DOCTYPE html> is
The <!DOCTYPE html> represents the document type and it helps browsers understand and display web pages correctly. As we notice, the html element is opening with <html> and closing with </html> and these are what we call opening and closing tags.
Opening tags are represented by < > and closing tags are represented by </ >. We'll find out later that some tags can be < /> and these tags don't have content and thus can't have tags inside of them. As an example for normal tags, the html element has an opening tag <html> and closing tag </html>.
Tags can have siblings and children (this means children will have parents) as we can see below.
Between the opening and the closing html tags, we'll find the head and body elements which are two of the main HTML elements needed to layout a web page. What we have in code now makes us realize why we call HTML as "The skeleton of the web".
div is another element that you've mostly heard about if you know a little bit about web development. The div starts with <div> and ends with </div> as we see below:
Please check the full article
‘The Moe You Know’ in the div element is the content of the div. Text inside an element is called content "innerText" while other elements are called children "innerHTML".
This div includes a basic text but to customize the font color, we'll do the following:
Get Moe Dayraki’s stories in your inbox
Join Medium for free to get updates from this writer.
Please check the full article
Attributes, Values and Content
Here, the id is an attribute and it has a value of introduction. Attributes are assigned in opening tags and each element has its attributes. Some attributes are global such as style, class and id. We use the style attribute to style our element. As an example, we can add a color to the div by adding
To check how this div will look or to play around with styles and other attributes, please visit my simple codepen. The phrase The Moe You Know is the content of the div with #id introduction.
Simple HTML page
Now, we know the basics of HTML so we’ll try to build a simple web page. Open any text editor or IDE and create a new file with .html extension. Write the code below and run it in your browser.
The head element contains metadata (data about data) and should be placed after the opening <html> tag. Here, we're including the title element inside the <head> to define the title of the document and show it on the browser's toolbar as well as search engines when searching for it. Page titles are usually small, with 2-3 words, and unique enough to be considered keywords.
Please check the full article
The body tag contains all the contents of the documents starting from headings and ending with images or videos. Each HTML document should have only 1 body element. In the example, the body element contains an h1 which is a header 1 element. We have 5 header tags in html and the most important 1 is h1 because it defines headings and search engine crawlers will look at them as main points. The p element represents a paragraph and it's mostly used to write descriptions and paragraphs for websites.
Famous Elements
Please check the full article
Keep Learning
HTML is a big language to cover in one article. There are a ton of elements that we haven’t mentioned. Keep learning and the only way to learn new stuff is by researching. I’m more than happy to collaborate on any project you’re working on small/big/easy/complex.
Open Source
The whole project is an open source project under the MIT License. If you find my content useful, please follow me on Github or Twitter
Originally published at http://www.blog.dayrakiarts.com on October 3, 2022.
