Posted by Yes I know I know you may have landed in this blog post with knowledge about this topic and may throw some hate at me but this article is aimed to the new and future web designers, As I have mentioned before this is page is also for archive purposes derived from my own experiences in this HTML lessons series.
So lets get straight to the point, I’m going to be explaining today the basics of an HTML basic structure elements in this HTML lessons series, grab a cup of coffee and enjoy.
Here is a short index of what I will share with you tonight. (yes it is 11:22 Guatemala time)
- Main root
- Document metadata
- Sectoring root
- Content sectioning
- Text content
- Inline txt semantics
- Image and multimedia
- Scripting
- Demarcating edits
- Table content
- Forms
- Interactive elements
Main root
The main root refers to the <html> … </html> tags (top-level element), all the other elements descent from it.
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>...</body>
</html>Document metadata
An HTML file alone with no root tags can still output simple elements such as images, heading elements, and paragraphs for example, but we must be able to provide more information about our website to the world, and for that purpose we need meta data.
The <head> elements contains information about the document such as title, scripts and CSS style sheets. We need to also know that the information within these tags are not outputted in the browser.
We need the <link> element to implement styling elements and interactivity to our web page, we must link them internally or externally to CSS and Java Script files.
The <meta> element contains information that is not visible to the user, but it serves and important role in SEO. Metadata provides a description, keywords, content type, author and display scale options. As you notice, this is a very basic principle of SEO, in these days needs to be complemented with the HTML structure tags inside the BODY.
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML files may have styling rules within body related tags, for example <div style=”border-color: red;”> or it can also be set before the body tags, These two practices in these days are barely used.
Today’s way to add style to our html files s by using the link tag that will bring the style rules from a separate file which can be modified later.
