HTML, or Hyper Text Markup Language, is the foundation of every website you see on the internet. It's like the bones or skeleton of the website. Without HTML, websites would just be a jumbled mess of text and images, with no organization or structure.
So, if you're interested in web development, learning HTML is an essential first step. It may seem daunting at first, but once you get the hang of it, you'll be well on your way to creating amazing websites of your own!
Parts of an HTML Document
To start there are three important parts of an HTML document you need to know. The doctype declaration, the head, and the body. You're probably most familiar with the body, it is the part that holds the parts the viewer interacts with. Not to worry, we will talk about the other parts and all will be clear, hopefully.
Doctype
The first part of an HTML document is the doctype declaration. It looks like this:
1 | <!DOCTYPE html>
|
It tells the browser which version of HTML you are using. This one tells the browser we are using HTML5, which is the latest and most widely used version of HTML. Without this declaration, the website may not display properly.
Head
The next part of the HTML document is the head, not to be mistaken for the header. The head goes inside the HTML tags which look like this:
1 2 3 | <html lang="en"> </html> |
It contains important information the page needs. For instance, the title of the page, the meta information, and the links to CSS stylesheets and JavaScript files. It typically looks like this:
1 2 3 4 5 6 7 8 | <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="script.js" defer></script> <title>Programming Bliss</title> </head> |
In this example, we have the data that tells the browser which character encoding we are using, what to do if it encounters an older version of Internet Explorer, and what the user's visible area is. It also has a link to the stylesheet and the JavaScript file. And lastly, it tells the browser what the title of the page is. The title is what shows up on the browser tab.
Body
The body also goes inside the HTML tags. It typically looks like this:
1 2 3 | <body> </body> |
This is where everything you want people who visit your website to see.
All Together
All put together you will typically see the doctype, the head, and the body like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="script.js" defer></script> <title>Programming Bliss</title> </head> <body> </body> </html> |
Tags vs. Elements
Now that you know the basic parts of the page, we will get into the fun stuff! Putting content into the <body> tags. The first thing to know is that tags and elements define the structure and content of the page, and how it should be displayed to the user.
HTML tags are used to create the elements that make up a web page, such as headings, paragraphs, links, images, and forms. Each tag is enclosed in angle brackets (< >) and consists of a tag name and optional attributes. For example, the <h1> tag is used to create a top-level heading, while the <p> tag is used to create a paragraph.
An HTML element is made up of an opening and closing tag as well as the content in between. This is what an element looks like:
1 | <p>Hello, world!</p> |
In the above element, we have an opening <p> tag with the content "Hello, world!" and a closing </p> tag.
Common HTML Tags
| Tag | Description |
|---|---|
| <html> | Used to indicate the beginning and end of an HTML document. All other tags and content are contained within these tags. |
| <head> | Used to contain the metadata about the document, including the title, stylesheets, and other information that isn't visible on the page. |
| <title> | Used to define the title of the document, which is displayed in the browser's title bar. |
| <body> | Used to contain the visible content of the document, such as text, images, and other HTML elements. |
| <h1> through <h6> | Used to define headings of different levels, with <h1> being the largest and most important and <h6> being the smallest and least important. |
| <p> | Used to define paragraphs of text. |
| <a> | Used to create hyperlinks to other web pages, files, or locations within the same document. |
| <img> | Used to insert images into the document. |
| <div> | Used to define a division or section within the document, which can then be styled or manipulated separately from other content. |
For a complete list of tags check out W3 Schools.
HTML Attributes
HTML attributes provide additional information about an HTML element. They are found in the opening tag of an element with the value inside quotes. For an image, there is usually an "src" attribute that tells the <img> tag where to find the image. There is also an "alt" attribute that displays alternative text if the image can't be shown, or if the user is visually impaired. Below is an example of what this looks like.
1 | <img src="/images/landscape.jpg" alt="A beautiful landscape"> |
In the above example, the attribute "src" has the value "/images/landscape.jpg" and the attribute "alt" has the value "A beautiful landscape".
Another common attribute is "href", which specifies the destination of a hyperlink.
1 | <a href="https://blog.janettecampbell.com">Visit Programming Bliss</a> |
In this anchor tag, we see the attribute "href" that contains a URL. This URL is where the link will navigate when clicked. In this case, when the text "Visit Programming Bliss" is clicked, it will take you to "https://blog.janettecampbell.com".
For a complete list of attributes check out the mdn web docs.
Now that you know the basics, head over to "Creating Your First HTML Document". Where we will put what you've just learned into practice!
Top photo by Janette Campbell with elements from W3C.
No comments:
Post a Comment