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
<!DOCTYPE html>
<html>
...
</html>
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.
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>.
Link to my blog for 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
<div id="introduction" style="color:red">The Moe You Know</div>
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.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
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.
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
The anchor
The Bold
Link to my blog for 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.