close

Introducere în Structura HTML: Elemente de bază și Sintaxă

Structura HTML joacă un rol crucial în construirea paginilor web. Acesta definește modul în care conținutul este organizat și afișat pe o pagină web. Iată o introducere în structura HTML de bază:

1. Doctype

Doctype(Declarația de tip de document) definește versiunea HTML pe care o folosește pagina web. Ar trebui să fie plasat la începutul fișierului HTML.

2. etichetă html

Eticheta html este elementul rădăcină al fiecărui fișier HTML. Acesta încapsulează întregul conținut al paginii web.

3. head etichetă

Eticheta head conține informații despre pagina web care nu sunt afișate direct în browser. Aici sunt definite titlul paginii, metaetichetele, linkurile către fișierele CSS și JavaScript și diverse alte elemente.

4. body etichetă

Eticheta body conține tot conținutul care este afișat pe pagina web. Aici sunt definite elemente precum text, imagini, videoclipuri, link-uri și alte componente ale interfeței cu utilizatorul.

5. Etichete imbricate

HTML folosește o structură ierarhică cu etichete de deschidere și de închidere. Etichetele copil sunt plasate în interiorul etichetelor părinte. De exemplu, eticheta p(paragraf) poate conține etichete span(text inline), etichete puternice(text aldine) și multe alte etichete.

6. Etichete comune

HTML oferă o serie de etichete pentru formatarea și afișarea conținutului. De exemplu, etichetele h1-h6(titluri), eticheta p(paragraf), eticheta img(imagine), o etichetă(link) și multe altele.

 

Iată un exemplu de structură completă a paginii HTML:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

În exemplul de mai sus, avem o pagină HTML completă cu elementele principale precum doctype, html tag, head tag și body tag. În secțiunea de cap, definim titlul paginii, fișierele CSS și JavaScript care vor fi utilizate. Secțiunea de corp conține elemente precum antet, principal și subsol pentru a afișa conținutul paginii web.

 

Folosind structura HTML corectă, puteți construi pagini web bine organizate, lizibile și interactive.